'use client'

import React from 'react'
import Link from 'next/link'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Progress } from '@/components/ui/progress'
import {
  Star,
  Crown,
  Bot,
  ClipboardList,
  BookOpen,
  Search,
  Trophy,
  HandCoins,
  GraduationCap,
  ArrowRight,
  Sparkles,
  Calculator,
  TrendingUp,
  Target,
  Zap,
} from 'lucide-react'

export default function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* Page Title */}
      <div>
        <h1 className="text-2xl font-bold text-[#2c3e50]">Welcome Back! 👋</h1>
        <p className="text-sm text-gray-500">Here&apos;s an overview of your academic journey</p>
      </div>

      {/* Top Stats Row */}
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {/* Points Card */}
        <Card className="border-l-4 border-l-[#f39c12]">
          <CardContent className="pt-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-500">Your Points</p>
                <p className="text-3xl font-bold text-[#2c3e50]">250</p>
                <p className="text-xs text-gray-400 mt-1">Earn more by completing tasks</p>
              </div>
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-amber-100">
                <Star className="h-6 w-6 text-amber-600" />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Account Type Card */}
        <Card className="border-l-4 border-l-[#91C4D9]">
          <CardContent className="pt-0">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-500">Account Type</p>
                <p className="text-3xl font-bold text-[#2c3e50]">Free</p>
                <Badge className="mt-1 bg-gray-100 text-gray-600 hover:bg-gray-100">Basic Plan</Badge>
              </div>
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-[#91C4D9]/20">
                <Crown className="h-6 w-6 text-[#5b9ebd]" />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* AI Coach Card */}
        <Card className="border-l-4 border-l-[#27ae60] overflow-hidden relative">
          <div className="absolute inset-0 bg-gradient-to-br from-[#27ae60]/5 to-transparent" />
          <CardContent className="pt-0 relative">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-500">AI Career Coach</p>
                <p className="text-lg font-bold text-[#2c3e50]">Ready to Chat</p>
                <p className="text-xs text-gray-400 mt-1">Get personalized career guidance</p>
                <Button size="sm" className="mt-3 bg-[#27ae60] hover:bg-[#27ae60]/90 text-white" asChild>
                  <Link href="/ai-coach">
                    <Bot className="mr-1 h-4 w-4" />
                    Start Chat
                  </Link>
                </Button>
              </div>
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
                <Bot className="h-6 w-6 text-green-600" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Assessment Card */}
      <Card className="overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-[#91C4D9]/10 to-[#5b9ebd]/10" />
        <CardHeader className="relative">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#91C4D9]/20">
                <ClipboardList className="h-5 w-5 text-[#5b9ebd]" />
              </div>
              <div>
                <CardTitle className="text-lg">Career Assessment</CardTitle>
                <CardDescription>Complete your assessment to unlock personalized insights</CardDescription>
              </div>
            </div>
            <Badge className="bg-amber-100 text-amber-700 hover:bg-amber-100">Not Started</Badge>
          </div>
        </CardHeader>
        <CardContent className="relative">
          <div className="flex items-center justify-between">
            <div className="flex-1 mr-4">
              <div className="flex items-center gap-2 mb-2">
                <span className="text-sm text-gray-500">Progress</span>
                <span className="text-sm font-semibold text-[#5b9ebd]">0%</span>
              </div>
              <Progress value={0} className="h-2 bg-gray-200 [&>[data-slot=progress-indicator]]:bg-gradient-to-r [&>[data-slot=progress-indicator]]:from-[#91C4D9] [&>[data-slot=progress-indicator]]:to-[#5b9ebd]" />
            </div>
            <Button className="bg-gradient-to-r from-[#91C4D9] to-[#5b9ebd] text-white hover:opacity-90 shadow-md" asChild>
              <Link href="/study-tools">
                Start Assessment
                <ArrowRight className="ml-1 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Quick Access Cards */}
      <div>
        <h2 className="mb-4 text-lg font-semibold text-[#2c3e50]">Quick Access</h2>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {/* Results */}
          <Card className="group cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5">
            <CardContent className="pt-0">
              <div className="flex flex-col items-center text-center">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-100 group-hover:bg-blue-200 transition-colors">
                  <BookOpen className="h-7 w-7 text-blue-600" />
                </div>
                <h3 className="mt-3 font-semibold text-[#2c3e50]">Academic Results</h3>
                <p className="mt-1 text-xs text-gray-500">Track your grades and progress</p>
              </div>
            </CardContent>
          </Card>

          {/* Find Tutors */}
          <Card className="group cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5">
            <CardContent className="pt-0">
              <div className="flex flex-col items-center text-center">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-purple-100 group-hover:bg-purple-200 transition-colors">
                  <Search className="h-7 w-7 text-purple-600" />
                </div>
                <h3 className="mt-3 font-semibold text-[#2c3e50]">Find Tutors</h3>
                <p className="mt-1 text-xs text-gray-500">Connect with expert tutors</p>
              </div>
            </CardContent>
          </Card>

          {/* Competitions */}
          <Card className="group cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5">
            <CardContent className="pt-0">
              <div className="flex flex-col items-center text-center">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-orange-100 group-hover:bg-orange-200 transition-colors">
                  <Trophy className="h-7 w-7 text-orange-600" />
                </div>
                <h3 className="mt-3 font-semibold text-[#2c3e50]">Competitions</h3>
                <p className="mt-1 text-xs text-gray-500">Join & win exciting prizes</p>
              </div>
            </CardContent>
          </Card>

          {/* Bursary */}
          <Card className="group cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5">
            <CardContent className="pt-0">
              <div className="flex flex-col items-center text-center">
                <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-green-100 group-hover:bg-green-200 transition-colors">
                  <HandCoins className="h-7 w-7 text-green-600" />
                </div>
                <h3 className="mt-3 font-semibold text-[#2c3e50]">Bursary Search</h3>
                <p className="mt-1 text-xs text-gray-500">Find funding for your studies</p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Quick Actions Section */}
      <div>
        <h2 className="mb-4 text-lg font-semibold text-[#2c3e50]">Quick Actions</h2>
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-5">
          <ActionCard
            icon={<GraduationCap className="h-5 w-5" />}
            label="Update Profile"
            description="Add your academic info"
            href="/profile"
            color="bg-teal-100 text-teal-600"
          />
          <ActionCard
            icon={<Target className="h-5 w-5" />}
            label="Set Goals"
            description="Plan your career path"
            href="/study-tools"
            color="bg-indigo-100 text-indigo-600"
          />
          <ActionCard
            icon={<TrendingUp className="h-5 w-5" />}
            label="View Report"
            description="Full analysis report"
            href="/results"
            color="bg-rose-100 text-rose-600"
          />
          <ActionCard
            icon={<Calculator className="h-5 w-5" />}
            label="APS Calculator"
            description="Calculate your APS score"
            href="/study-tools"
            color="bg-amber-100 text-amber-600"
          />
          <ActionCard
            icon={<Sparkles className="h-5 w-5" />}
            label="Go Premium"
            description="Unlock all features"
            href="/premium"
            color="bg-gradient-to-br from-[#91C4D9]/30 to-[#5b9ebd]/30 text-[#5b9ebd]"
          />
        </div>
      </div>

      {/* Premium Upgrade Banner */}
      <Card className="overflow-hidden border-0 bg-gradient-to-r from-[#91C4D9] to-[#5b9ebd] text-white">
        <CardContent className="pt-0">
          <div className="flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center">
            <div className="flex items-center gap-4">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-white/20">
                <Zap className="h-6 w-6" />
              </div>
              <div>
                <h3 className="text-lg font-bold">Unlock Your Full Potential</h3>
                <p className="text-sm text-white/80">Upgrade to Premium for unlimited AI coaching, full reports, and priority tutor access.</p>
              </div>
            </div>
            <Button className="bg-white text-[#5b9ebd] hover:bg-white/90 font-semibold shadow-lg" asChild>
              <Link href="/premium">
                Go Premium
                <ArrowRight className="ml-1 h-4 w-4" />
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

function ActionCard({
  icon,
  label,
  description,
  href,
  color,
}: {
  icon: React.ReactNode
  label: string
  description: string
  href: string
  color: string
}) {
  return (
    <Link href={href} className="block">
      <Card className="group cursor-pointer transition-all hover:shadow-md hover:-translate-y-0.5">
        <CardContent className="pt-0">
          <div className="flex items-center gap-3">
            <div className={`flex h-10 w-10 items-center justify-center rounded-xl ${color} transition-transform group-hover:scale-110`}>
              {icon}
            </div>
            <div className="min-w-0">
              <p className="text-sm font-semibold text-[#2c3e50]">{label}</p>
              <p className="text-xs text-gray-500 truncate">{description}</p>
            </div>
          </div>
        </CardContent>
      </Card>
    </Link>
  )
}
