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,
  Calculator,
  Compass,
  GraduationCap,
  Layers,
  ListChecks,
  Sparkles,
  Target,
  Timer,
} from "lucide-react";

interface CurriculumLesson {
  title: string;
  summary: string;
  format: "article" | "video" | "interactive" | "assignment";
  path: string;
  duration: string;
}

interface CurriculumModule {
  id: string;
  title: string;
  description: string;
  duration: string;
  level: "foundation" | "builder" | "advanced";
  focus: string[];
  learningGoals: string[];
  lessons: CurriculumLesson[];
  capstone?: {
    title: string;
    summary: string;
    brief: string;
  };
}

const moduleLevelStyles: Record<CurriculumModule["level"], string> = {
  foundation: "bg-emerald-500/10 text-emerald-200 border-emerald-500/40",
  builder: "bg-sky-500/10 text-sky-200 border-sky-500/40",
  advanced: "bg-purple-500/10 text-purple-200 border-purple-500/40",
};

const lessonFormatCopy: Record<CurriculumLesson["format"], string> = {
  article: "Article",
  video: "Video Walkthrough",
  interactive: "Interactive Lab",
  assignment: "Hands-on Assignment",
};

const curriculumModules: CurriculumModule[] = [
  {
    id: "foundations",
    title: "AeThex Foundations",
    description:
      "Establish core mastery of the AeThex platform, from environment setup to shipping your first interactive experience.",
    duration: "2.5 hrs",
    level: "foundation",
    focus: [
      "Workspace onboarding",
      "Project scaffolding",
      "Passport + identity",
    ],
    learningGoals: [
      "Configure a production-ready AeThex project",
      "Understand AeThex Passport, identity, and role models",
      "Publish your first interactive deployment",
    ],
    lessons: [
      {
        title: "Platform Orientation",
        summary:
          "Tour the AeThex workspace, dashboards, and navigation patterns.",
        format: "video",
        path: "/docs/getting-started",
        duration: "20 min",
      },
      {
        title: "Project Blueprint Setup",
        summary:
          "Create a new AeThex project, connect Supabase, and configure environments.",
        format: "article",
        path: "/docs/getting-started#setup-workflow",
        duration: "35 min",
      },
      {
        title: "Passport Fundamentals",
        summary:
          "Implement profiles, achievements, and realm roles using AeThex Passport APIs.",
        format: "interactive",
        path: "/docs/platform#identity-and-passports",
        duration: "40 min",
      },
      {
        title: "Launch Checklist",
        summary:
          "Deploy to Netlify/Vercel and validate observability before inviting users.",
        format: "assignment",
        path: "/docs/platform#deployments",
        duration: "35 min",
      },
    ],
    capstone: {
      title: "Foundations Launch Sprint",
      summary:
        "Ship a small but complete AeThex experience showcasing authentication, feed updates, and deployment.",
      brief:
        "Assemble a two-week plan outlining features, success metrics, and deployment artifacts for stakeholders.",
    },
  },
  {
    id: "builder",
    title: "Product Builder Track",
    description:
      "Design and scale collaborative communities with AeThex real-time tooling, automations, and membership flows.",
    duration: "3 hrs",
    level: "builder",
    focus: ["Community feed", "Workflow automations", "Admin control center"],
    learningGoals: [
      "Compose a modular community feed that reacts to Supabase events",
      "Automate onboarding with roles, achievements, and curriculum progression",
      "Operate with observability dashboards and admin tooling",
    ],
    lessons: [
      {
        title: "Community Signal Architecture",
        summary:
          "Use AeThex feed primitives and Supabase realtime to orchestrate community updates.",
        format: "article",
        path: "/docs/examples#community-system",
        duration: "45 min",
      },
      {
        title: "Automation + Achievements",
        summary:
          "Award achievements, loyalty, and XP with the AeThex achievements API and workflows.",
        format: "interactive",
        path: "/docs/platform#achievements-and-xp",
        duration: "35 min",
      },
      {
        title: "Admin Command Center",
        summary:
          "Extend the AeThex admin panel with custom moderation queues and analytics.",
        format: "video",
        path: "/docs/platform#admin-suite",
        duration: "30 min",
      },
      {
        title: "Signals & Telemetry",
        summary:
          "Instrument logging, error tracking, and telemetry to monitor user health.",
        format: "article",
        path: "/docs/integrations#observability",
        duration: "30 min",
      },
    ],
    capstone: {
      title: "Community Activation Plan",
      summary:
        "Design a 30-day activation playbook tying curriculum progress to community KPIs.",
      brief:
        "Deliver a Notion or Builder CMS doc with milestones, safety checks, and escalation paths.",
    },
  },
  {
    id: "advanced",
    title: "Advanced Ops & Ecosystems",
    description:
      "Engineer large-scale AeThex deployments that blend AI-guided creation, marketplace integrations, and monetization.",
    duration: "3.5 hrs",
    level: "advanced",
    focus: ["AI pipelines", "Marketplace", "Monetization"],
    learningGoals: [
      "Compose AI assistive flows with AeThex Labs tooling",
      "Integrate third-party marketplaces and billing systems",
      "Secure and monitor enterprise-grade deployments",
    ],
    lessons: [
      {
        title: "AI Studio Workflows",
        summary:
          "Orchestrate AI-assisted creation using AeThex Labs pipelines and guardrails.",
        format: "interactive",
        path: "/docs/labs",
        duration: "50 min",
      },
      {
        title: "Marketplace + Billing",
        summary:
          "Connect Neon/Postgres data, Stripe monetization, and Zapier automations.",
        format: "article",
        path: "/docs/integrations#billing-automation",
        duration: "40 min",
      },
      {
        title: "Enterprise Security Patterns",
        summary:
          "Apply RBAC, audit trails, and secret rotation with AeThex security primitives.",
        format: "video",
        path: "/docs/platform#security",
        duration: "35 min",
      },
      {
        title: "Reliability Playbooks",
        summary:
          "Craft on-call runbooks tied to AeThex Status, SLO monitors, and incident response.",
        format: "assignment",
        path: "/docs/status",
        duration: "40 min",
      },
    ],
    capstone: {
      title: "Ecosystem Expansion Brief",
      summary:
        "Design a new revenue program connecting creators, partners, and automation pipelines.",
      brief:
        "Submit a partner enablement checklist, monetization targets, and KPI dashboards in AeThex.",
    },
  },
];

