"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import {
  ArrowLeft,
  Users,
  UserCheck,
  Clock,
  TrendingUp,
  DollarSign,
  Crown,
  Sparkles,
  ChevronRight,
  Star,
  Trophy,
  Target,
} from "lucide-react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { useCurrency } from "@/components/currency-provider"
import { formatCount } from "@/lib/utils"

interface Referee {
  id: string
  uid: string | null
  fullName: string
  email: string
  joinDate: string
  profileImage: string | null
  level: string
  earnings: number
  status: string
  referralTimestamp: string | null
}

interface RefereeStats {
  total: number
  earnings: number
  completed: number
  pending: number
}

const levelColors: Record<string, { bg: string; text: string; border: string; icon: string }> = {
  Bronze: { bg: "bg-amber-50", text: "text-amber-700", border: "border-amber-200", icon: "text-amber-500" },
  Silver: { bg: "bg-slate-50", text: "text-slate-600", border: "border-slate-200", icon: "text-slate-400" },
  Gold: { bg: "bg-yellow-50", text: "text-yellow-700", border: "border-yellow-200", icon: "text-yellow-500" },
  Platinum: { bg: "bg-indigo-50", text: "text-indigo-700", border: "border-indigo-200", icon: "text-indigo-500" },
}

const levelIcons: Record<string, React.ReactNode> = {
  Bronze: <Star className="h-3.5 w-3.5 text-amber-500" />,
  Silver: <Sparkles className="h-3.5 w-3.5 text-slate-400" />,
  Gold: <Crown className="h-3.5 w-3.5 text-yellow-500" />,
  Platinum: <Trophy className="h-3.5 w-3.5 text-indigo-500" />,
}

function getInitials(name: string): string {
  return name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase()
    .slice(0, 2)
}

function formatTimeAgo(dateStr: string): string {
  const date = new Date(dateStr)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMins = Math.floor(diffMs / 60000)
  const diffHours = Math.floor(diffMs / 3600000)
  const diffDays = Math.floor(diffMs / 86400000)
  const diffWeeks = Math.floor(diffDays / 7)
  const diffMonths = Math.floor(diffDays / 30)

  if (diffMins < 1) return "Just now"
  if (diffMins < 60) return `${diffMins}m ago`
  if (diffHours < 24) return `${diffHours}h ago`
  if (diffDays < 7) return `${diffDays}d ago`
  if (diffWeeks < 4) return `${diffWeeks}w ago`
  return `${diffMonths}mo ago`
}

// Background gradient colors for avatar fallbacks
const avatarGradients = [
  "from-violet-400 to-purple-500",
  "from-blue-400 to-cyan-500",
  "from-emerald-400 to-teal-500",
  "from-orange-400 to-rose-500",
  "from-pink-400 to-fuchsia-500",
  "from-amber-400 to-yellow-500",
  "from-sky-400 to-indigo-500",
  "from-lime-400 to-green-500",
]

function getAvatarGradient(index: number): string {
  return avatarGradients[index % avatarGradients.length]
}

