import { Link } from "@tanstack/react-router";
import { Compass, FileText, Gift, Inbox, Radar, ScrollText, Send, Shield, Waypoints } from "lucide-react";
import { GrantScoutPlaybook } from "@/components/grant-scout-playbook";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { GRANT_SCOUT_GAMMA, GRANT_SCOUT_ORIGIN, GAMMA_BOARD_URL, grantScoutPath } from "@/lib/constants";
import type { DashboardData } from "@/lib/types";
import { moneyCents } from "@/lib/utils";

const TILES = [
  { to: "/review", live: "/review", label: "Review queue", hint: "Letters in your voice — not mailed until you say", key: "reviewQueue" as const, icon: FileText },
  { to: "/outreach", live: "/outreach", label: "What we sent", hint: "Solicitations on the record", key: "solicitationsSent" as const, icon: Send },
  { to: "/donations/inbox", live: "/donations/inbox", label: "Donations inbox", hint: "Inbound gifts — never double-count a foundation award", key: "inboxUnread" as const, icon: Inbox },
  { to: "/agreements", live: "/agreements", label: "Agreements", hint: "Education-program restricted language", key: "agreementQueue" as const, icon: ScrollText },
  { to: "/opportunities", live: "/opportunities", label: "Open opportunities", hint: "Federal + URL + foundation RFPs", key: "openOpps" as const, icon: Compass },
  { to: "/foundations", live: "/foundations", label: "Foundations", hint: "Small-grant 990-PF fit", key: "highFit" as const, icon: Shield },
];

export function GrantScoutHome({ data }: { data: DashboardData }) {
  const m = data.metrics;
  return (
    <section className="mb-8">
      <GrantScoutPlaybook metrics={m} />
      <div className="mb-4 flex flex-wrap items-end justify-between gap-3">
        <div>
          <p className="text-[11px] font-medium tracking-[0.18em] text-primary uppercase">Grant Scout · weaved in</p>
          <h2 className="mt-1 font-display text-2xl">Discovery, prospecting, outreach, inbound gifts</h2>
          <p className="mt-1 max-w-3xl text-sm text-navy">
            Four layers. A foundation award is never double-counted as a DonorBox gift. Live Grant Scout sits at{" "}
            <a className="font-semibold text-primary underline" href={GRANT_SCOUT_ORIGIN} target="_blank" rel="noreferrer">
              berry-kind-zinc-sky
            </a>
            . Same navy desk, same Super Admin.
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button asChild variant="gold">
            <a href={GRANT_SCOUT_ORIGIN} target="_blank" rel="noreferrer">
              Open live Grant Scout
            </a>
          </Button>
          <Button asChild variant="outline">
            <Link to="/grant-scout">In-app board</Link>
          </Button>
          <Button asChild variant="outline">
            <a href={GRANT_SCOUT_GAMMA} target="_blank" rel="noreferrer">
              Gamma board
            </a>
          </Button>
        </div>
      </div>

      <div className="mb-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
        <Stat kicker="Open opportunities" value={m.openOpps} hint={`${m.pursueCount} Grok: pursue · ${m.highFit} fit ≥ 70`} />
        <Stat kicker="Solicitations sent" value={m.solicitationsSent} hint="What we sent this season" />
        <Stat kicker="Gifts this quarter" value={moneyCents(m.giftsQuarterCents)} hint="L4 DonorBox + awards, not double-counted" />
        <Stat kicker="Review queue" value={m.reviewQueue} hint={`${m.inboxUnread} unread in the mailbox`} />
      </div>

      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
        {TILES.map((t) => {
          const Icon = t.icon;
          return (
            <Card key={t.to}>
              <CardContent className="flex items-start gap-3 pt-5">
                <span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/12 text-primary">
                  <Icon className="size-4" />
                </span>
                <div className="min-w-0 flex-1">
                  <div className="flex items-center justify-between gap-2">
                    <p className="font-display text-xl">{t.label}</p>
                    <p className="font-display text-2xl tabular">{m[t.key]}</p>
                  </div>
                  <p className="mt-1 text-sm text-navy">{t.hint}</p>
                  <div className="mt-3 flex flex-wrap gap-2">
                    <Button asChild size="sm" variant="gold">
                      <Link to={t.to}>Open here</Link>
                    </Button>
                    <Button asChild size="sm" variant="outline">
                      <a href={grantScoutPath(t.live)} target="_blank" rel="noreferrer">
                        Live Scout
                      </a>
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      <Card className="mt-4">
        <CardContent className="pt-5">
          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
            <div className="flex items-center gap-2">
              <Waypoints className="size-4 text-primary" />
              <h3 className="font-display text-xl">Relationship pipeline</h3>
            </div>
            <Button asChild size="sm" variant="outline">
              <Link to="/pipeline">Open board</Link>
            </Button>
          </div>
          <div className="grid grid-cols-2 gap-2 sm:grid-cols-5">
            {data.pipeline.map((p) => (
              <div key={p.stage} className="rounded-lg bg-muted/60 px-3 py-3">
                <p className="text-[11px] font-semibold tracking-wide text-navy uppercase">{p.stage}</p>
                <p className="mt-1 font-display text-2xl tabular">{p.count}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      <div className="mt-4 flex flex-wrap items-center gap-2 rounded-xl border border-primary/30 bg-primary/10 px-4 py-3">
        <Radar className="size-4 text-primary" />
        <p className="text-sm text-navy">
          Gamma decks live on this theme — 12 slides, not mailed.{" "}
          <a className="font-semibold text-primary underline" href={GAMMA_BOARD_URL} target="_blank" rel="noreferrer">
            Open in Gamma
          </a>
          {" · "}
          <Link to="/gamma" className="font-semibold text-primary underline">
            Gamma in this desk
          </Link>
        </p>
        {data.hold ? <Badge variant="warning">Solicitation hold on</Badge> : <Badge variant="success">Sending live</Badge>}
      </div>
    </section>
  );
}

function Stat({ kicker, value, hint }: { kicker: string; value: string | number; hint: string }) {
  return (
    <Card>
      <CardContent className="pt-5">
        <p className="text-[11px] font-medium tracking-[0.16em] text-navy uppercase">{kicker}</p>
        <p className="mt-1 font-display text-3xl tabular">{value}</p>
        <p className="mt-1 text-xs text-navy">{hint}</p>
      </CardContent>
    </Card>
  );
}