import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Link } from "react-router-dom";
import {
  ArrowRight,
  BookOpenCheck,
  Music,
  Sparkles,
  Target,
  Waves,
  Zap,
  Layers,
  CheckCircle,
} from "lucide-react";

interface CurriculumModule {
  id: string;
  title: string;
  description: string;
  level: "foundation" | "builder" | "advanced";
  duration: string;
  focus: string[];
  lessons: {
    title: string;
    summary: string;
    status: "coming_soon" | "draft" | "live";
  }[];
}

const curriculumModules: CurriculumModule[] = [
  {
    id: "synthwave-foundations",
    title: "Synthwave Foundations",
    description:
      "Master the core sound design and production techniques that define AeThex audio.",
    level: "foundation",
    duration: "4 hrs",
    focus: ["Synthwave aesthetics", "Synthesis basics", "Drum programming"],
    lessons: [
      {
        title: "The Synthwave Sound: History & Vibes",
        summary:
          "Understand the '80s-inspired, retro-futuristic sound that defines Ethos and AeThex.",
        status: "coming_soon",
      },
      {
        title: "DAW Setup & Workflow",
        summary:
          "Configure your digital audio workstation (Ableton, FL Studio, Logic) for Ethos production.",
        status: "coming_soon",
      },
      {
        title: "Synth Basics: Oscillators & Filters",
        summary:
          "Learn subtractive synthesis to create classic synthwave leads and pads.",
        status: "coming_soon",
      },
      {
        title: "Drum Programming in Synthwave",
        summary:
          "Program punchy 808s, snares, and hi-hats that sit in the mix.",
        status: "coming_soon",
      },
      {
        title: "Your First Synthwave Track",
        summary:
          "Build a 16-bar synthwave loop from scratch. This is your capstone.",
        status: "coming_soon",
      },
    ],
  },
  {
    id: "game-audio-sfx",
    title: "Game Audio & SFX Design",
    description:
      "Create high-quality sound effects and interactive audio for GameForge projects.",
    level: "builder",
    duration: "5 hrs",
    focus: [
      "Sound effects design",
      "Interactive audio",
      "Spatial audio",
      "Game audio optimization",
    ],
    lessons: [
      {
        title: "SFX Categories for Games",
        summary:
          "Master UI clicks, impact hits, ambience layers, and foley for game interactions.",
        status: "coming_soon",
      },
      {
        title: "Layering & Processing Techniques",
        summary:
          "Learn compression, EQ, reverb, and delay to polish SFX and make them punchy.",
        status: "coming_soon",
      },
      {
        title: "Procedural Audio with SFX Tools",
        summary:
          "Use synthesizers and samplers to generate infinite variations of sounds.",
        status: "coming_soon",
      },
      {
        title: "Spatial Audio & 3D Sound Panning",
        summary: "Position sounds in 3D space for immersive game environments.",
        status: "coming_soon",
      },
      {
        title: "Audio Implementation in Game Engines",
        summary:
          "Integrate your SFX into Unity, Unreal, and Godot with proper metadata.",
        status: "coming_soon",
      },
      {
        title: "Capstone: Design an SFX Pack",
        summary:
          "Create 12 high-quality SFX (UI, impact, ambience) ready for a game.",
        status: "coming_soon",
      },
    ],
  },
  {
    id: "composition-scoring",
    title: "Composition & Scoring",
    description:
      "Compose original music and scores for games, films, and commercial projects.",
    level: "advanced",
    duration: "6 hrs",
    focus: [
      "Music theory",
      "Melody & harmony",
      "Orchestration",
      "Emotional pacing",
      "Licensing-ready delivery",
    ],
    lessons: [
      {
        title: "Music Theory Essentials",
        summary:
          "Understand chords, progressions, and scales. Apply them to synthwave.",
        status: "coming_soon",
      },
      {
        title: "Writing Memorable Melodies",
        summary:
          "Craft hooks and themes that stick with players and audiences.",
        status: "coming_soon",
      },
      {
        title: "Arranging & Orchestration",
        summary:
          "Layer synths, basses, drums, and strings to create depth and emotion.",
        status: "coming_soon",
      },
      {
        title: "Adaptive Music for Games",
        summary: "Create stems and variations that respond to gameplay states.",
        status: "coming_soon",
      },
      {
        title: "Mastering & Final Delivery",
        summary:
          "Polish your track for streaming, games, and commercial licensing.",
        status: "coming_soon",
      },
      {
        title: "Capstone: Compose a 2-Minute Original Score",
        summary:
          "Write, arrange, and master a complete track for a game or film scenario.",
        status: "coming_soon",
      },
    ],
  },
  {
    id: "licensing-monetization",
    title: "Licensing & Monetization",
    description:
      "Understand how to license your music and build a sustainable income as an Ethos artist.",
    level: "advanced",
    duration: "3 hrs",
    focus: [
      "Ecosystem licensing",
      "Commercial contracts",
      "Rights management",
      "Income streams",
    ],
    lessons: [
      {
        title: "The Ethos Ecosystem License",
        summary:
          "Grant free use of your tracks for non-commercial AeThex projects.",
        status: "coming_soon",
      },
      {
        title: "Commercial Licensing Basics",
        summary:
          "When a CORP client wants your track, how to negotiate and sign a contract.",
        status: "coming_soon",
      },
      {
        title: "Rights Management & Royalties",
        summary:
          "Understand PROs, sync rights, and how to track your music usage.",
        status: "coming_soon",
      },
      {
        title: "Building Your Artist Brand",
        summary:
          "Create a portfolio, set your rates, and market yourself on NEXUS.",
        status: "coming_soon",
      },
      {
        title: "Multi-Platform Distribution",
        summary:
          "Sell your music on Spotify, Bandcamp, and streaming platforms while building your Ethos presence.",
        status: "coming_soon",
      },
    ],
  },
];

