"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { 
  BookOpen, 
  Trophy, 
  Target, 
  TrendingUp,
  Clock,
  Award,
  CheckCircle2,
  PlayCircle
} from "lucide-react"

export default function Home() {
  const [activeTab, setActiveTab] = useState("main")

  // Mock data для демонстрации
  const stats = {
    coursesInProgress: 3,
    completedCourses: 12,
    totalPoints: 2450,
    rank: "Advanced"
  }

  const recentCourses = [
    { id: 1, title: "Advanced React Patterns", progress: 65, time: "2h 30m left" },
    { id: 2, title: "System Design", progress: 40, time: "5h 15m left" },
    { id: 3, title: "TypeScript Deep Dive", progress: 85, time: "45m left" }
  ]

  const achievements = [
    { id: 1, title: "Fast Learner", icon: Trophy, unlocked: true },
    { id: 2, title: "Course Master", icon: Award, unlocked: true },
    { id: 3, title: "Consistency King", icon: Target, unlocked: false }
  ]

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

      {/* Main Content */}
      <main className="container mx-auto px-6 py-8">
        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all group">
            <div className="flex items-center justify-between mb-2">
              <BookOpen className="w-8 h-8 text-cyan-400 group-hover:scale-110 transition-transform" />
              <span className="text-xs font-mono text-cyan-400/50">IN PROGRESS</span>
            </div>
            <div className="text-3xl font-bold text-cyan-400 font-mono">
              {stats.coursesInProgress}
            </div>
            <p className="text-sm text-cyan-400/60 font-mono mt-1">Active Courses</p>
          </Card>

          <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all group">
            <div className="flex items-center justify-between mb-2">
              <CheckCircle2 className="w-8 h-8 text-cyan-400 group-hover:scale-110 transition-transform" />
              <span className="text-xs font-mono text-cyan-400/50">COMPLETED</span>
            </div>
            <div className="text-3xl font-bold text-cyan-400 font-mono">
              {stats.completedCourses}
            </div>
            <p className="text-sm text-cyan-400/60 font-mono mt-1">Finished</p>
          </Card>

          <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all group">
            <div className="flex items-center justify-between mb-2">
              <Trophy className="w-8 h-8 text-cyan-400 group-hover:scale-110 transition-transform" />
              <span className="text-xs font-mono text-cyan-400/50">TOTAL</span>
            </div>
            <div className="text-3xl font-bold text-cyan-400 font-mono">
              {stats.totalPoints}
            </div>
            <p className="text-sm text-cyan-400/60 font-mono mt-1">Points Earned</p>
          </Card>

          <Card className="bg-[#0d1117] border-2 border-cyan-500/20 p-6 hover:border-cyan-500/40 transition-all group">
            <div className="flex items-center justify-between mb-2">
              <TrendingUp className="w-8 h-8 text-cyan-400 group-hover:scale-110 transition-transform" />
              <span className="text-xs font-mono text-cyan-400/50">RANK</span>
            </div>
            <div className="text-3xl font-bold text-cyan-400 font-mono">
              {stats.rank}
            </div>
            <p className="text-sm text-cyan-400/60 font-mono mt-1">Current Level</p>
          </Card>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Continue Learning Section */}
          <Card className="lg:col-span-2 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
            <div className="flex items-center justify-between mb-6">
              <h2 className="text-2xl font-bold text-cyan-400 font-mono">
                Continue Learning
              </h2>
              <Button 
                variant="outline" 
                className="border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10 font-mono text-xs"
              >
                VIEW ALL
              </Button>
            </div>

            <div className="space-y-4">
              {recentCourses.map((course) => (
                <Card 
                  key={course.id}
                  className="bg-[#0a0e1a] border border-cyan-500/20 p-4 hover:border-cyan-500/40 transition-all group cursor-pointer"
                >
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-cyan-400 font-mono mb-1 group-hover:text-cyan-300 transition-colors">
                        {course.title}
                      </h3>
                      <div className="flex items-center gap-2 text-xs text-cyan-400/50 font-mono">
                        <Clock className="w-3 h-3" />
                        {course.time}
                      </div>
                    </div>
                    <Button 
                      size="sm"
                      className="bg-cyan-500 hover:bg-cyan-400 text-black font-mono"
                    >
                      <PlayCircle className="w-4 h-4 mr-1" />
                      RESUME
                    </Button>
                  </div>

                  {/* Progress Bar */}
                  <div className="space-y-2">
                    <div className="flex items-center justify-between text-xs font-mono">
                      <span className="text-cyan-400/60">Progress</span>
                      <span className="text-cyan-400">{course.progress}%</span>
                    </div>
                    <div className="h-2 bg-[#0d1117] rounded-full overflow-hidden">
                      <div 
                        className="h-full bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full transition-all duration-500"
                        style={{ width: `${course.progress}%` }}
                      />
                    </div>
                  </div>
                </Card>
              ))}
            </div>
          </Card>

          {/* Achievements Section */}
          <Card className="bg-[#0d1117] border-2 border-cyan-500/30 p-6">
            <h2 className="text-2xl font-bold text-cyan-400 font-mono mb-6">
              Achievements
            </h2>

            <div className="space-y-4">
              {achievements.map((achievement) => {
                const Icon = achievement.icon
                return (
                  <Card 
                    key={achievement.id}
                    className={`p-4 transition-all ${
                      achievement.unlocked
                        ? 'bg-cyan-500/10 border-cyan-500/40'
                        : 'bg-[#0a0e1a] border-cyan-500/10 opacity-50'
                    }`}
                  >
                    <div className="flex items-center gap-3">
                      <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
                        achievement.unlocked
                          ? 'bg-cyan-500/20'
                          : 'bg-cyan-500/5'
                      }`}>
                        <Icon className={`w-6 h-6 ${
                          achievement.unlocked
                            ? 'text-cyan-400'
                            : 'text-cyan-400/30'
                        }`} />
                      </div>
                      <div className="flex-1">
                        <h3 className={`font-bold font-mono text-sm ${
                          achievement.unlocked
                            ? 'text-cyan-400'
                            : 'text-cyan-400/30'
                        }`}>
                          {achievement.title}
                        </h3>
                        <p className="text-xs text-cyan-400/50 font-mono">
                          {achievement.unlocked ? 'Unlocked' : 'Locked'}
                        </p>
                      </div>
                    </div>
                  </Card>
                )
              })}
            </div>

            <Button 
              className="w-full mt-6 bg-[#0a0e1a] border border-cyan-500/30 text-cyan-400 hover:bg-cyan-500/10 font-mono"
              variant="outline"
            >
              VIEW ALL ACHIEVEMENTS
            </Button>
          </Card>
        </div>
      </main>

      {/* Subtle grid background */}
      <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>
  )
}