"use client";

import { useMemo } from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useLocalStorage } from "@/lib/hooks/use-local-storage";
import { buildAlerts, type Alert, type AlertSeverity } from "@/lib/sag/alerts";
import { ALL_ORGANIZATIONS } from "@/lib/sag/entities";
import { getDomainStats } from "@/lib/sag/domains";
import { TOAST_SAMPLE_2025, getToastTotals } from "@/lib/sag/toast-sample";
import { KOSHU_TTB_STEPS, getTtbProgress } from "@/lib/sag/ttb-koshu";
import { PITCHES } from "@/lib/sag/pitches";
import { buildBudget } from "@/lib/sag/budget";
import { formatCurrency, formatCurrencyCompact, formatDate } from "@/lib/utils";

interface Bill {
  id: string;
  entitySlug: string;
  vendor: string;
  amount: number;
  dueDate: string;
  status: string;
  recurring: boolean;
  recurrencePattern?: string;
}

interface Employee {
  id: string;
  organizationSlug: string;
  fullName: string;
  role: string;
  status: string;
  compType?: string;
  compAmount?: number;
}

interface PlaidAccount {
  accountId: string;
  name: string;
  balance?: number | null;
  entitySlug?: string;
}

interface VaultDoc {
  id: string;
  organizationSlug: string;
}

interface SocialPost {
  id: string;
  status: string;
}