export default function MyRefereesPage() {
  const [referees, setReferees] = useState<Referee[]>([])
  const [stats, setStats] = useState<RefereeStats>({ total: 0, earnings: 0, completed: 0, pending: 0 })
  const [loading, setLoading] = useState(true)
  const [user, setUser] = useState<{ uid: string; fullName: string } | null>(null)
  const router = useRouter()
  const { formatPrice } = useCurrency()

  useEffect(() => {
    const checkAuth = async () => {
      try {
        const response = await fetch("/api/auth/check")
        if (!response.ok) {
          router.push("/login")
          return
        }
        const userData = await response.json()
        if (!userData.authenticated) {
          router.push("/login")
          return
        }
        if (!userData.isEmailVerified) {
          router.push(`/verify-email?email=${encodeURIComponent(userData.email)}`)
          return
        }
        setUser({ uid: userData.uid, fullName: userData.fullName })
        await loadReferees()
      } catch {
        router.push("/login")
      }
    }
    checkAuth()
  }, [router])

  const loadReferees = async () => {
    try {
      const res = await fetch("/api/my-referees")
      if (!res.ok) throw new Error("Failed to load")
      const data = await res.json()
      setReferees(data.referees || [])
      setStats(data.stats || { total: 0, earnings: 0, completed: 0, pending: 0 })
    } catch (err) {
      console.error("Error loading referees:", err)
    } finally {
      setLoading(false)
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50">
        {/* Header skeleton */}
        <div className="bg-white/80 backdrop-blur-xl border-b border-slate-200/60">
          <div className="max-w-4xl mx-auto px-4 py-4 flex items-center gap-4">
            <Skeleton className="h-10 w-10 rounded-xl" />
            <Skeleton className="h-7 w-48" />
          </div>
        </div>

        <div className="max-w-4xl mx-auto px-4 py-6 space-y-6">
          {/* Stats skeleton */}
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {[...Array(4)].map((_, i) => (
              <Skeleton key={i} className="h-24 rounded-2xl" />
            ))}
          </div>

          {/* Referee list skeleton */}
          <div className="space-y-3">
            {[...Array(5)].map((_, i) => (
              <Skeleton key={i} className="h-20 rounded-2xl" />
            ))}
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50">
      {/* ── Header ── */}
      <div className="bg-white/80 backdrop-blur-xl border-b border-slate-200/60">
        <div className="max-w-4xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Link href="/account">
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-10 w-10 rounded-xl hover:bg-slate-100"
                >
                  <ArrowLeft className="h-5 w-5 text-slate-600" />
                </Button>
              </Link>
              <div>
                <h1 className="text-xl font-bold text-slate-800">My Referees</h1>
                <p className="text-sm text-slate-500">People who joined with your code</p>
              </div>
            </div>
            {stats.total > 0 && (
              <Badge variant="secondary" className="h-8 px-3 text-sm font-semibold bg-violet-50 text-violet-700 border-violet-200">
                <Users className="h-3.5 w-3.5 mr-1.5" />
                {formatCount(stats.total)}
              </Badge>
            )}
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 py-6 space-y-6">
        {/* ── Stats Cards Row ── */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          {/* Total Referees */}
          <Card className="border-0 shadow-sm bg-gradient-to-br from-violet-50 to-purple-50 rounded-2xl overflow-hidden relative group hover:shadow-md transition-shadow">
            <div className="absolute top-0 right-0 w-20 h-20 bg-violet-200/30 rounded-bl-[80px] -mr-2 -mt-2" />
            <CardContent className="p-4 relative">
              <div className="flex items-center gap-2 mb-2">
                <div className="bg-violet-100 p-1.5 rounded-lg">
                  <Users className="h-4 w-4 text-violet-600" />
                </div>
                <span className="text-xs font-medium text-violet-500/80 uppercase tracking-wider">Total</span>
              </div>
              <div className="text-2xl font-bold text-violet-700">{formatCount(stats.total)}</div>
            </CardContent>
          </Card>

          {/* Completed */}
          <Card className="border-0 shadow-sm bg-gradient-to-br from-emerald-50 to-teal-50 rounded-2xl overflow-hidden relative group hover:shadow-md transition-shadow">
            <div className="absolute top-0 right-0 w-20 h-20 bg-emerald-200/30 rounded-bl-[80px] -mr-2 -mt-2" />
            <CardContent className="p-4 relative">
              <div className="flex items-center gap-2 mb-2">
                <div className="bg-emerald-100 p-1.5 rounded-lg">
                  <UserCheck className="h-4 w-4 text-emerald-600" />
                </div>
                <span className="text-xs font-medium text-emerald-500/80 uppercase tracking-wider">Confirmed</span>
              </div>
              <div className="text-2xl font-bold text-emerald-700">{formatCount(stats.completed)}</div>
            </CardContent>
          </Card>

          {/* Pending */}
          <Card className="border-0 shadow-sm bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl overflow-hidden relative group hover:shadow-md transition-shadow">
            <div className="absolute top-0 right-0 w-20 h-20 bg-amber-200/30 rounded-bl-[80px] -mr-2 -mt-2" />
            <CardContent className="p-4 relative">
              <div className="flex items-center gap-2 mb-2">
                <div className="bg-amber-100 p-1.5 rounded-lg">
                  <Clock className="h-4 w-4 text-amber-600" />
                </div>
                <span className="text-xs font-medium text-amber-500/80 uppercase tracking-wider">Pending</span>
              </div>
              <div className="text-2xl font-bold text-amber-700">{formatCount(stats.pending)}</div>
            </CardContent>
          </Card>

          {/* Earnings */}
          <Card className="border-0 shadow-sm bg-gradient-to-br from-sky-50 to-blue-50 rounded-2xl overflow-hidden relative group hover:shadow-md transition-shadow">
            <div className="absolute top-0 right-0 w-20 h-20 bg-sky-200/30 rounded-bl-[80px] -mr-2 -mt-2" />
            <CardContent className="p-4 relative">
              <div className="flex items-center gap-2 mb-2">
                <div className="bg-sky-100 p-1.5 rounded-lg">
                  <DollarSign className="h-4 w-4 text-sky-600" />
                </div>
                <span className="text-xs font-medium text-sky-500/80 uppercase tracking-wider">Earnings</span>
              </div>
              <div className="text-2xl font-bold text-sky-700">₦{stats.earnings.toLocaleString()}</div>
            </CardContent>
          </Card>
        </div>

        {/* ── Empty State ── */}
        {referees.length === 0 && (
          <Card className="border-0 shadow-sm rounded-2xl overflow-hidden">
            <CardContent className="flex flex-col items-center justify-center py-16 px-4">
              <div className="relative mb-6">
                <div className="w-24 h-24 bg-violet-100 rounded-full flex items-center justify-center">
                  <Users className="h-10 w-10 text-violet-400" />
                </div>
                <div className="absolute -bottom-1 -right-1 bg-white rounded-full p-1 shadow-sm">
                  <Target className="h-5 w-5 text-violet-500" />
                </div>
              </div>
              <h3 className="text-lg font-semibold text-slate-700 mb-2">No referees yet</h3>
              <p className="text-sm text-slate-500 text-center max-w-xs">
                Share your referral link to invite friends and earn rewards when they join!
              </p>
              <Link href="/referral" className="mt-6">
                <Button className="bg-violet-600 hover:bg-violet-700 rounded-xl shadow-md shadow-violet-200">
                  <TrendingUp className="h-4 w-4 mr-2" />
                  Share Referral Link
                </Button>
              </Link>
            </CardContent>
          </Card>
        )}

        {/* ── Referee List ── */}
        {referees.length > 0 && (
          <div className="space-y-3">
            <div className="flex items-center justify-between px-1">
              <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-wider">
                All Referees ({referees.length})
              </h2>
            </div>

            {referees.map((referee, index) => {
              const level = referee.level || "Bronze"
              const colors = levelColors[level] || levelColors["Bronze"]

              return (
                <Card
                  key={referee.id}
                  className="border-0 shadow-sm hover:shadow-md transition-all rounded-2xl overflow-hidden group"
                >
                  <CardContent className="p-4">
                    <div className="flex items-center gap-4">
                      {/* Avatar */}
                      <div className="relative flex-shrink-0">
                        <Avatar className="h-12 w-12 ring-2 ring-slate-100 rounded-full">
                          <AvatarImage src={referee.profileImage || undefined} />
                          <AvatarFallback
                            className={`bg-gradient-to-br ${getAvatarGradient(index)} text-white text-sm font-bold`}
                          >
                            {getInitials(referee.fullName)}
                          </AvatarFallback>
                        </Avatar>
                        {/* Level badge dot */}
                        <div
                          className={`absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full ${colors.bg} border-2 border-white flex items-center justify-center`}
                        >
                          {levelIcons[level]}
                        </div>
                      </div>

                      {/* Info */}
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2">
                          <h3 className="font-semibold text-slate-800 truncate text-sm">
                            {referee.fullName}
                          </h3>
                          <Badge
                            variant="outline"
                            className={`shrink-0 text-[10px] px-1.5 py-0 h-5 ${colors.bg} ${colors.text} border-${colors.border.split('-')[1]}`}
                          >
                            {level}
                          </Badge>
                        </div>
                        <p className="text-xs text-slate-400 mt-0.5 truncate">{referee.email}</p>
                        <div className="flex items-center gap-3 mt-1.5">
                          <span className="text-xs text-slate-400 flex items-center gap-1">
                            <Clock className="h-3 w-3" />
                            {referee.referralTimestamp
                              ? formatTimeAgo(referee.referralTimestamp)
                              : formatTimeAgo(referee.joinDate)}
                          </span>
                          {referee.earnings > 0 && (
                            <span className="text-xs font-semibold text-emerald-600 flex items-center gap-1">
                              <DollarSign className="h-3 w-3" />
                              ₦{referee.earnings.toLocaleString()}
                            </span>
                          )}
                        </div>
                      </div>

                      {/* Status */}
                      <div className="flex-shrink-0 text-right">
                        <Badge
                          variant="secondary"
                          className={`text-[10px] px-2 py-0.5 ${
                            referee.status === "completed"
                              ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                              : "bg-amber-50 text-amber-700 border-amber-200"
                          }`}
                        >
                          {referee.status === "completed" ? "Confirmed" : "Pending"}
                        </Badge>
                        <div className="mt-1">
                          <ChevronRight className="h-4 w-4 text-slate-300 group-hover:text-violet-400 transition-colors ml-auto" />
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        )}

        {/* ── Bottom padding ── */}
        <div className="h-8" />
      </div>
    </div>
  )
}