"use client"

import { useState, useEffect, useCallback } from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
import { BarChart3, Eye, Calendar, Plus, ArrowRight, RefreshCw, LogIn } from "lucide-react"
import Link from "next/link"
import { useSession } from "@/lib/auth-client"

interface Comparison {
  id: string
  title: string
  slug: string
  items: string[]
  tags: string[]
  viewCount: number
  overallScore: number
  createdAt: string
}

interface UserComparisonsResponse {
  comparisons: Comparison[]
  total: number
  page: number
}

interface UserStats {
  totalComparisons: number
  totalViews: number
}

export default function ProfilePage() {
  // TODO: Replace with real auth session data
  const user = { name: "Demo User", email: "demo@example.com", avatar: "" }
  const stats = [
    { label: "Comparisons", value: "0", icon: BarChart3 },
    { label: "Total Views", value: "0", icon: Eye },
  ]
  const comparisons: Comparison[] = []

  return (
    <div className="max-w-4xl mx-auto p-4 sm:p-6 space-y-8">
      <div className="flex items-center gap-6">
        <Avatar className="size-20">
          <AvatarImage src={user.avatar} />
          <AvatarFallback className="text-2xl bg-primary/10 text-primary font-semibold">
            {user.name.split(" ").map((n) => n[0]).join("")}
          </AvatarFallback>
        </Avatar>
        <div className="space-y-1.5">
          <h1 className="text-2xl font-bold">{user.name}</h1>
          <p className="text-muted-foreground">{user.email}</p>
        </div>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        {stats.map((stat) => (
          <Card key={stat.label}>
            <CardContent className="flex items-center gap-4 p-4">
              <div className="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
                <stat.icon className="size-5 text-primary" />
              </div>
              <div>
                <p className="text-2xl font-bold">{stat.value}</p>
                <p className="text-sm text-muted-foreground">{stat.label}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <h2 className="text-xl font-semibold">My Comparisons</h2>
          <Link href="/compare">
            <Button size="sm" className="gap-2">
              <Plus className="size-4" />
              New Comparison
            </Button>
          </Link>
        </div>

        {comparisons.length > 0 ? (
          <div className="grid gap-4 sm:grid-cols-2">
            {comparisons.map((comparison) => (
              <Link key={comparison.id} href={`/compare/${comparison.id}`}>
                <Card className="h-full transition-all hover:border-primary hover:shadow-md">
                  <CardHeader className="pb-3">
                    <CardTitle className="text-base line-clamp-1">{comparison.title}</CardTitle>
                    <CardDescription className="flex items-center gap-2 text-xs">
                      <Calendar className="size-3.5" />
                      {comparison.createdAt}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-3">
                    <div className="flex flex-wrap gap-1.5">
                      {comparison.tags.map((tag) => (
                        <Badge key={tag} variant="secondary" className="text-xs">
                          {tag}
                        </Badge>
                      ))}
                    </div>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-muted-foreground">
                        {comparison.items.join(" vs ")}
                      </span>
                      <div className="flex items-center gap-3 text-sm text-muted-foreground">
                        <span className="flex items-center gap-1">
                          <Eye className="size-3.5" />
                          {comparison.viewCount.toLocaleString()}
                        </span>
                        <span className="font-semibold text-foreground">
                          {comparison.overallScore}/10
                        </span>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </Link>
            ))}
          </div>
        ) : (
          <Card className="p-8 text-center">
            <div className="flex flex-col items-center gap-4">
              <div className="size-12 rounded-full bg-muted flex items-center justify-center">
                <BarChart3 className="size-6 text-muted-foreground" />
              </div>
              <div>
                <p className="font-medium">No comparisons yet</p>
                <p className="text-sm text-muted-foreground">
                  Create your first comparison to get started
                </p>
              </div>
              <Link href="/compare">
                <Button className="gap-2">
                  <Plus className="size-4" />
                  Create Comparison
                </Button>
              </Link>
            </div>
          </Card>
        )}
      </div>
    </div>
  )
}