export default function DocsCurriculumEthos() {
  const curriculumStats = [
    { label: "Total modules", value: "4", icon: Layers },
    { label: "Lessons (planned)", value: "20+", icon: BookOpenCheck },
    { label: "Certifications", value: "2", icon: CheckCircle },
  ];

  const highlights = [
    {
      title: "Synthwave-focused",
      description:
        "All lessons aligned to AeThex sound and the '80s aesthetic.",
      icon: Music,
    },
    {
      title: "Project-based",
      description:
        "Each module ends with a capstone track or asset pack you can showcase.",
      icon: Target,
    },
    {
      title: "Industry-ready",
      description:
        "Learn production, mixing, mastering, and licensing like a professional.",
      icon: Sparkles,
    },
  ];

  return (
    <div className="space-y-8">
      {/* Hero Section */}
      <section className="relative overflow-hidden rounded-3xl border border-pink-500/40 bg-gradient-to-br from-pink-500/10 to-purple-500/10 p-8">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(236,72,153,0.2),transparent_60%)]" />
        <div className="relative z-10 flex flex-col gap-6">
          <div className="flex flex-col gap-3">
            <Badge className="w-fit bg-gradient-to-r from-pink-600 to-purple-600 text-white">
              Ethos Guild Curriculum
            </Badge>
            <h1 className="text-3xl font-semibold text-white sm:text-4xl">
              Master music production for the sound of AeThex
            </h1>
            <p className="max-w-3xl text-base text-gray-200 sm:text-lg">
              Learn synthwave, game audio, composition, and licensing from the
              ground up. Build your portfolio, join the Ethos Guild, and get
              your music into real games and commercial projects.
            </p>
          </div>
          <div className="grid gap-4 sm:grid-cols-3">
            {curriculumStats.map((stat) => {
              const Icon = stat.icon;
              return (
                <Card
                  key={stat.label}
                  className="border-pink-500/30 bg-black/50 backdrop-blur"
                >
                  <CardHeader className="flex flex-row items-center gap-3 pb-2">
                    <span className="rounded-full bg-pink-500/10 p-2 text-pink-300">
                      <Icon className="h-5 w-5" />
                    </span>
                    <CardTitle className="text-white text-lg">
                      {stat.label}
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="pt-0 text-2xl font-semibold text-pink-400">
                    {stat.value}
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* Curriculum Roadmap */}
      <section className="grid gap-6 lg:grid-cols-[minmax(0,2.2fr)_minmax(0,1fr)]">
        <Card className="border-pink-500/30 bg-black/50 backdrop-blur">
          <CardHeader className="space-y-4">
            <CardTitle className="flex items-center gap-3 text-2xl text-white">
              <Waves className="h-6 w-6 text-pink-400" /> Curriculum Roadmap
            </CardTitle>
            <CardDescription className="text-gray-300">
              Four progressive modules from foundational synthwave to advanced
              composition and licensing. Content coming soon—led by the
              community under AeThex Foundation.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <Accordion type="single" collapsible className="space-y-3">
              {curriculumModules.map((module) => (
                <AccordionItem
                  key={module.id}
                  value={module.id}
                  className="overflow-hidden rounded-2xl border border-pink-500/20 bg-black/70"
                >
                  <AccordionTrigger className="px-5 py-4 text-left hover:no-underline data-[state=open]:bg-pink-500/10">
                    <div className="flex w-full flex-col gap-2 text-left">
                      <div className="flex flex-wrap items-center gap-2">
                        <Badge
                          variant="outline"
                          className={
                            module.level === "foundation"
                              ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-200"
                              : module.level === "builder"
                                ? "border-sky-500/40 bg-sky-500/10 text-sky-200"
                                : "border-purple-500/40 bg-purple-500/10 text-purple-200"
                          }
                        >
                          {module.level === "foundation"
                            ? "Foundation"
                            : module.level === "builder"
                              ? "Builder"
                              : "Advanced"}
                        </Badge>
                        <Badge
                          variant="outline"
                          className="border-pink-500/40 bg-pink-500/10 text-pink-300"
                        >
                          {module.duration}
                        </Badge>
                      </div>
                      <div>
                        <h3 className="text-lg font-semibold text-white sm:text-xl">
                          {module.title}
                        </h3>
                        <p className="text-sm text-gray-300">
                          {module.description}
                        </p>
                      </div>
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="px-5 pb-6 pt-2">
                    <div className="space-y-4">
                      <div>
                        <h4 className="text-sm font-semibold uppercase tracking-wide text-pink-300">
                          Learning Focus
                        </h4>
                        <div className="mt-2 flex flex-wrap gap-2">
                          {module.focus.map((focusItem) => (
                            <Badge
                              key={focusItem}
                              variant="outline"
                              className="border-pink-500/40 bg-pink-500/5 text-xs text-pink-200"
                            >
                              {focusItem}
                            </Badge>
                          ))}
                        </div>
                      </div>
                      <div className="rounded-2xl border border-pink-500/20 bg-black/60 p-4">
                        <h4 className="text-sm font-semibold uppercase tracking-wide text-pink-300">
                          Lesson Sequence
                        </h4>
                        <div className="mt-3 space-y-3">
                          {module.lessons.map((lesson, index) => (
                            <div
                              key={lesson.title}
                              className="rounded-xl border border-pink-500/20 bg-black/80 p-4"
                            >
                              <div className="flex flex-wrap items-center justify-between gap-3">
                                <div>
                                  <p className="text-xs uppercase text-gray-400">
                                    Lesson {index + 1}
                                  </p>
                                  <h5 className="text-base font-semibold text-white">
                                    {lesson.title}
                                  </h5>
                                </div>
                                <Badge
                                  className={
                                    lesson.status === "live"
                                      ? "bg-emerald-600/50 text-emerald-100"
                                      : lesson.status === "draft"
                                        ? "bg-blue-600/50 text-blue-100"
                                        : "bg-gray-600/50 text-gray-100"
                                  }
                                >
                                  {lesson.status === "live"
                                    ? "Live"
                                    : lesson.status === "draft"
                                      ? "In Progress"
                                      : "Coming Soon"}
                                </Badge>
                              </div>
                              <p className="mt-2 text-sm text-gray-300">
                                {lesson.summary}
                              </p>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </CardContent>
        </Card>

        {/* Sidebar: Why This Curriculum */}
        <div className="space-y-6">
          <Card className="border-pink-500/30 bg-black/50 backdrop-blur">
            <CardHeader className="space-y-2">
              <CardTitle className="text-xl text-white">
                Why This Curriculum Works
              </CardTitle>
              <CardDescription className="text-gray-300">
                Structured learning aligned to real-world Ethos production.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {highlights.map((highlight) => {
                const Icon = highlight.icon;
                return (
                  <div
                    key={highlight.title}
                    className="flex items-start gap-3 rounded-2xl border border-pink-500/20 bg-black/70 p-4"
                  >
                    <span className="rounded-lg bg-pink-500/10 p-2 text-pink-300">
                      <Icon className="h-5 w-5" />
                    </span>
                    <div className="space-y-1">
                      <p className="text-sm font-semibold text-white">
                        {highlight.title}
                      </p>
                      <p className="text-sm text-gray-300">
                        {highlight.description}
                      </p>
                    </div>
                  </div>
                );
              })}
            </CardContent>
          </Card>

          <Card className="border-pink-500/30 bg-black/50 backdrop-blur">
            <CardHeader>
              <CardTitle className="text-xl text-white">
                Development Status
              </CardTitle>
              <CardDescription className="text-gray-300">
                Phase 1: Foundation complete. Content coming in Phase 3.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-start gap-3">
                <Zap className="mt-1 h-5 w-5 text-pink-400" />
                <div>
                  <p className="text-sm font-semibold text-white">
                    Database & Structure Ready
                  </p>
                  <p className="text-sm text-gray-400">
                    Ethos tracks table, artist profiles, and licensing
                    agreements are built and tested.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <Music className="mt-1 h-5 w-5 text-purple-400" />
                <div>
                  <p className="text-sm font-semibold text-white">
                    Content Writing (Phase 3)
                  </p>
                  <p className="text-sm text-gray-400">
                    AeThex Foundation community will write and curate all
                    lessons and assignments.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="mt-1 h-5 w-5 text-cyan-400" />
                <div>
                  <p className="text-sm font-semibold text-white">
                    Live Launch Coming
                  </p>
                  <p className="text-sm text-gray-400">
                    Expect first lessons in Q1 2025 as founding artists join.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="border-pink-500/30 bg-gradient-to-br from-pink-500/10 to-purple-500/10">
            <CardHeader>
              <CardTitle className="text-lg text-white">Get Started</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-gray-300 mb-4">
                The curriculum will come to life soon. For now, explore the
                Ethos Guild community group and prepare your setup.
              </p>
              <Button
                asChild
                className="w-full gap-2 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500"
              >
                <Link to="/community/groups/ethos">
                  Join the Guild <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
            </CardContent>
          </Card>
        </div>
      </section>

      <Separator className="border-pink-500/20" />

      {/* CTA Section */}
      <section className="rounded-3xl border border-pink-500/40 bg-gradient-to-r from-pink-500/10 to-purple-500/10 p-8 text-center">
        <h2 className="text-2xl font-semibold text-white">
          Ready to Create the Sound of AeThex?
        </h2>
        <p className="mx-auto mt-3 max-w-2xl text-sm text-gray-300">
          The Ethos Guild is being built right now. Soon you'll be able to
          upload tracks, get feedback from mentors, and list your services on
          the NEXUS marketplace. The community team is writing the curriculum.
        </p>
        <div className="mt-6 flex flex-wrap justify-center gap-3">
          <Button
            asChild
            className="gap-2 bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500"
          >
            <Link to="/community/groups/ethos">
              Join the Ethos Guild <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
          <Button
            asChild
            variant="outline"
            className="gap-2 border-pink-500/60 text-pink-300 hover:bg-pink-500/10"
          >
            <Link to="/nexus">
              Explore NEXUS Marketplace <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>
      </section>
    </div>
  );
}