import { createFileRoute, Link } from "@tanstack/react-router";
import { useQuery } from "@tanstack/react-query";
import { motion } from "framer-motion";
import {
  Sparkles,
  Download,
  Lightbulb,
  Sigma,
  StickyNote,
  Copy,
  ListChecks,
} from "lucide-react";
import { PageHeader } from "@/components/common/PageBits";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { summaryService } from "@/services";
import { MOCK_DOCUMENTS } from "@/lib/mock-data";
import { toast } from "sonner";

export const Route = createFileRoute("/_app/summary")({
  head: () => ({ meta: [{ title: "AI Summary — Study Unique" }] }),
  component: SummaryPage,
});

function SummaryPage() {
  const { data, isLoading } = useQuery({ queryKey: ["summary"], queryFn: summaryService.get });
  const doc = MOCK_DOCUMENTS.find((d) => d.id === data?.documentId);

  return (
    <div className="mx-auto w-full max-w-5xl space-y-6 p-4 md:p-6">
      <PageHeader
        title="AI Summary"
        description={doc ? `Distilled from "${doc.title}"` : "Generated summary"}
        actions={
          <>
            <Button variant="outline" size="sm" onClick={() => toast.success("Export started")}>
              <Download className="mr-1.5 h-4 w-4" /> Export
            </Button>
            <Link to="/quiz">
              <Button size="sm" className="gradient-brand text-primary-foreground">
                <ListChecks className="mr-1.5 h-4 w-4" /> Generate quiz
              </Button>
            </Link>
          </>
        }
      />

      {isLoading || !data ? (
        <div className="space-y-3">
          <Skeleton className="h-40" />
          <Skeleton className="h-60" />
        </div>
      ) : (
        <>
          <motion.div
            initial={{ opacity: 0, y: 6 }}
            animate={{ opacity: 1, y: 0 }}
            className="relative overflow-hidden rounded-2xl border border-border bg-card p-6"
          >
            <div className="absolute inset-0 -z-10 gradient-mesh opacity-30" aria-hidden />
            <div className="flex items-center gap-2">
              <Sparkles className="h-4 w-4 text-primary" />
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                Overview
              </p>
            </div>
            <p className="mt-3 text-base leading-relaxed">{data.overview}</p>
          </motion.div>

          <div className="grid gap-4 lg:grid-cols-3">
            <SummaryCard
              icon={Lightbulb}
              title="Key concepts"
              tint="primary"
              copyText={data.keyConcepts.join("\n• ")}
            >
              <ul className="space-y-2 text-sm">
                {data.keyConcepts.map((c) => (
                  <li key={c} className="flex items-start gap-2">
                    <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />
                    {c}
                  </li>
                ))}
              </ul>
            </SummaryCard>

            <SummaryCard
              icon={Sigma}
              title="Important formulas"
              tint="accent"
              copyText={data.formulas.map((f) => `${f.label}: ${f.expr}`).join("\n")}
            >
              <ul className="space-y-3 text-sm">
                {data.formulas.map((f) => (
                  <li
                    key={f.label}
                    className="rounded-lg border border-border bg-muted/40 p-3 font-mono"
                  >
                    <p className="mb-1 text-xs text-muted-foreground">{f.label}</p>
                    <p className="text-base">{f.expr}</p>
                  </li>
                ))}
              </ul>
            </SummaryCard>

            <SummaryCard
              icon={StickyNote}
              title="Revision notes"
              tint="secondary"
              copyText={data.sections.map((s) => `${s.heading}\n${s.body}`).join("\n\n")}
            >
              <Accordion type="single" collapsible>
                {data.sections.map((s) => (
                  <AccordionItem key={s.id} value={s.id} className="border-border">
                    <AccordionTrigger className="text-left text-sm">
                      <div className="flex items-center gap-2">
                        <Badge variant="outline" className="text-[9px] uppercase">
                          {s.kind}
                        </Badge>
                        {s.heading}
                      </div>
                    </AccordionTrigger>
                    <AccordionContent className="text-sm text-muted-foreground">
                      {s.body}
                    </AccordionContent>
                  </AccordionItem>
                ))}
              </Accordion>
            </SummaryCard>
          </div>
        </>
      )}
    </div>
  );
}

function SummaryCard({
  icon: Icon,
  title,
  children,
  copyText,
  tint,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  children: React.ReactNode;
  copyText: string;
  tint: "primary" | "accent" | "secondary";
}) {
  const tintMap = { primary: "text-primary", accent: "text-accent", secondary: "text-secondary" };
  return (
    <div className="rounded-2xl border border-border bg-card p-5">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Icon className={`h-4 w-4 ${tintMap[tint]}`} />
          <h2 className="text-sm font-semibold">{title}</h2>
        </div>
        <Button
          size="icon"
          variant="ghost"
          className="h-7 w-7"
          onClick={() => {
            navigator.clipboard.writeText(copyText);
            toast.success("Copied");
          }}
          aria-label="Copy"
        >
          <Copy className="h-3.5 w-3.5" />
        </Button>
      </div>
      <div className="mt-4">{children}</div>
    </div>
  );
}