const curriculumHighlights = [
  {
    title: "Structured tracks",
    description: "Modular progression from foundations to advanced operations.",
    icon: Layers,
  },
  {
    title: "Project-based milestones",
    description:
      "Each module culminates in a capstone aligned to AeThex deliverables.",
    icon: Target,
  },
  {
    title: "Built with real data",
    description:
      "Lessons reference live dashboards, Passport identities, and Supabase schemas.",
    icon: Sparkles,
  },
];

const curriculumStats = [
  {
    label: "Total guided time",
    value: "9 hrs",
    icon: Timer,
  },
  {
    label: "Capstone projects",
    value: "3",
    icon: ListChecks,
  },
  {
    label: "Certifications unlocked",
    value: "AeThex Builder, Operator",
    icon: GraduationCap,
  },
];

const supplementalResources = [
  {
    title: "AeThex Playbooks",
    description:
      "Download ready-made GTM, community, and growth playbooks to complement each module.",
    cta: "Browse playbooks",
    href: "/docs/examples#playbooks",
  },
  {
    title: "Live Mentorship Sessions",
    description:
      "Join weekly office hours with AeThex engineers and producers to review your progress.",
    cta: "Reserve a seat",
    href: "/mentorship",
  },
  {
    title: "Certification Exams",
    description:
      "Validate mastery with AeThex Builder and Operator certifications once you finish the track.",
    cta: "View certification guide",
    href: "/docs/platform#certification",
  },
];