export function ExecutiveBriefing() {
  const [bills] = useLocalStorage<Bill[]>("sag.bills", []);
  const [employees] = useLocalStorage<Employee[]>("sag.hr.employees", []);
  const [accounts] = useLocalStorage<PlaidAccount[]>("sag.plaid.accounts", []);
  const [docs] = useLocalStorage<VaultDoc[]>("sag.docs", []);
  const [posts] = useLocalStorage<SocialPost[]>("sag.social.posts", []);
  const [filingState] = useLocalStorage<Record<string, { status?: string; nextDueDate?: string }>>(
    "sag.filings.state",
    {}
  );
  const [licenseOverrides] = useLocalStorage<Record<string, { status?: string; expiresDate?: string }>>(
    "sag.licenses.overrides",
    {}
  );
  const [domainOverrides] = useLocalStorage<Record<string, { expirationIso?: string; status?: string }>>(
    "sag.domains.overrides",
    {}
  );

  const alerts = useMemo(
    () => buildAlerts({ bills, filingState, licenseOverrides, domainOverrides }),
    [bills, filingState, licenseOverrides, domainOverrides]
  );

  const cash = accounts.reduce((a, x) => a + (x.balance ?? 0), 0);
  const toastTotals = getToastTotals();
  const budget = buildBudget(bills, employees);
  const domainStats = getDomainStats();
  const ttb = getTtbProgress();
  const topToastEntity = [...TOAST_SAMPLE_2025].sort((a, b) => b.netSales - a.netSales)[0];

  const criticalAlerts = alerts.filter((a) => a.severity === "critical");
  const highAlerts = alerts.filter((a) => a.severity === "high");
  const mediumAlerts = alerts.filter((a) => a.severity === "medium");

  const today = new Date().toLocaleDateString("en-US", {
    weekday: "long",
    month: "long",
    day: "numeric",
    year: "numeric",
  });

  return (
    <div className="space-y-6 max-w-7xl mx-auto">
      <div>
        <p className="text-sm text-muted-foreground">{today}</p>
        <h1 className="mt-1 text-3xl md:text-4xl font-semibold tracking-tight">Good morning.</h1>
        <p className="mt-2 text-base text-muted-foreground">
          {criticalAlerts.length > 0 || highAlerts.length > 0
            ? `${criticalAlerts.length + highAlerts.length} thing${criticalAlerts.length + highAlerts.length === 1 ? "" : "s"} need attention today across the SAG portfolio.`
            : "Nothing critical across the portfolio. Time to build."}
        </p>
      </div>

      {/* TOP METRICS */}
      <section className="grid gap-4 grid-cols-2 lg:grid-cols-4">
        <Big tone="brand" label="Cash on hand" value={accounts.length > 0 ? formatCurrency(cash) : "—"} hint={accounts.length === 0 ? "no banks linked" : `${accounts.length} accts`} />
        <Big tone="emerald" label="2025 sales" value={formatCurrencyCompact(toastTotals.netSales)} hint={topToastEntity ? `${topToastEntity.toastName} leads` : ""} />
        <Big tone="amber" label="Annual budget" value={formatCurrencyCompact(budget.totalAnnual)} hint={`${budget.lines.length} line items`} />
        <Big tone="violet" label="Portfolio" value={`${ALL_ORGANIZATIONS.length} entities`} hint={`${domainStats.total} domains · ${formatCurrencyCompact(domainStats.totalValue)} value`} />
      </section>

      {/* CRITICAL */}
      {criticalAlerts.length > 0 && (
        <Card className="border-destructive/30 bg-destructive/5">
          <CardContent className="p-6">
            <div className="flex items-center gap-2 mb-3">
              <Badge variant="destructive">{criticalAlerts.length} critical</Badge>
              <h2 className="text-base font-semibold">Stop what you’re doing — these are overdue or expired</h2>
            </div>
            <AlertList alerts={criticalAlerts} />
          </CardContent>
        </Card>
      )}

      {/* HIGH */}
      {highAlerts.length > 0 && (
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-2 mb-3">
              <Badge variant="warning">{highAlerts.length} high</Badge>
              <h2 className="text-base font-semibold">Act this week</h2>
            </div>
            <AlertList alerts={highAlerts} />
          </CardContent>
        </Card>
      )}

      {/* MEDIUM */}
      {mediumAlerts.length > 0 && (
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center gap-2 mb-3">
              <Badge variant="info">{mediumAlerts.length} upcoming</Badge>
              <h2 className="text-base font-semibold">Plan ahead — due in 14–60 days</h2>
            </div>
            <AlertList alerts={mediumAlerts.slice(0, 8)} />
            {mediumAlerts.length > 8 && (
              <p className="mt-3 text-xs text-muted-foreground text-center">
                +{mediumAlerts.length - 8} more — see filtered views.
              </p>
            )}
          </CardContent>
        </Card>
      )}

      {/* ACROSS-MODULE STATUS */}
      <section className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">🍶 Koshu TTB</h3>
            <div className="mt-2 flex items-center justify-between">
              <span className="text-sm text-muted-foreground">
                {ttb.completed} / {ttb.total} steps · {ttb.percent}%
              </span>
              <Button asChild variant="outline" size="sm">
                <Link href="/app/compliance/koshu-sake/ttb">Open</Link>
              </Button>
            </div>
            <div className="mt-2 text-xs text-muted-foreground">
              Next: <span className="font-medium text-foreground">{KOSHU_TTB_STEPS.find((s) => s.status !== "Approved" && s.status !== "Submitted")?.name ?? "All done"}</span>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">🚀 Active raises</h3>
            <div className="mt-2 space-y-1.5">
              {PITCHES.map((p) => (
                <div key={p.slug} className="flex items-center justify-between text-sm">
                  <span>{p.emoji} {p.legalEntity.replace(/, LLC$/, "")}</span>
                  <span className="font-mono text-xs">{formatCurrency(p.status.raiseGoal)}</span>
                </div>
              ))}
            </div>
            <Button asChild variant="outline" size="sm" className="mt-3 w-full">
              <Link href="/app/crowdfund">Manage raises</Link>
            </Button>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">📁 Activity rollup</h3>
            <ul className="mt-3 space-y-1.5 text-sm">
              <Stat row label="Employees" value={String(employees.filter((e) => e.status === "Active").length)} hint="active" />
              <Stat row label="Bills tracked" value={String(bills.length)} hint={`${bills.filter((b) => b.status !== "Paid").length} open`} />
              <Stat row label="Documents" value={String(docs.length)} hint="uploaded" />
              <Stat row label="Scheduled posts" value={String(posts.filter((p) => p.status === "Scheduled").length)} hint={`${posts.length} total`} />
            </ul>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">🌐 Domain portfolio</h3>
            <ul className="mt-3 space-y-1.5 text-sm">
              <Stat row label="Total" value={String(domainStats.total)} />
              <Stat row label="Expired" value={String(domainStats.expired)} />
              <Stat row label="Expiring ≤60d" value={String(domainStats.expiringSoon)} />
              <Stat row label="Est. value" value={`${formatCurrencyCompact(domainStats.totalValue)}+`} />
            </ul>
            <Button asChild variant="outline" size="sm" className="mt-3 w-full">
              <Link href="/app/domains">Manage</Link>
            </Button>
          </CardContent>
        </Card>
      </section>

      {/* SHORTCUTS */}
      <Card>
        <CardContent className="p-6">
          <h3 className="text-base font-semibold mb-4">Quick actions</h3>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
            <QuickAction href="/app/agents/cfo" icon="🧮" label="Ask CFO Agent" tone="violet" />
            <QuickAction href="/app/agents/compliance" icon="⚖️" label="Compliance Agent" tone="amber" />
            <QuickAction href="/app/agents/secretary" icon="📨" label="Triage mail" tone="emerald" />
            <QuickAction href="/app/finance/budget" icon="📊" label="Budget view" tone="brand" />
            <QuickAction href="/app/toast" icon="🍞" label="Upload Toast CSV" tone="amber" />
            <QuickAction href="/app/finance/bills" icon="🧾" label="Add a bill" tone="emerald" />
            <QuickAction href="/app/hr" icon="👥" label="Add an employee" tone="violet" />
            <QuickAction href="/app/settings/data" icon="💾" label="Download backup" tone="brand" />
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

function AlertList({ alerts }: { alerts: Alert[] }) {
  return (
    <ul className="space-y-2">
      {alerts.map((a) => {
        const org = a.entitySlug ? ALL_ORGANIZATIONS.find((o) => o.slug === a.entitySlug) : undefined;
        const SeverityChip = severityChip(a.severity);
        const row = (
          <div className="rounded-md border bg-background p-3 hover:bg-accent transition-colors">
            <div className="flex items-center justify-between gap-3 flex-wrap">
              <div className="min-w-0 flex-1">
                <div className="flex items-center gap-2 flex-wrap">
                  {SeverityChip}
                  <span className="text-sm font-medium">{a.title}</span>
                </div>
                {a.detail && <div className="mt-1 text-xs text-muted-foreground">{a.detail}</div>}
              </div>
              <div className="text-xs text-muted-foreground shrink-0 text-right">
                {org && <div className="font-medium">{org.emoji} {org.name}</div>}
                {a.when && <div>{a.when.length === 10 ? formatDate(a.when) : a.when}</div>}
              </div>
            </div>
          </div>
        );
        return (
          <li key={a.id}>
            {a.href ? <Link href={a.href}>{row}</Link> : row}
          </li>
        );
      })}
    </ul>
  );
}

function severityChip(s: AlertSeverity) {
  const variant: "destructive" | "warning" | "info" | "outline" =
    s === "critical" ? "destructive" : s === "high" ? "warning" : s === "medium" ? "info" : "outline";
  return <Badge variant={variant} className="text-[10px]">{s}</Badge>;
}

function Big({
  label,
  value,
  hint,
  tone = "neutral",
}: {
  label: string;
  value: string;
  hint?: string;
  tone?: "neutral" | "brand" | "emerald" | "amber" | "violet" | "rose";
}) {
  const accent: Record<string, string> = {
    neutral: "border-l-border",
    brand: "border-l-[var(--sag-brand)]",
    emerald: "border-l-emerald-500/70",
    amber: "border-l-amber-500/70",
    violet: "border-l-violet-500/70",
    rose: "border-l-rose-500/70",
  };
  return (
    <Card className={`card-interactive border-l-4 ${accent[tone]}`}>
      <CardContent className="p-5">
        <div className="section-label">{label}</div>
        <div className="mt-2 text-2xl md:text-3xl font-semibold stat-value">{value}</div>
        {hint && <div className="mt-1 text-xs text-muted-foreground">{hint}</div>}
      </CardContent>
    </Card>
  );
}

function Stat({ label, value, hint }: { row?: boolean; label: string; value: string; hint?: string }) {
  return (
    <li className="flex items-center justify-between">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-mono tabular-nums">
        {value}
        {hint && <span className="ml-2 text-xs text-muted-foreground font-sans">{hint}</span>}
      </span>
    </li>
  );
}

function QuickAction({
  href,
  icon,
  label,
  tone = "neutral",
}: {
  href: string;
  icon: string;
  label: string;
  tone?: "neutral" | "brand" | "emerald" | "amber" | "violet" | "rose";
}) {
  const chip: Record<string, string> = {
    neutral: "bg-muted",
    brand: "bg-[var(--sag-brand)]/15 ring-1 ring-[var(--sag-brand)]/30",
    emerald: "bg-emerald-500/10 ring-1 ring-emerald-500/20",
    amber: "bg-amber-500/10 ring-1 ring-amber-500/25",
    violet: "bg-violet-500/10 ring-1 ring-violet-500/25",
    rose: "bg-rose-500/10 ring-1 ring-rose-500/25",
  };
  return (
    <Link
      href={href}
      className="card-interactive group flex items-center gap-3 rounded-lg border bg-background p-3.5 text-sm font-medium"
    >
      <span className={`flex h-9 w-9 items-center justify-center rounded-md text-base shrink-0 ${chip[tone]}`}>
        {icon}
      </span>
      <span className="truncate group-hover:text-foreground transition-colors">{label}</span>
    </Link>
  );
}