"use client";

import { useState } from "react";
import Link from "next/link";
import Navbar from "@/components/Navbar";

const COURSES = [
  {
    id: "opsec-foundations",
    title: "OPSEC Foundations",
    subtitle: "Zero-to-operational in 6 modules",
    icon: "🛡️",
    level: "Beginner",
    modules: 6,
    cost: 0,
    free: true,
    topics: ["Threat modelling", "Device isolation", "Handle hygiene", "Network compartmentalisation"],
  },
  {
    id: "tor-deep-dive",
    title: "Tor Architecture",
    subtitle: "How the onion network actually works",
    icon: "🌐",
    level: "Intermediate",
    modules: 8,
    cost: 15,
    free: false,
    topics: ["Circuit construction", "Hidden service descriptor flow", "Guard node selection", "Fingerprinting resistance"],
  },
  {
    id: "pgp-mastery",
    title: "PGP & Key Hygiene",
    subtitle: "Encrypt everything, trust nobody",
    icon: "🔐",
    level: "Intermediate",
    modules: 5,
    cost: 12,
    free: false,
    topics: ["Ed25519 vs RSA", "Web of trust vs TOFU", "Subkey architecture", "Revocation ceremonies"],
  },
  {
    id: "darknet-recon",
    title: "Darknet OSINT",
    subtitle: "Gather intelligence without leaving traces",
    icon: "🔍",
    level: "Advanced",
    modules: 10,
    cost: 25,
    free: false,
    topics: ["Passive recon techniques", "Link graph analysis", "Temporal correlation", "Attribution avoidance"],
  },
  {
    id: "btc-privacy",
    title: "Bitcoin Privacy",
    subtitle: "Spend and receive without a trail",
    icon: "₿",
    level: "Intermediate",
    modules: 7,
    cost: 20,
    free: false,
    topics: ["UTXO management", "CoinJoin & PayJoin", "Lightning privacy tradeoffs", "Blockchain analysis evasion"],
  },
  {
    id: "hidden-service-ops",
    title: "Hidden Service Operations",
    subtitle: "Deploy and harden a Tor v3 site",
    icon: "🧅",
    level: "Advanced",
    modules: 9,
    cost: 30,
    free: false,
    topics: ["Vanity address mining", "nginx hardening", "DoS mitigation", "Key backup & recovery", "Systemd hardening"],
  },
];

const LEVEL_COLORS: Record<string, string> = {
  Beginner: "text-neon-green border-neon-green/30 bg-neon-green/10",
  Intermediate: "text-neon-cyan border-neon-cyan/30 bg-neon-cyan/10",
  Advanced: "text-neon-purple border-neon-purple/30 bg-neon-purple/10",
};

export default function AcademyPage() {
  const [open, setOpen] = useState<string | null>(null);

  return (
    <>
      <Navbar />
      <main className="min-h-screen bg-[#0a0a0a] pt-24 pb-20">
        {/* Header */}
        <section className="container mx-auto max-w-6xl px-4 mb-14 text-center">
          <p className="mb-3 font-mono text-[10px] uppercase tracking-[0.35em] text-neon-cyan/70">cipher academy · operational security</p>
          <h1 className="font-orbitron text-5xl font-bold md:text-6xl">
            CIPHER<span className="text-neon-cyan"> ACADEMY</span>
          </h1>
          <p className="mx-auto mt-5 max-w-xl text-lg text-foreground/60">
            Structured OPSEC and darknet operations curriculum. Free foundation courses; advanced modules unlocked with VOID credits.
          </p>
        </section>

        {/* Stats */}
        <section className="container mx-auto max-w-6xl px-4 mb-12">
          <div className="flex flex-wrap justify-center gap-8 text-center">
            {[
              { label: "Courses", value: COURSES.length },
              { label: "Free modules", value: "6" },
              { label: "Total modules", value: COURSES.reduce((a, c) => a + c.modules, 0) },
              { label: "Skill levels", value: "3" },
            ].map((s) => (
              <div key={s.label}>
                <p className="font-orbitron text-3xl font-black text-neon-cyan">{s.value}</p>
                <p className="mt-1 text-xs text-foreground/50 uppercase tracking-widest">{s.label}</p>
              </div>
            ))}
          </div>
        </section>

        {/* Course grid */}
        <section className="container mx-auto max-w-6xl px-4">
          <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
            {COURSES.map((course) => (
              <div
                key={course.id}
                className="rounded-xl border border-zinc-700/40 bg-black/40 p-5 flex flex-col hover:border-zinc-500 transition"
              >
                <div className="flex items-start justify-between gap-2 mb-3">
                  <span className="text-3xl">{course.icon}</span>
                  <span className={`rounded-full border px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider ${LEVEL_COLORS[course.level]}`}>
                    {course.level}
                  </span>
                </div>
                <h3 className="font-orbitron text-base font-bold">{course.title}</h3>
                <p className="mt-1 text-xs text-foreground/50">{course.subtitle}</p>
                <p className="mt-1 text-xs text-foreground/40">{course.modules} modules</p>

                <ul className="mt-4 flex-1 space-y-1">
                  {course.topics.map((t) => (
                    <li key={t} className="text-xs text-foreground/60 flex gap-2">
                      <span className="text-neon-cyan/60">›</span> {t}
                    </li>
                  ))}
                </ul>

                <div className="mt-5 flex items-center justify-between">
                  {course.free ? (
                    <span className="rounded-full bg-neon-green/15 border border-neon-green/30 px-3 py-1 text-xs font-bold text-neon-green">
                      FREE
                    </span>
                  ) : (
                    <span className="font-mono text-sm font-bold text-neon-purple">✦ {course.cost} VOID</span>
                  )}
                  <button
                    onClick={() => setOpen(open === course.id ? null : course.id)}
                    className="rounded-lg border border-zinc-600 bg-white/5 px-4 py-1.5 text-xs hover:border-zinc-400 transition"
                  >
                    {open === course.id ? "Collapse" : "Preview"}
                  </button>
                </div>

                {open === course.id && (
                  <div className="mt-4 rounded-lg border border-zinc-700/40 bg-black/30 p-4">
                    <p className="text-xs text-foreground/60 mb-3">Module breakdown coming soon. Sign in and unlock to access full curriculum.</p>
                    <Link
                      href={course.free ? "/sign-up" : "/account/add-funds"}
                      className="block text-center rounded-lg bg-neon-cyan/15 border border-neon-cyan/30 px-4 py-2 text-xs font-bold text-neon-cyan hover:bg-neon-cyan/25"
                    >
                      {course.free ? "Start free →" : "Unlock with VOID credits →"}
                    </Link>
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section className="container mx-auto max-w-2xl px-4 mt-20 text-center">
          <div className="rounded-2xl border border-neon-purple/20 bg-neon-purple/5 p-10">
            <h2 className="font-orbitron text-2xl font-bold mb-3">Start with the free course</h2>
            <p className="text-foreground/60 mb-6">OPSEC Foundations is available to all registered users at no cost. No excuses.</p>
            <div className="flex flex-wrap justify-center gap-3">
              <Link href="/sign-up" className="rounded-full border border-neon-cyan/40 bg-neon-cyan/10 px-6 py-2.5 text-sm font-bold text-neon-cyan hover:bg-neon-cyan/20">
                Register →
              </Link>
              <Link href="/account/add-funds" className="rounded-full bg-gradient-to-r from-neon-cyan to-neon-purple px-6 py-2.5 text-sm font-bold text-background hover:opacity-90">
                + VOID Credits
              </Link>
            </div>
          </div>
        </section>
      </main>
    </>
  );
}