import { Link, useRouter } from "@tanstack/react-router";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { grantScoutPath } from "@/lib/constants";
import { nextScoutAction, SCOUT_LAYERS, SUPER_ADMIN_STEPS } from "@/lib/grant-scout";
import { runScoutPass } from "@/lib/server/api-opps";
import type { DashboardData } from "@/lib/types";

export function GrantScoutPlaybook({ metrics }: { metrics: DashboardData["metrics"] }) {
  const next = nextScoutAction(metrics);
  const router = useRouter();
  const [busy, setBusy] = useState(false);

  async function runPass() {
    setBusy(true);
    try {
      const res = await runScoutPass();
      toast.success(`Scout pass scored ${res.scored} listing${res.scored === 1 ? "" : "s"}. Nothing mailed.`);
      await router.invalidate();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Scout pass failed.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="mb-6 space-y-4">
      <Card>
        <CardContent className="pt-5">
          <p className="text-[11px] font-medium tracking-[0.18em] text-primary uppercase">Super Admin · how to run Grant Scout</p>
          <h2 className="mt-1 font-display text-2xl">Eight clicks. Stay on Super Admin.</h2>
          <p className="mt-1 text-sm text-navy">
            Next: <span className="font-semibold">{next.why}</span>
          </p>
          <div className="mt-3 flex flex-wrap gap-2">
            <Button variant="gold" disabled={busy} onClick={() => void runPass()}>
              {busy ? "Scoring…" : "Run Scout pass"}
            </Button>
            <Button asChild variant="outline">
              <Link to={next.to}>{next.label}</Link>
            </Button>
          </div>
          <ol className="mt-5 space-y-3">
            {SUPER_ADMIN_STEPS.map((s) => (
              <li key={s.n} className="flex gap-3 rounded-lg bg-muted/60 px-3 py-3">
                <span className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary font-display text-sm text-primary-foreground">
                  {s.n}
                </span>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-navy">{s.title}</p>
                  <p className="text-xs font-medium text-navy">{s.where}</p>
                  <p className="mt-1 text-sm text-navy">{s.detail}</p>
                  <Link to={s.to} className="mt-1 inline-block text-sm font-semibold text-primary hover:underline">
                    Go →
                  </Link>
                </div>
              </li>
            ))}
          </ol>
        </CardContent>
      </Card>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        {SCOUT_LAYERS.map((layer) => (
          <Card key={layer.id}>
            <CardContent className="pt-5">
              <p className="text-[11px] font-semibold tracking-[0.16em] text-gold-ink uppercase">
                {layer.id} · {layer.name}
              </p>
              <p className="mt-2 text-sm text-navy">{layer.meaning}</p>
              <div className="mt-3 flex flex-wrap gap-2">
                <Button asChild size="sm" variant="gold">
                  <Link to={layer.to}>Open</Link>
                </Button>
                <Button asChild size="sm" variant="outline">
                  <a href={grantScoutPath(layer.live)} target="_blank" rel="noreferrer">
                    Live
                  </a>
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}