"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Progress } from "@/components/ui/progress"
import Link from "next/link"
import { CheckCircle2, Circle, Clock } from "lucide-react"

export default function ProgressPage() {
  const [activeTab, setActiveTab] = useState("progress")

  // Mock data
  const courses = [
    { id: 1, name: "React", lessons: 12, completed: 8 },
    { id: 2, name: "TypeScript", lessons: 10, completed: 6 },
    { id: 3, name: "Next.js", lessons: 15, completed: 4 },
    { id: 4, name: "Node.js", lessons: 20, completed: 0 }
  ]

  const assignments = [
    { id: 1, course: "React", name: "Build a Todo App", grade: 95, status: "completed" },
    { id: 2, course: "TypeScript", name: "Type System", grade: 88, status: "completed" },
    { id: 3, course: "Next.js", name: "SSR Project", grade: null, status: "pending" },
    { id: 4, course: "Node.js", name: "REST API", grade: null, status: "not_started" }
  ]

  const weekActivity = [
    { day: "Mon", hours: 2.5 },
    { day: "Tue", hours: 3.2 },
    { day: "Wed", hours: 1.8 },
    { day: "Thu", hours: 4.1 },
    { day: "Fri", hours: 2.9 },
    { day: "Sat", hours: 3.5 },
    { day: "Sun", hours: 1.2 }
  ]

  const maxHours = Math.max(...weekActivity.map(d => d.hours))

  return (
    <div className="min-h-screen bg-[#0a0e1a]">
      {/* Header */}
      <header className="bg-[#0d1117] border-b border-cyan-500/30 sticky top-0 z-50">
        <nav className="container mx-auto px-6 py-4">
          <div className="flex items-center justify-center">
            <div className="flex items-center gap-12">
              <Link href="/home/main">
                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
                  Main
                </button>
              </Link>
              <button
                onClick={() => setActiveTab("progress")}
                className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
              >
                Progress
              </button>
              <Link href="/home/profile">
                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
                  Profile
                </button>
              </Link>
              <Link href="/home/rules">
                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
                  Rules
                </button>
              </Link>
              <Link href="/login">
                <button className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-500/50 hover:text-cyan-400/80">
                  Login
                </button>
              </Link>
            </div>
          </div>
        </nav>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-6 py-8 max-w-7xl">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Left Column - Course Progress */}
          <div className="space-y-6">
            {/* My Courses */}
            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
              <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
                My courses
              </h3>
              <div className="space-y-3">
                {courses.map((course) => {
                  const progress = (course.completed / course.lessons) * 100
                  return (
                    <Card
                      key={course.id}
                      className="bg-[#0a0e1a] border border-cyan-500/20 p-4 hover:border-cyan-500/40 transition-all"
                    >
                      <div className="flex justify-between items-start mb-2">
                        <h4 className="font-bold text-cyan-400 font-mono text-sm">
                          {course.name}
                        </h4>
                        <span className="text-xs text-cyan-400/60 font-mono">
                          {course.completed}/{course.lessons}
                        </span>
                      </div>
                      <Progress value={progress} className="h-2 bg-[#0d1117]" />
                    </Card>
                  )
                })}
              </div>
            </Card>

            {/* My Grades */}
            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
              <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
                My grades
              </h3>
              <div className="space-y-3">
                {assignments.slice(0, 3).map((assignment) => (
                  <Card
                    key={assignment.id}
                    className="bg-[#0a0e1a] border border-cyan-500/20 p-3"
                  >
                    <div className="flex justify-between items-center">
                      <div className="flex-1">
                        <div className="text-sm font-bold text-cyan-400 font-mono mb-1">
                          {assignment.course}
                        </div>
                        <div className="text-xs text-cyan-400/60 font-mono">
                          {assignment.name}
                        </div>
                      </div>
                      {assignment.grade ? (
                        <div className="text-xl font-bold text-cyan-400 font-mono">
                          {assignment.grade}%
                        </div>
                      ) : (
                        <div className="text-xs text-cyan-400/40 font-mono">
                          Pending
                        </div>
                      )}
                    </div>
                  </Card>
                ))}
              </div>
            </Card>

            {/* Mathematics (Separate) */}
            <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
              <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
                Mathematics
              </h3>
              <div className="space-y-3">
                <Card className="bg-[#0a0e1a] border border-cyan-500/20 p-4">
                  <div className="flex justify-between items-start mb-2">
                    <h4 className="font-bold text-cyan-400 font-mono text-sm">
                      Algebra
                    </h4>
                    <span className="text-xs text-cyan-400/60 font-mono">
                      8/10
                    </span>
                  </div>
                  <Progress value={80} className="h-2 bg-[#0d1117]" />
                </Card>
              </div>
            </Card>
          </div>

          {/* Center Column - Assignments Table */}
          <Card className="lg:col-span-2 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
            <h3 className="text-xl font-bold text-cyan-400 font-mono mb-4">
              All Assignments
            </h3>
            
            {/* Table */}
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className="border-b border-cyan-500/20">
                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
                      #
                    </th>
                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
                      Course
                    </th>
                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
                      Assignment
                    </th>
                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
                      Grade
                    </th>
                    <th className="text-left py-3 px-4 text-xs font-mono text-cyan-400/60 uppercase">
                      Status
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {assignments.map((assignment, index) => (
                    <tr
                      key={assignment.id}
                      className="border-b border-cyan-500/10 hover:bg-cyan-500/5 transition-colors"
                    >
                      <td className="py-3 px-4 text-sm font-mono text-cyan-400">
                        {index + 1}
                      </td>
                      <td className="py-3 px-4 text-sm font-mono text-cyan-400">
                        {assignment.course}
                      </td>
                      <td className="py-3 px-4 text-sm font-mono text-cyan-400">
                        {assignment.name}
                      </td>
                      <td className="py-3 px-4 text-sm font-mono text-cyan-400">
                        {assignment.grade ? `${assignment.grade}%` : '-'}
                      </td>
                      <td className="py-3 px-4">
                        <div className="flex items-center gap-2">
                          {assignment.status === 'completed' ? (
                            <>
                              <CheckCircle2 className="w-4 h-4 text-green-400" />
                              <span className="text-xs font-mono text-green-400">
                                Completed
                              </span>
                            </>
                          ) : assignment.status === 'pending' ? (
                            <>
                              <Clock className="w-4 h-4 text-yellow-400" />
                              <span className="text-xs font-mono text-yellow-400">
                                Pending
                              </span>
                            </>
                          ) : (
                            <>
                              <Circle className="w-4 h-4 text-cyan-400/30" />
                              <span className="text-xs font-mono text-cyan-400/30">
                                Not Started
                              </span>
                            </>
                          )}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Weekly Activity Chart */}
            <div className="mt-8">
              <h4 className="text-lg font-bold text-cyan-400 font-mono mb-4">
                Weekly Activity
              </h4>
              <div className="flex items-end justify-between gap-2 h-48">
                {weekActivity.map((day) => (
                  <div key={day.day} className="flex-1 flex flex-col items-center gap-2">
                    <div className="w-full relative flex-1">
                      <div 
                        className="absolute bottom-0 w-full bg-gradient-to-t from-cyan-500 to-cyan-400 rounded-t-lg transition-all hover:from-cyan-400 hover:to-cyan-300"
                        style={{ height: `${(day.hours / maxHours) * 100}%` }}
                      />
                    </div>
                    <div className="text-xs font-mono text-cyan-400/60">
                      {day.day}
                    </div>
                    <div className="text-xs font-mono text-cyan-400 font-bold">
                      {day.hours}h
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Card>
        </div>
      </main>

      {/* Background grid */}
      <div 
        className="fixed inset-0 pointer-events-none -z-10"
        style={{
          backgroundImage: `
            linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px)
          `,
          backgroundSize: '50px 50px'
        }}
      />
    </div>
  )
}