export default function DocsCurriculum() {
  return (
    <div className="space-y-8 max-w-5xl">
      <section className="relative overflow-hidden rounded-2xl border border-slate-800/60 bg-slate-900/80 p-6 md:p-8">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(124,58,237,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-purple-600/80 text-white">
              AeThex Curriculum
            </Badge>
            <h1 className="text-2xl font-semibold text-white sm:text-3xl">
              Structured learning paths for builders, operators, and labs teams
            </h1>
            <p className="max-w-2xl text-sm text-slate-200 sm:text-base">
              Progress through sequenced modules that combine documentation,
              interactive labs, and project-based assignments. Graduate with
              deployment-ready AeThex experiences and certification badges.
            </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-slate-800 bg-slate-900/70 shadow-lg backdrop-blur"
                >
                  <CardHeader className="flex flex-row items-center gap-3 pb-2">
                    <span className="rounded-full bg-purple-500/10 p-2 text-purple-200">
                      <Icon className="h-5 w-5" />
                    </span>
                    <CardTitle className="text-slate-100 text-lg">
                      {stat.label}
                    </CardTitle>
                  </CardHeader>
                  <CardContent className="pt-0 text-2xl font-semibold text-white">
                    {stat.value}
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      <section className="grid gap-6 lg:grid-cols-1">
        <Card className="border-slate-800 bg-slate-900/70 shadow-xl backdrop-blur">
          <CardHeader className="space-y-4">
            <CardTitle className="flex items-center gap-3 text-2xl text-white">
              <Compass className="h-6 w-6 text-purple-300" /> Curriculum roadmap
            </CardTitle>
            <CardDescription className="text-slate-300">
              Expand each module to view lessons, formats, and key objectives.
              Every module ends with a capstone milestone that prepares you for
              certification.
            </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-slate-800/60 bg-slate-950/70"
                >
                  <AccordionTrigger className="px-5 py-4 text-left hover:no-underline data-[state=open]:bg-slate-900/70">
                    <div className="flex w-full flex-col gap-2 text-left">
                      <div className="flex flex-wrap items-center gap-2">
                        <Badge
                          variant="outline"
                          className={moduleLevelStyles[module.level]}
                        >
                          {module.level === "foundation"
                            ? "Foundation"
                            : module.level === "builder"
                              ? "Builder"
                              : "Advanced"}
                        </Badge>
                        <Badge
                          variant="outline"
                          className="border-slate-700/60 bg-slate-900/70 text-slate-200"
                        >
                          {module.duration}
                        </Badge>
                      </div>
                      <div>
                        <h3 className="text-lg font-semibold text-white sm:text-xl">
                          {module.title}
                        </h3>
                        <p className="text-sm text-slate-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-slate-200">
                          Learning focus
                        </h4>
                        <div className="mt-2 flex flex-wrap gap-2">
                          {module.focus.map((focusItem) => (
                            <Badge
                              key={focusItem}
                              variant="outline"
                              className="border-slate-700/60 bg-slate-900/60 text-xs text-slate-200"
                            >
                              {focusItem}
                            </Badge>
                          ))}
                        </div>
                      </div>
                      <div className="rounded-2xl border border-slate-800/60 bg-slate-900/60 p-4">
                        <h4 className="text-sm font-semibold uppercase tracking-wide text-slate-200">
                          Lesson sequence
                        </h4>
                        <div className="mt-3 space-y-3">
                          {module.lessons.map((lesson, index) => (
                            <div
                              key={lesson.title}
                              className="rounded-xl border border-slate-800/60 bg-slate-950/80 p-4"
                            >
                              <div className="flex flex-wrap items-center justify-between gap-3">
                                <div>
                                  <p className="text-xs uppercase text-slate-400">
                                    Lesson {index + 1}
                                  </p>
                                  <h5 className="text-base font-semibold text-white">
                                    {lesson.title}
                                  </h5>
                                </div>
                                <div className="flex items-center gap-2 text-xs text-slate-300">
                                  <Badge
                                    variant="outline"
                                    className="border-slate-700/60 bg-slate-900/60 text-xs"
                                  >
                                    {lessonFormatCopy[lesson.format]}
                                  </Badge>
                                  <span>{lesson.duration}</span>
                                </div>
                              </div>
                              <p className="mt-2 text-sm text-slate-300">
                                {lesson.summary}
                              </p>
                              <Button
                                asChild
                                variant="ghost"
                                className="mt-3 h-8 w-fit gap-2 rounded-full border border-slate-800/60 bg-slate-900/50 px-3 text-xs text-slate-200 hover:border-purple-500/50 hover:text-white"
                              >
                                <Link to={lesson.path}>
                                  Review lesson{" "}
                                  <ArrowRight className="h-3.5 w-3.5" />
                                </Link>
                              </Button>
                            </div>
                          ))}
                        </div>
                      </div>
                      <div className="rounded-2xl border border-purple-500/30 bg-purple-500/10 p-4">
                        <h4 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-purple-100">
                          <Sparkles className="h-4 w-4" /> Capstone challenge
                        </h4>
                        {module.capstone ? (
                          <div className="mt-2 space-y-2">
                            <p className="text-base font-semibold text-white">
                              {module.capstone.title}
                            </p>
                            <p className="text-sm text-purple-100/80">
                              {module.capstone.summary}
                            </p>
                            <p className="text-xs text-purple-200/80">
                              {module.capstone.brief}
                            </p>
                          </div>
                        ) : (
                          <p className="text-sm text-purple-100/80">
                            Coming soon — the AeThex team is curating the next
                            advanced mission.
                          </p>
                        )}
                      </div>
                    </div>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </CardContent>
        </Card>

        <div className="space-y-6">
          <Card className="border-slate-800 bg-slate-900/70 shadow-xl">
            <CardHeader className="space-y-2">
              <CardTitle className="text-xl text-white">
                Why this curriculum works
              </CardTitle>
              <CardDescription className="text-slate-300">
                Blending documentation, live labs, and project work keeps teams
                aligned and measurable.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {curriculumHighlights.map((highlight) => {
                const Icon = highlight.icon;
                return (
                  <div
                    key={highlight.title}
                    className="flex items-start gap-3 rounded-2xl border border-slate-800/60 bg-slate-950/70 p-4"
                  >
                    <span className="rounded-lg bg-slate-900/80 p-2 text-purple-200">
                      <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-slate-300">
                        {highlight.description}
                      </p>
                    </div>
                  </div>
                );
              })}
            </CardContent>
          </Card>

          <Card className="border-slate-800 bg-slate-900/70 shadow-xl">
            <CardHeader className="space-y-2">
              <CardTitle className="flex items-center gap-2 text-xl text-white">
                <BookOpenCheck className="h-5 w-5 text-purple-300" />{" "}
                Supplemental resources
              </CardTitle>
              <CardDescription className="text-slate-300">
                Extend the curriculum with live mentorship, playbooks, and
                certification tracks.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              {supplementalResources.map((resource) => (
                <div
                  key={resource.title}
                  className="space-y-2 rounded-2xl border border-slate-800/60 bg-slate-950/70 p-4"
                >
                  <p className="text-sm font-semibold text-white">
                    {resource.title}
                  </p>
                  <p className="text-sm text-slate-300">
                    {resource.description}
                  </p>
                  <Button
                    asChild
                    variant="ghost"
                    className="h-8 w-fit gap-2 rounded-full border border-slate-800/60 bg-slate-900/60 px-3 text-xs text-slate-200 hover:border-purple-500/50 hover:text-white"
                  >
                    <Link to={resource.href}>
                      {resource.cta} <ArrowRight className="h-3.5 w-3.5" />
                    </Link>
                  </Button>
                </div>
              ))}
            </CardContent>
          </Card>

          <Card className="border-slate-800 bg-slate-900/70 shadow-xl">
            <CardHeader>
              <CardTitle className="text-xl text-white">
                Team readiness checklist
              </CardTitle>
              <CardDescription className="text-slate-300">
                Confirm prerequisites before starting the Builder or Advanced
                tracks.
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-start gap-3 rounded-2xl border border-slate-800/60 bg-slate-950/70 p-4">
                <Calculator className="mt-1 h-5 w-5 text-purple-200" />
                <div>
                  <p className="text-sm font-semibold text-white">
                    Account + billing configured
                  </p>
                  <p className="text-sm text-slate-300">
                    Ensure Supabase, billing providers, and environment
                    variables are ready for production load.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3 rounded-2xl border border-slate-800/60 bg-slate-950/70 p-4">
                <Sparkles className="mt-1 h-5 w-5 text-purple-200" />
                <div>
                  <p className="text-sm font-semibold text-white">
                    Core team enrolled
                  </p>
                  <p className="text-sm text-slate-300">
                    Identify product, engineering, and operations owners to
                    steward each module.
                  </p>
                </div>
              </div>
              <div className="flex items-start gap-3 rounded-2xl border border-slate-800/60 bg-slate-950/70 p-4">
                <Layers className="mt-1 h-5 w-5 text-purple-200" />
                <div>
                  <p className="text-sm font-semibold text-white">
                    Backlog aligned to modules
                  </p>
                  <p className="text-sm text-slate-300">
                    Map existing sprints to module milestones so curriculum
                    progress mirrors roadmap delivery.
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <Separator className="border-slate-800/70" />

      <section className="rounded-3xl border border-slate-800/60 bg-slate-900/70 p-8 text-center">
        <h2 className="text-2xl font-semibold text-white">
          Ready to certify your AeThex team?
        </h2>
        <p className="mx-auto mt-3 max-w-2xl text-sm text-slate-300">
          Track your completion inside the AeThex admin panel, then schedule a
          certification review with the AeThex Labs crew. We award badges
          directly to your Passport once requirements are verified.
        </p>
        <div className="mt-6 flex flex-wrap justify-center gap-3">
          <Button
            asChild
            className="gap-2 rounded-full bg-purple-600 text-white hover:bg-purple-500"
          >
            <Link to="/mentorship">
              Join mentorship cohort <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
          <Button
            asChild
            variant="outline"
            className="gap-2 rounded-full border-purple-500/60 text-purple-100 hover:bg-purple-500/10"
          >
            <Link to="/docs/platform#certification">
              View certification rubric <ArrowRight className="h-4 w-4" />
            </Link>
          </Button>
        </div>
      </section>
    </div>
  );
}