"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { ChevronDown, ChevronRight, CheckCircle2, Circle, Clock, Activity, BarChart3 } from "lucide-react"
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
import { PremiumGate } from "@/components/PremiumGate"

type ChapterStatus = 'Mastered' | 'Practiced' | 'In Progress' | 'Not Started'

interface Topic {
  name: string
  status: ChapterStatus
  accuracy: number
  questionsAttempted: number
}

interface Chapter {
  name: string
  topics: Topic[]
  isExpanded: boolean
}

interface Subject {
  name: string
  chapters: Chapter[]
  completionPct: number
}

const getStatusIcon = (status: ChapterStatus) => {
  switch (status) {
    case 'Mastered': return <CheckCircle2 className="text-emerald-500" size={16} />
    case 'Practiced': return <CheckCircle2 className="text-amber-500" size={16} />
    case 'In Progress': return <Clock className="text-[var(--cyan-ai)]" size={16} />
    case 'Not Started': return <Circle className="text-muted-foreground" size={16} />
  }
}

const DEMO_SUBJECTS: Subject[] = [
  {
    name: "Physics",
    completionPct: 42,
    chapters: [
      {
        name: "Kinematics",
        isExpanded: true,
        topics: [
          { name: "Motion in One Dimension", status: "Mastered", accuracy: 92, questionsAttempted: 150 },
          { name: "Projectile Motion", status: "Practiced", accuracy: 75, questionsAttempted: 85 },
          { name: "Relative Velocity", status: "In Progress", accuracy: 45, questionsAttempted: 20 },
        ]
      },
      {
        name: "Laws of Motion",
        isExpanded: false,
        topics: [
          { name: "Newton's First Law", status: "Practiced", accuracy: 88, questionsAttempted: 40 },
          { name: "Friction", status: "In Progress", accuracy: 50, questionsAttempted: 35 },
        ]
      },
      {
        name: "Thermodynamics",
        isExpanded: false,
        topics: [
          { name: "First Law", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          { name: "Carnot Engine", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
        ]
      }
    ]
  },
  {
    name: "Chemistry",
    completionPct: 68,
    chapters: [
      {
        name: "Atomic Structure",
        isExpanded: false,
        topics: [
          { name: "Bohr Model", status: "Mastered", accuracy: 95, questionsAttempted: 110 },
          { name: "Quantum Numbers", status: "Mastered", accuracy: 88, questionsAttempted: 95 },
        ]
      }
    ]
  },
  // Math/Bio dynamic subjects handled below
]

const ZERO_SUBJECTS: Subject[] = [
  {
    name: "Physics",
    completionPct: 0,
    chapters: [
      {
        name: "Kinematics",
        isExpanded: true,
        topics: [
          { name: "Motion in One Dimension", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          { name: "Projectile Motion", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          { name: "Relative Velocity", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
        ]
      },
      {
        name: "Laws of Motion",
        isExpanded: false,
        topics: [
          { name: "Newton's First Law", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          { name: "Friction", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
        ]
      },
      {
        name: "Thermodynamics",
        isExpanded: false,
        topics: [
          { name: "First Law", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          { name: "Carnot Engine", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
        ]
      }
    ]
  },
  {
    name: "Chemistry",
    completionPct: 0,
    chapters: [
      {
        name: "Atomic Structure",
        isExpanded: false,
        topics: [
          { name: "Bohr Model", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          { name: "Quantum Numbers", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
        ]
      }
    ]
  },
  // Math/Bio dynamic subjects handled below
]

export default function ProgressTrackerPage() {
  const { userId, user } = useActiveUser()
  const isDemo = isDemoUser(userId)
  const [subjects, setSubjects] = useState<Subject[]>([])

  useEffect(() => {
    const targetExam = user?.target_exam || "JEE_Main";
    const isNeet = targetExam === "NEET";
    const isJeeNeet = targetExam === "JEE_NEET";
    
    const mathDemoSubject: Subject = {
      name: "Mathematics",
      completionPct: 28,
      chapters: [
        {
          name: "Calculus",
          isExpanded: true,
          topics: [
            { name: "Limits", status: "In Progress", accuracy: 60, questionsAttempted: 45 },
            { name: "Derivatives", status: "Practiced", accuracy: 72, questionsAttempted: 35 },
            { name: "Integrals", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          ]
        },
        {
          name: "Coordinate Geometry",
          isExpanded: false,
          topics: [
            { name: "Straight Lines", status: "Practiced", accuracy: 80, questionsAttempted: 40 },
            { name: "Circles", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          ]
        }
      ]
    };

    const bioDemoSubject: Subject = {
      name: "Biology",
      completionPct: 35,
      chapters: [
        {
          name: "Cell Structure",
          isExpanded: true,
          topics: [
            { name: "Cell Wall", status: "Practiced", accuracy: 80, questionsAttempted: 60 },
            { name: "Nucleus", status: "In Progress", accuracy: 50, questionsAttempted: 25 },
          ]
        },
        {
          name: "Genetics & Evolution",
          isExpanded: false,
          topics: [
            { name: "Mendelian Genetics", status: "Practiced", accuracy: 85, questionsAttempted: 55 },
            { name: "Molecular Basis of Inheritance", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          ]
        }
      ]
    };

    const mathZeroSubject: Subject = {
      name: "Mathematics",
      completionPct: 0,
      chapters: [
        {
          name: "Calculus",
          isExpanded: true,
          topics: [
            { name: "Limits", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
            { name: "Derivatives", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
            { name: "Integrals", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          ]
        },
        {
          name: "Coordinate Geometry",
          isExpanded: false,
          topics: [
            { name: "Straight Lines", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
            { name: "Circles", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          ]
        }
      ]
    };

    const bioZeroSubject: Subject = {
      name: "Biology",
      completionPct: 0,
      chapters: [
        {
          name: "Cell Structure",
          isExpanded: true,
          topics: [
            { name: "Cell Wall", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
            { name: "Nucleus", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          ]
        },
        {
          name: "Genetics & Evolution",
          isExpanded: false,
          topics: [
            { name: "Mendelian Genetics", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
            { name: "Molecular Basis of Inheritance", status: "Not Started", accuracy: 0, questionsAttempted: 0 },
          ]
        }
      ]
    };

    const base = isDemo ? [...DEMO_SUBJECTS] : [...ZERO_SUBJECTS];
    
    if (isJeeNeet) {
      // 4 Subjects for JEE + NEET: Physics, Chemistry, Mathematics, Biology
      base.push(isDemo ? mathDemoSubject : mathZeroSubject);
      base.push(isDemo ? bioDemoSubject : bioZeroSubject);
    } else if (isNeet) {
      base.push(isDemo ? bioDemoSubject : bioZeroSubject);
    } else {
      base.push(isDemo ? mathDemoSubject : mathZeroSubject);
    }
    
    setSubjects(base);
  }, [isDemo, user?.target_exam]);

  const toggleChapter = (subjectIndex: number, chapterIndex: number) => {
    const newSubjects = [...subjects]
    newSubjects[subjectIndex].chapters[chapterIndex].isExpanded = !newSubjects[subjectIndex].chapters[chapterIndex].isExpanded
    setSubjects(newSubjects)
  }

  return (
    <PremiumGate featureKey="chapter-wise-progress-tracking">
      <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
          <div>
          <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
            <span className="p-2.5 rounded-xl bg-yellow-50 dark:bg-[var(--cyan-ai-10)] border border-yellow-300/60 dark:border-[var(--cyan-ai-20)]">
              <BarChart3 className="text-yellow-600 dark:text-[var(--cyan-ai)]" size={28} />
            </span>
            Syllabus Tracker
          </h1>
          <p className="text-muted-foreground text-base font-medium max-w-2xl pl-1">
            Track your syllabus coverage and mastery per chapter to ensure no gaps.
          </p>
        </div>
      </div>

      <div className={`grid grid-cols-1 sm:grid-cols-2 ${subjects.length >= 4 ? 'lg:grid-cols-4' : 'md:grid-cols-3'} gap-6 mb-8 animate-section animate-section-2`}>
        {subjects.map((sub, i) => (
          <Card key={i} className="border-border shadow-sm">
            <CardContent className="p-6 text-center">
              <h3 className="font-bold text-lg mb-2">{sub.name}</h3>
              <div className="text-3xl font-black text-[var(--cyan-ai)] mb-3">{sub.completionPct}%</div>
              <div className="h-2 w-full bg-secondary rounded-full overflow-hidden">
                <div className="h-full bg-[var(--cyan-ai)]" style={{ width: `${sub.completionPct}%` }}></div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="space-y-6 animate-section animate-section-3">
        {subjects.map((subject, subIndex) => (
          <Card key={subIndex} className="border-border shadow-sm overflow-hidden">
            <CardHeader className="bg-secondary/30 pb-4 border-b border-border">
              <CardTitle className="text-xl">{subject.name} Syllabus</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <div className="divide-y divide-border">
                {subject.chapters.map((chapter, chapIndex) => (
                  <div key={chapIndex} className="flex flex-col">
                    <button 
                      onClick={() => toggleChapter(subIndex, chapIndex)}
                      className="flex items-center justify-between p-4 hover:bg-secondary/20 transition-colors text-left"
                    >
                      <div className="flex items-center gap-3">
                        {chapter.isExpanded ? <ChevronDown size={18} className="text-muted-foreground" /> : <ChevronRight size={18} className="text-muted-foreground" />}
                        <span className="font-bold">{chapter.name}</span>
                      </div>
                      <div className="text-xs font-medium bg-secondary px-3 py-1 rounded-full">
                        {chapter.topics.length} Topics
                      </div>
                    </button>
                    
                    {chapter.isExpanded && (
                      <div className="bg-background px-6 pb-4 pt-1 space-y-2">
                        <div className="flex justify-between items-center text-xs font-bold text-muted-foreground px-2 py-2">
                          <span className="w-1/2">TOPIC</span>
                          <span className="w-1/4 text-center">ACCURACY</span>
                          <span className="w-1/4 text-right">QUESTIONS</span>
                        </div>
                        {chapter.topics.map((topic, topIndex) => (
                          <div key={topIndex} className="flex justify-between items-center bg-secondary/10 p-3 rounded-lg border border-border/50">
                            <div className="w-1/2 flex items-center gap-3">
                              {getStatusIcon(topic.status)}
                              <div>
                                <p className="font-medium text-sm">{topic.name}</p>
                                <p className="text-[10px] uppercase tracking-wider text-muted-foreground">{topic.status}</p>
                              </div>
                            </div>
                            <div className="w-1/4 text-center">
                              {topic.accuracy > 0 ? (
                                <span className={`font-mono text-sm font-bold ${topic.accuracy > 80 ? 'text-emerald-500' : topic.accuracy > 60 ? 'text-amber-500' : 'text-red-500'}`}>
                                  {topic.accuracy}%
                                </span>
                              ) : <span className="text-muted-foreground text-sm">-</span>}
                            </div>
                            <div className="w-1/4 text-right">
                              <span className="font-mono text-sm">{topic.questionsAttempted > 0 ? topic.questionsAttempted : '-'}</span>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
    </PremiumGate>
  )
}