"use client"

import { useRouter } from "next/navigation"
import { useAuth } from "@/contexts/auth-context"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { LogOut, User, Settings } from "lucide-react"
import { useState } from "react"

export default function ProfilePage() {
    const router = useRouter()
    const { user, logout, updatePreferences } = useAuth()
    const [itemsPerPage, setItemsPerPage] = useState(user?.preferences.itemsPerPage || 12)

    if (!user) {
        return (
            <div className="flex min-h-screen items-center justify-center bg-background">
                <Card className="w-full max-w-md">
                    <CardHeader>
                        <CardTitle>Access Denied</CardTitle>
                        <CardDescription>Please log in to view your profile</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <Button onClick={() => router.push("/login")} className="w-full">
                            Go to Login
                        </Button>
                    </CardContent>
                </Card>
            </div>
        )
    }

    const handleLogout = () => {
        logout()
        router.push("/")
    }

    const handleSavePreferences = () => {
        updatePreferences({ itemsPerPage })
    }

    return (
        <div className="min-h-screen bg-background">
            <div className="mx-auto max-w-2xl px-4 py-8">
                <div className="mb-8 flex items-center justify-between">
                    <h1 className="text-3xl font-bold">Profile</h1>
                    <Button variant="outline" onClick={handleLogout} className="gap-2 bg-transparent">
                        <LogOut className="h-4 w-4" />
                        Logout
                    </Button>
                </div>

                <Tabs defaultValue="account" className="space-y-6">
                    <TabsList className="grid w-full grid-cols-3">
                        <TabsTrigger value="account" className="gap-2">
                            <User className="h-4 w-4" />
                            Account
                        </TabsTrigger>
                        <TabsTrigger value="preferences" className="gap-2">
                            <Settings className="h-4 w-4" />
                            Preferences
                        </TabsTrigger>
                        <TabsTrigger value="stats">Stats</TabsTrigger>
                    </TabsList>

                    <TabsContent value="account" className="space-y-4">
                        <Card>
                            <CardHeader>
                                <CardTitle>Account Information</CardTitle>
                                <CardDescription>Your account details</CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Username</label>
                                    <Input value={user.username} disabled />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">Email</label>
                                    <Input value={user.email} disabled />
                                </div>
                                <div className="space-y-2">
                                    <label className="text-sm font-medium">User ID</label>
                                    <Input value={user.id} disabled className="font-mono text-xs" />
                                </div>
                            </CardContent>
                        </Card>
                    </TabsContent>

                    <TabsContent value="preferences" className="space-y-4">
                        <Card>
                            <CardHeader>
                                <CardTitle>Preferences</CardTitle>
                                <CardDescription>Customize your experience</CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="space-y-2">
                                    <label htmlFor="itemsPerPage" className="text-sm font-medium">
                                        Items Per Page
                                    </label>
                                    <Input
                                        id="itemsPerPage"
                                        type="number"
                                        min="6"
                                        max="48"
                                        step="6"
                                        value={itemsPerPage}
                                        onChange={(e) => setItemsPerPage(Number.parseInt(e.target.value))}
                                    />
                                    <p className="text-xs text-muted-foreground">Number of manga to display per page (6-48)</p>
                                </div>
                                <Button onClick={handleSavePreferences}>Save Preferences</Button>
                            </CardContent>
                        </Card>
                    </TabsContent>

                    <TabsContent value="stats" className="space-y-4">
                        <Card>
                            <CardHeader>
                                <CardTitle>Reading Statistics</CardTitle>
                                <CardDescription>Your manga reading activity</CardDescription>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <div className="grid grid-cols-2 gap-4">
                                    <div className="rounded-lg bg-card p-4">
                                        <p className="text-sm text-muted-foreground">Favorite Manga</p>
                                        <p className="text-2xl font-bold">{user.favorites.length}</p>
                                    </div>
                                    <div className="rounded-lg bg-card p-4">
                                        <p className="text-sm text-muted-foreground">Manga Reading</p>
                                        <p className="text-2xl font-bold">{Object.keys(user.chaptersRead).length}</p>
                                    </div>
                                </div>

                                {user.favorites.length > 0 && (
                                    <div className="space-y-2">
                                        <h3 className="font-semibold">Favorite Manga IDs</h3>
                                        <div className="flex flex-wrap gap-2">
                                            {user.favorites.map((id) => (
                                                <span key={id} className="rounded-full bg-primary/10 px-3 py-1 text-sm">
                          #{id}
                        </span>
                                            ))}
                                        </div>
                                    </div>
                                )}

                                {Object.keys(user.chaptersRead).length > 0 && (
                                    <div className="space-y-2">
                                        <h3 className="font-semibold">Reading Progress</h3>
                                        <div className="space-y-1 text-sm">
                                            {Object.entries(user.chaptersRead).map(([mangaId, chapter]) => (
                                                <p key={mangaId} className="text-muted-foreground">
                                                    Manga #{mangaId}: Chapter {chapter}
                                                </p>
                                            ))}
                                        </div>
                                    </div>
                                )}

                                {user.favorites.length === 0 && Object.keys(user.chaptersRead).length === 0 && (
                                    <Alert>
                                        <AlertDescription>
                                            No reading activity yet. Start adding favorites and tracking chapters!
                                        </AlertDescription>
                                    </Alert>
                                )}
                            </CardContent>
                        </Card>
                    </TabsContent>
                </Tabs>
            </div>
        </div>
    )
}