import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import {
  BookOpen,
  Layers,
  Wand2,
  GitBranch,
  ClipboardList,
  FolderOpen,
  Users,
  GraduationCap,
  Sparkles,
  Compass,
  ChevronRight,
  ArrowRight,
  type LucideIcon,
} from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

/**
 * Smart Wizard Hub.
 *
 * Landing page that groups every step-by-step wizard in a single place.
 * Admins pick a scenario → land in the inline Next/Next/Finish flow. The
 * page also exposes "Advanced" deep links to the full creation pages for
 * power users who don't need hand-holding.
 */

interface WizardCard {
  id: string;
  to: string;
  icon: LucideIcon;
  titleKey: string;
  descriptionKey: string;
  badgeKey?: string;
  /** When true, deep-links to the full creation page instead of a wizard. */
  advanced?: boolean;
}

const guidedWizards: WizardCard[] = [
  {
    id: "rubric",
    to: "/admin/smart-wizard/rubric",
    icon: BookOpen,
    titleKey: "wizardHub.cards.rubric.title",
    descriptionKey: "wizardHub.cards.rubric.description",
  },
  {
    id: "exam-structure",
    to: "/admin/smart-wizard/exam-structure",
    icon: Layers,
    titleKey: "wizardHub.cards.examStructure.title",
    descriptionKey: "wizardHub.cards.examStructure.description",
  },
  {
    id: "course",
    to: "/admin/smart-wizard/course",
    icon: GraduationCap,
    titleKey: "wizardHub.cards.course.title",
    descriptionKey: "wizardHub.cards.course.description",
  },
  {
    id: "course-plan",
    to: "/admin/smart-wizard/course-plan",
    icon: Compass,
    titleKey: "wizardHub.cards.coursePlan.title",
    descriptionKey: "wizardHub.cards.coursePlan.description",
    badgeKey: "wizardHub.aiBadge",
  },
];

const advancedLinks: WizardCard[] = [
  {
    id: "generation",
    to: "/admin/generation",
    icon: Wand2,
    titleKey: "wizardHub.cards.generation.title",
    descriptionKey: "wizardHub.cards.generation.description",
    advanced: true,
  },
  {
    id: "approval",
    to: "/admin/approval-workflows",
    icon: GitBranch,
    titleKey: "wizardHub.cards.approval.title",
    descriptionKey: "wizardHub.cards.approval.description",
    advanced: true,
  },
  {
    id: "assign",
    to: "/admin/assignments",
    icon: ClipboardList,
    titleKey: "wizardHub.cards.assign.title",
    descriptionKey: "wizardHub.cards.assign.description",
    advanced: true,
  },
  {
    id: "resource",
    to: "/admin/resources",
    icon: FolderOpen,
    titleKey: "wizardHub.cards.resource.title",
    descriptionKey: "wizardHub.cards.resource.description",
    advanced: true,
  },
  {
    id: "student",
    to: "/admin/students",
    icon: Users,
    titleKey: "wizardHub.cards.student.title",
    descriptionKey: "wizardHub.cards.student.description",
    advanced: true,
  },
];

export default function SmartWizardHub() {
  const { t } = useTranslation();

  return (
    <div className="space-y-8">
      <div className="space-y-1">
        <div className="flex items-center gap-2">
          <Sparkles className="h-5 w-5 text-primary" />
          <h1 className="text-2xl font-semibold tracking-tight">{t("wizardHub.title")}</h1>
        </div>
        <p className="text-muted-foreground max-w-3xl">{t("wizardHub.subtitle")}</p>
      </div>

      {/* Recommended order hint */}
      <div className="rounded-lg border bg-muted/40 p-4 text-sm">
        <div className="font-medium mb-1">{t("wizardHub.recommendedOrder")}</div>
        <ol className="list-decimal list-inside text-muted-foreground space-y-0.5">
          <li>{t("wizardHub.order.rubric")}</li>
          <li>{t("wizardHub.order.structure")}</li>
          <li>{t("wizardHub.order.generate")}</li>
          <li>{t("wizardHub.order.approve")}</li>
          <li>{t("wizardHub.order.assign")}</li>
        </ol>
      </div>

      {/* Guided wizards */}
      <section aria-labelledby="wizard-hub-guided">
        <h2 id="wizard-hub-guided" className="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3">
          {t("wizardHub.guided")}
        </h2>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {guidedWizards.map((card) => (
            <WizardCardView key={card.id} card={card} />
          ))}
        </div>
      </section>

      {/* Advanced deep links */}
      <section aria-labelledby="wizard-hub-advanced">
        <h2 id="wizard-hub-advanced" className="text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3">
          {t("wizardHub.advanced")}
        </h2>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          {advancedLinks.map((card) => (
            <WizardCardView key={card.id} card={card} />
          ))}
        </div>
      </section>
    </div>
  );
}

function WizardCardView({ card }: { card: WizardCard }) {
  const { t } = useTranslation();
  const Icon = card.icon;
  return (
    <Card className="transition-all hover:shadow-md hover:-translate-y-0.5">
      <CardHeader className="pb-2">
        <div className="flex items-center gap-2 flex-wrap">
          <div className="flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary">
            <Icon className="h-4 w-4" />
          </div>
          <CardTitle className="text-base flex-1 min-w-0">{t(card.titleKey)}</CardTitle>
          {card.badgeKey && (
            <Badge variant="secondary" className="text-[10px]">
              {t(card.badgeKey)}
            </Badge>
          )}
          {card.advanced && (
            <Badge variant="outline" className="text-[10px]">
              {t("wizardHub.advancedBadge")}
            </Badge>
          )}
        </div>
        <CardDescription className="line-clamp-3 min-h-[3em]">
          {t(card.descriptionKey)}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Button
          asChild
          size="sm"
          variant={card.advanced ? "secondary" : "default"}
          className="w-full"
        >
          <Link to={card.to} className="flex items-center justify-center gap-1">
            {card.advanced ? t("wizardHub.openPage") : t("wizardHub.startWizard")}
            {card.advanced ? (
              <ChevronRight className="h-3.5 w-3.5" />
            ) : (
              <ArrowRight className="h-3.5 w-3.5" />
            )}
          </Link>
        </Button>
      </CardContent>
    </Card>
  );
}
