"use client"

import { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Trophy, Calendar, Settings, User, Edit } from "lucide-react"
import Link from "next/link"
import { BadgeList } from "@/components/profile/badge-list"
import { getApiUrl } from "@/lib/api-config"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { UserAttendanceList } from "@/components/profile/user-attendance-list"
import { UserReviewsList } from "@/components/profile/user-reviews-list"
import { UserGroupsList } from "@/components/profile/user-groups-list"
import { ChaseSongsList } from "@/components/profile/chase-songs-list"
import { AttendanceSummary } from "@/components/profile/attendance-summary"
import { LevelProgressCard } from "@/components/gamification/level-progress"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { motion } from "framer-motion"

// Types
interface UserProfile {
    id: number
    email: string
    username: string
    avatar: string | null
    bio: string | null
    created_at: string
}

interface UserBadge {
    id: number
    badge: {
        id: number
        name: string
        description: string
        icon: string
        slug: string
    }
    awarded_at: string
}

export default function ProfilePage() {
    const [user, setUser] = useState<UserProfile | null>(null)
    const [badges, setBadges] = useState<UserBadge[]>([])
    const [loading, setLoading] = useState(true)

    const [stats, setStats] = useState({ attendance_count: 0, review_count: 0, group_count: 0 })

    useEffect(() => {
        const token = localStorage.getItem("token")
        if (!token) {
            setLoading(false)
            return
        }

        // Fetch User Data
        fetch(`${getApiUrl()}/auth/users/me`, {
            headers: { Authorization: `Bearer ${token}` }
        })
            .then(res => {
                if (res.ok) return res.json()
                throw new Error("Failed to fetch user")
            })
            .then(data => {
                setUser(data)
                // Fetch Badges
                fetch(`${getApiUrl()}/badges/me`, {
                    headers: { Authorization: `Bearer ${token}` }
                })
                    .then(res => res.ok ? res.json() : [])
                    .then(data => setBadges(data))

                // Fetch Stats
                fetch(`${getApiUrl()}/users/${data.id}/stats`, {
                    headers: { Authorization: `Bearer ${token}` }
                })
                    .then(res => res.ok ? res.json() : { attendance_count: 0, review_count: 0, group_count: 0 })
                    .then((statsData: { attendance_count: number; review_count: number; group_count: number }) => setStats(statsData))
            })
            .catch(err => console.error(err))
            .finally(() => setLoading(false))
    }, [])

    if (loading) {
        return <div className="container py-20 text-center">Loading profile...</div>
    }

    if (!user) {
        return (
            <div className="flex flex-col items-center justify-center gap-4 py-20 min-h-[50vh]">
                <h1 className="text-2xl font-bold">Please Log In</h1>
                <p className="text-muted-foreground">You need to be logged in to view your dashboard.</p>
                <div className="flex gap-4">
                    <Link href="/login">
                        <Button>Log In</Button>
                    </Link>
                    <Link href="/register">
                        <Button variant="outline">Sign Up</Button>
                    </Link>
                </div>
            </div>
        )
    }

    // Transform badges for the list component
    const displayBadges = badges.map(b => b.badge)
    const displayName = user.username || user.email.split('@')[0]

    return (
        <div className="container py-10 max-w-5xl space-y-8">
            {/* Header Section */}
            <motion.div
                initial={{ opacity: 0, y: -20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
                className="relative"
            >
                <div className="absolute right-0 top-0">
                    <Link href="/settings">
                        <Button variant="outline" size="sm" className="gap-2">
                            <Settings className="h-4 w-4" />
                            Settings
                        </Button>
                    </Link>
                </div>

                <div className="flex flex-col md:flex-row gap-8 items-start pt-8">
                    <Avatar className="h-32 w-32 border-4 border-background shadow-lg">
                        <AvatarImage src={`https://api.dicebear.com/7.x/notionists/svg?seed=${user.id}`} />
                        <AvatarFallback><User className="h-12 w-12" /></AvatarFallback>
                    </Avatar>
                    <div className="space-y-4 flex-1">
                        <div>
                            <div className="flex items-center gap-3">
                                <h1 className="text-4xl font-bold tracking-tight">{displayName}</h1>
                                {/* Optional: display role badge */}
                            </div>
                            <p className="text-muted-foreground flex items-center gap-2 mt-2">
                                <Calendar className="h-4 w-4" />
                                Member since {new Date(user.created_at || Date.now()).toLocaleDateString()}
                            </p>
                        </div>
                        {user.bio ? (
                            <p className="max-w-xl text-lg text-muted-foreground/80">
                                {user.bio}
                            </p>
                        ) : (
                            <Link href="/settings" className="text-sm text-muted-foreground hover:underline italic">
                                + Add a bio to your profile
                            </Link>
                        )}

                        <div className="flex gap-6 py-2">
                            <div className="flex flex-col">
                                <span className="text-2xl font-bold">{stats.attendance_count}</span>
                                <span className="text-sm text-muted-foreground uppercase tracking-wider font-medium">Shows</span>
                            </div>
                            <div className="w-px bg-border h-10 self-center" />
                            <div className="flex flex-col">
                                <span className="text-2xl font-bold">{stats.review_count}</span>
                                <span className="text-sm text-muted-foreground uppercase tracking-wider font-medium">Reviews</span>
                            </div>
                            <div className="w-px bg-border h-10 self-center" />
                            <div className="flex flex-col">
                                <span className="text-2xl font-bold">{stats.group_count}</span>
                                <span className="text-sm text-muted-foreground uppercase tracking-wider font-medium">Groups</span>
                            </div>
                        </div>
                    </div>
                </div>
            </motion.div>

            <Tabs defaultValue="overview" className="w-full">
                <TabsList className="grid w-full grid-cols-4 mb-8 h-12">
                    <TabsTrigger value="overview" className="text-base font-medium">Overview</TabsTrigger>
                    <TabsTrigger value="attendance" className="text-base font-medium">My Shows</TabsTrigger>
                    <TabsTrigger value="reviews" className="text-base font-medium">Reviews</TabsTrigger>
                    <TabsTrigger value="groups" className="text-base font-medium">Communities</TabsTrigger>
                </TabsList>

                <TabsContent value="overview" className="space-y-6">
                    {/* Level Progress */}
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2 }}
                    >
                        <LevelProgressCard />
                    </motion.div>

                    {/* Attendance Summary */}
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2, delay: 0.1 }}
                    >
                        <AttendanceSummary />
                    </motion.div>

                    {/* Chase Songs */}
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2, delay: 0.2 }}
                    >
                        <ChaseSongsList />
                    </motion.div>

                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2, delay: 0.2 }}
                    >
                        <Card>
                            <CardHeader>
                                <CardTitle className="flex items-center gap-2">
                                    <Trophy className="h-5 w-5 text-yellow-500" />
                                    Achievements
                                </CardTitle>
                            </CardHeader>
                            <CardContent>
                                <BadgeList badges={displayBadges} />
                                {displayBadges.length === 0 && (
                                    <p className="text-muted-foreground text-sm">No badges earned yet. Keep active!</p>
                                )}
                            </CardContent>
                        </Card>
                    </motion.div>
                </TabsContent>

                <TabsContent value="attendance">
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2 }}
                    >
                        <UserAttendanceList userId={user.id} />
                    </motion.div>
                </TabsContent>

                <TabsContent value="reviews">
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2 }}
                    >
                        <UserReviewsList userId={user.id} />
                    </motion.div>
                </TabsContent>

                <TabsContent value="groups">
                    <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.2 }}
                    >
                        <UserGroupsList userId={user.id} />
                    </motion.div>
                </TabsContent>
            </Tabs>
        </div>
    )
}