"use client"

import React from "react"
import { useTheme } from "next-themes"
import { useWalletStore } from "@/lib/wallet-store"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { MoonIcon, SunIcon, UserIcon, Cog, ShieldCheck, ShieldAlert } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"

export default function SettingsPage() {
    const { theme, setTheme } = useTheme()
    const { walletConnected, username, isVerified, toggleVerification } = useWalletStore()

    if (!walletConnected) {
        return (
            <div className="container mx-auto px-4 py-8">
                <div className="mx-auto max-w-3xl text-center">
                    <h1 className="text-3xl font-bold tracking-tight sm:text-4xl">Connect Your Wallet</h1>
                    <p className="mt-4 text-lg text-muted-foreground">
                        Please connect your wallet to view your settings.
                    </p>
                </div>
            </div>
        )
    }

    return (
        <div className="container mx-auto px-4 py-8 max-w-3xl">
            <div className="flex flex-col space-y-6">
                <div className="flex items-center justify-between">
                    <h1 className="text-3xl font-bold">Settings</h1>
                    <Cog className="h-6 w-6 text-muted-foreground" />
                </div>

                <Tabs defaultValue="appearance">
                    <TabsList className="grid w-full grid-cols-3">
                        <TabsTrigger value="appearance">Appearance</TabsTrigger>
                        <TabsTrigger value="account">Account</TabsTrigger>
                        <TabsTrigger value="notifications">Notifications</TabsTrigger>
                    </TabsList>

                    <TabsContent value="appearance" className="mt-6">
                        <Card className="dark:border-border">
                            <CardHeader>
                                <CardTitle>Appearance</CardTitle>
                                <CardDescription>
                                    Customize how VoxPop looks and feels for you
                                </CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-6">
                                <div className="space-y-3">
                                    <Label htmlFor="theme">Theme</Label>
                                    <div className="flex flex-col gap-4">
                                        <div className="flex justify-between items-center">
                                            <div className="flex items-center gap-2">
                                                <div className="flex h-9 w-9 items-center justify-center rounded-md border border-input">
                                                    {theme === "light" ? (
                                                        <SunIcon className="h-5 w-5 text-orange-500" />
                                                    ) : (
                                                        <MoonIcon className="h-5 w-5 text-blue-500" />
                                                    )}
                                                </div>
                                                <div>
                                                    <p className="text-sm font-medium">{theme === "light" ? "Light" : "Dark"} Mode</p>
                                                    <p className="text-xs text-muted-foreground">
                                                        {theme === "light" ? "Light" : "Dark"} theme for the interface
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="flex items-center gap-3">
                                                <Button
                                                    size="sm"
                                                    variant={theme === "light" ? "default" : "outline"}
                                                    onClick={() => setTheme("light")}
                                                    className="gap-1"
                                                >
                                                    <SunIcon className="h-4 w-4" />
                                                    Light
                                                </Button>
                                                <Button
                                                    size="sm"
                                                    variant={theme === "dark" ? "default" : "outline"}
                                                    onClick={() => setTheme("dark")}
                                                    className="gap-1"
                                                >
                                                    <MoonIcon className="h-4 w-4" />
                                                    Dark
                                                </Button>
                                                <Button
                                                    size="sm"
                                                    variant={theme === "system" ? "default" : "outline"}
                                                    onClick={() => setTheme("system")}
                                                >
                                                    System
                                                </Button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    </TabsContent>

                    <TabsContent value="account" className="mt-6">
                        <Card className="dark:border-border">
                            <CardHeader>
                                <CardTitle>Account Settings</CardTitle>
                                <CardDescription>
                                    Manage your account settings and preferences
                                </CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-6">
                                <div className="flex justify-between items-center pb-4 border-b dark:border-border">
                                    <div className="flex items-center gap-3">
                                        <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
                                            <UserIcon className="h-5 w-5 text-primary" />
                                        </div>
                                        <div>
                                            <p className="font-medium">{username || "Anonymous User"}</p>
                                            <p className="text-sm text-muted-foreground">Account holder</p>
                                        </div>
                                    </div>
                                    <Button variant="outline" size="sm">
                                        Edit Profile
                                    </Button>
                                </div>

                                {/* For testing: allows toggling verification status */}
                                <div className="flex justify-between items-center py-2">
                                    <div className="flex items-center gap-3">
                                        <div className="h-8 w-8 rounded-full flex items-center justify-center">
                                            {isVerified ? (
                                                <ShieldCheck className="h-5 w-5 text-green-500" />
                                            ) : (
                                                <ShieldAlert className="h-5 w-5 text-amber-500" />
                                            )}
                                        </div>
                                        <div>
                                            <p className="font-medium">Verification Status</p>
                                            <p className="text-sm text-muted-foreground">
                                                {isVerified ? "Verified user with full privileges" : "Unverified user with limited access"}
                                            </p>
                                        </div>
                                    </div>
                                    <div className="flex items-center gap-2">
                                        <Label htmlFor="verification-toggle" className="text-sm font-medium cursor-pointer">
                                            {isVerified ? "Verified" : "Unverified"}
                                        </Label>
                                        <Switch
                                            id="verification-toggle"
                                            checked={isVerified}
                                            onCheckedChange={toggleVerification}
                                        />
                                    </div>
                                </div>

                                <div className="mt-6">
                                    <p className="text-sm text-muted-foreground">
                                        This verification toggle is for testing purposes only. In a production environment,
                                        verification status would be determined by actual identity verification.
                                    </p>
                                </div>
                            </CardContent>
                        </Card>
                    </TabsContent>

                    <TabsContent value="notifications" className="mt-6">
                        <Card className="dark:border-border">
                            <CardHeader>
                                <CardTitle>Notification Settings</CardTitle>
                                <CardDescription>
                                    Manage how and when you receive notifications
                                </CardDescription>
                            </CardHeader>
                            <CardContent>
                                <p className="text-muted-foreground">
                                    Notification settings are not yet implemented.
                                </p>
                            </CardContent>
                        </Card>
                    </TabsContent>
                </Tabs>
            </div>
        </div>
    )
}