"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 { User, Award, BookOpen, Trophy, Star } from "lucide-react"
import Link from "next/link"

export default function ProfilePage() {
  const [activeTab, setActiveTab] = useState("profile")

  // Mock user data
  const userData = {
    name: "Alex Johnson",
    level: 5,
    xp: 2450,
    maxXp: 3000,
    rank: "Advanced",
    achievements: 8,
    coursesCompleted: 12,
    totalStudyTime: "124h"
  }

  const stats = [
    { label: "Level", value: userData.level, icon: Star },
    { label: "XP", value: `${userData.xp}/${userData.maxXp}`, icon: Trophy },
    { label: "Rank", value: userData.rank, icon: Award }
  ]

  const achievements = [
    { title: "First Steps", description: "Complete your first course", unlocked: true },
    { title: "Quick Learner", description: "Complete a course in under 24h", unlocked: true },
    { title: "Dedication", description: "Study 7 days in a row", unlocked: true },
    { title: "Master", description: "Complete 10 courses", unlocked: true },
    { title: "Expert", description: "Reach level 5", unlocked: true },
    { title: "Marathon", description: "Study for 100 hours", unlocked: true },
    { title: "Perfectionist", description: "Score 100% on 5 tests", unlocked: false },
    { title: "Legend", description: "Reach level 10", 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">
        <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>
              <Link href="/home/progress">
                <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"
                >
                  Progress
                </button>
              </Link>
              <button
                onClick={() => setActiveTab("profile")}
                className="text-sm font-bold tracking-[0.2em] transition-all duration-200 font-mono uppercase text-cyan-400"
              >
                Profile
              </button>
              <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-6xl">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* User Profile Card */}
          <Card className="lg:col-span-1 bg-[#0d1117] border-2 border-cyan-500/30 p-6">
            <div className="text-center">
              {/* Avatar */}
              <div className="w-32 h-32 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-full flex items-center justify-center mx-auto mb-4 border-4 border-cyan-500/30">
                <User className="w-16 h-16 text-cyan-400" />
              </div>

              {/* User Info */}
              <h2 className="text-2xl font-bold text-cyan-400 font-mono mb-1">
                {userData.name}
              </h2>
              <p className="text-cyan-400/60 font-mono text-sm mb-6">
                {userData.rank} • Level {userData.level}
              </p>

              {/* XP Progress */}
              <div className="mb-6">
                <div className="flex justify-between items-center mb-2">
                  <span className="text-xs font-mono text-cyan-400/60">XP Progress</span>
                  <span className="text-xs font-mono text-cyan-400">
                    {userData.xp}/{userData.maxXp}
                  </span>
                </div>
                <Progress 
                  value={(userData.xp / userData.maxXp) * 100} 
                  className="h-3 bg-[#0a0e1a]"
                />
              </div>

              {/* Quick Stats */}
              <div className="grid grid-cols-2 gap-4 mb-6">
                <div className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-3">
                  <BookOpen className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
                  <div className="text-xl font-bold text-cyan-400 font-mono">
                    {userData.coursesCompleted}
                  </div>
                  <div className="text-xs text-cyan-400/60 font-mono">Courses</div>
                </div>
                <div className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-3">
                  <Award className="w-5 h-5 text-cyan-400 mx-auto mb-1" />
                  <div className="text-xl font-bold text-cyan-400 font-mono">
                    {userData.achievements}
                  </div>
                  <div className="text-xs text-cyan-400/60 font-mono">Badges</div>
                </div>
              </div>

              <Button 
                className="w-full bg-cyan-500 hover:bg-cyan-400 text-black font-mono font-bold"
              >
                EDIT PROFILE
              </Button>
            </div>
          </Card>

          {/* Stats and Achievements */}
          <div className="lg:col-span-2 space-y-6">
            {/* Personal Progress Card */}
            <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">
                Personal progress
              </h3>
              <div className="grid grid-cols-3 gap-4">
                {stats.map((stat, index) => {
                  const Icon = stat.icon
                  return (
                    <div 
                      key={index}
                      className="bg-[#0a0e1a] border border-cyan-500/20 rounded-lg p-4 text-center"
                    >
                      <Icon className="w-6 h-6 text-cyan-400 mx-auto mb-2" />
                      <div className="text-2xl font-bold text-cyan-400 font-mono mb-1">
                        {stat.value}
                      </div>
                      <div className="text-xs text-cyan-400/60 font-mono">
                        {stat.label}
                      </div>
                    </div>
                  )
                })}
              </div>
            </Card>

            {/* Achievements Card */}
            <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">
                Achievements
              </h3>
              <div className="grid grid-cols-2 gap-3">
                {achievements.map((achievement, index) => (
                  <Card
                    key={index}
                    className={`p-4 transition-all ${
                      achievement.unlocked
                        ? 'bg-cyan-500/10 border-cyan-500/40 hover:border-cyan-500/60'
                        : 'bg-[#0a0e1a] border-cyan-500/10 opacity-40'
                    }`}
                  >
                    <div className="flex items-start gap-3">
                      <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
                        achievement.unlocked
                          ? 'bg-cyan-500/20'
                          : 'bg-cyan-500/5'
                      }`}>
                        <Trophy className={`w-5 h-5 ${
                          achievement.unlocked
                            ? 'text-cyan-400'
                            : 'text-cyan-400/30'
                        }`} />
                      </div>
                      <div className="flex-1 min-w-0">
                        <h4 className={`font-bold font-mono text-sm mb-1 ${
                          achievement.unlocked
                            ? 'text-cyan-400'
                            : 'text-cyan-400/30'
                        }`}>
                          {achievement.title}
                        </h4>
                        <p className="text-xs text-cyan-400/50 font-mono line-clamp-2">
                          {achievement.description}
                        </p>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>
            </Card>
          </div>
        </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>
  )
}