"use client";

import { useMemo, useState } 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 { Separator } from "@/components/ui/separator";
import { EntityEditor } from "@/components/app/entity-editor";
import { RecentCmsPosts } from "@/components/app/recent-cms-posts";
import { PlaidTransactions } from "@/components/app/plaid-transactions";
import { useLocalStorage } from "@/lib/hooks/use-local-storage";
import type { Organization } from "@/lib/sag/types";
import { getCmsFor, CMS_LABEL, CMS_ICON } from "@/lib/sag/cms";
import { getToastForEntity } from "@/lib/sag/toast-sample";
import { SEED_FILINGS } from "@/lib/sag/filings-seed";
import { KNOWN_LICENSES } from "@/lib/sag/licenses-seed";
import { DOMAINS, getDaysUntilExpiration } from "@/lib/sag/domains";
import { formatCurrency, formatDate } from "@/lib/utils";

type Tab = "overview" | "finance" | "sales" | "compliance" | "hr" | "marketing" | "documents" | "integrations" | "legal";

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

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

interface SocialPost {
  id: string;
  organizationSlug: string;
  content: string;
  platforms: string[];
  scheduledAt: string;
  status: string;
}

interface VaultDoc {
  id: string;
  organizationSlug: string;
  docType: string;
  name: string;
  uploadedAt: string;
}

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

interface UserLicense {
  id: string;
  organizationSlug: string;
  licenseType: string;
  agency: string;
  licenseNumber?: string;
  expiresDate?: string;
  status: string;
}

const TABS: { id: Tab; label: string; icon: string }[] = [
  { id: "overview", label: "Overview", icon: "🏠" },
  { id: "finance", label: "Finance", icon: "💰" },
  { id: "sales", label: "Sales", icon: "🍞" },
  { id: "compliance", label: "Compliance", icon: "📋" },
  { id: "hr", label: "HR", icon: "👥" },
  { id: "marketing", label: "Marketing", icon: "📣" },
  { id: "documents", label: "Documents", icon: "📁" },
  { id: "integrations", label: "Integrations", icon: "🔌" },
  { id: "legal", label: "Legal", icon: "⚖️" },
];

export function EntityPortal({ org }: { org: Organization }) {
  const [tab, setTab] = useState<Tab>("overview");

  // Pull from all known localStorage stores, filter by this entity
  const [bills] = useLocalStorage<Bill[]>("sag.bills", []);
  const [employees] = useLocalStorage<Employee[]>("sag.hr.employees", []);
  const [posts] = useLocalStorage<SocialPost[]>("sag.social.posts", []);
  const [docs] = useLocalStorage<VaultDoc[]>("sag.docs", []);
  const [plaidAccounts] = useLocalStorage<PlaidAccount[]>("sag.plaid.accounts", []);
  const [userLicenses] = useLocalStorage<UserLicense[]>("sag.licenses.user", []);
  const [filingState] = useLocalStorage<Record<string, { status?: string; lastFiledDate?: string; nextDueDate?: string }>>(
    "sag.filings.state",
    {}
  );

  const cms = getCmsFor(org.slug);
  const toast = getToastForEntity(org.slug);

  const myBills = useMemo(() => bills.filter((b) => b.entitySlug === org.slug), [bills, org.slug]);
  const myEmployees = useMemo(() => employees.filter((e) => e.organizationSlug === org.slug), [employees, org.slug]);
  const myPosts = useMemo(() => posts.filter((p) => p.organizationSlug === org.slug), [posts, org.slug]);
  const myDocs = useMemo(() => docs.filter((d) => d.organizationSlug === org.slug), [docs, org.slug]);
  const myAccounts = useMemo(() => plaidAccounts.filter((a) => a.entitySlug === org.slug), [plaidAccounts, org.slug]);
  const seededLicenses = KNOWN_LICENSES.filter((l) => l.organizationSlug === org.slug);
  const myLicenses = [
    ...seededLicenses,
    ...userLicenses.filter((l) => l.organizationSlug === org.slug),
  ];
  const seededFilings = SEED_FILINGS.filter((f) => f.organizationSlug === org.slug);
  const myDomains = useMemo(() => {
    const slugCore = org.slug.replace(/-/g, "");
    const name = org.name.toLowerCase().replace(/[^a-z0-9]/g, "");
    return DOMAINS.filter((d) => {
      const dn = d.domain.toLowerCase().replace(/[^a-z0-9]/g, "");
      return dn.includes(slugCore) || dn.includes(name) || (cms.websiteUrl ?? "").includes(d.domain);
    });
  }, [org.slug, org.name, cms.websiteUrl]);

  // KPIs
  const cashPosition = myAccounts.reduce((a, x) => a + (x.balance ?? 0), 0);
  const ytdSales = toast?.netSales ?? 0;
  const openBills = myBills.filter((b) => b.status !== "Paid").reduce((a, b) => a + b.amount, 0);
  const lateBills = myBills.filter((b) => b.status === "Overdue").length;
  const openFilings = seededFilings.filter((f) => (filingState[f.id]?.status ?? "Upcoming") !== "Filed").length;
  const activeLicenses = myLicenses.filter((l) => l.status === "Active").length;
  const headcount = myEmployees.filter((e) => e.status === "Active").length;

  return (
    <>
      {/* HEADER */}
      <div
        className="border-b"
        style={{
          background: org.primaryColor ? `linear-gradient(135deg, ${org.primaryColor}20, transparent 70%)` : undefined,
        }}
      >
        <div className="p-8">
          <Link href="/app/entities" className="text-sm text-muted-foreground hover:text-foreground">
            ← All entities
          </Link>
          <div className="mt-5 flex items-start gap-5 flex-wrap">
            <div
              className="w-16 h-16 rounded-xl flex items-center justify-center text-3xl shrink-0"
              style={{ backgroundColor: org.primaryColor ? `${org.primaryColor}25` : undefined }}
            >
              {org.emoji}
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center flex-wrap gap-2 mb-1">
                <Badge variant="outline">{org.industry}</Badge>
                <Badge variant={org.status === "Active" ? "success" : "warning"}>{org.status}</Badge>
                <Badge variant="secondary">{org.entityType}</Badge>
                <Badge variant="outline">{org.state}</Badge>
                {cms.platform !== "none" && (
                  <Badge variant="info">
                    {CMS_ICON[cms.platform]} {CMS_LABEL[cms.platform]}
                  </Badge>
                )}
              </div>
              <h2 className="text-2xl font-semibold">{org.name}</h2>
              {org.dba && <p className="text-sm text-muted-foreground">d/b/a {org.dba}</p>}
              <p className="mt-1 text-sm italic text-muted-foreground">{org.tagline}</p>
            </div>
            <div className="flex flex-col gap-2 shrink-0">
              <Button asChild variant="outline" size="sm">
                <Link href={`/portfolio/${org.slug}`}>View public page →</Link>
              </Button>
              {cms.adminUrl && (
                <Button asChild variant="brand" size="sm">
                  <a href={cms.adminUrl} target="_blank" rel="noopener noreferrer">
                    Open {CMS_LABEL[cms.platform]} admin ↗
                  </a>
                </Button>
              )}
              {cms.websiteUrl && (
                <Button asChild variant="ghost" size="sm">
                  <a href={cms.websiteUrl} target="_blank" rel="noopener noreferrer">
                    Visit live site ↗
                  </a>
                </Button>
              )}
            </div>
          </div>
        </div>

        {/* KPI strip */}
        <div className="px-8 pb-6">
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
            <Kpi label="Cash" value={myAccounts.length === 0 ? "—" : formatCurrency(cashPosition)} hint={myAccounts.length === 0 ? "no bank linked" : `${myAccounts.length} acct${myAccounts.length === 1 ? "" : "s"}`} />
            <Kpi label="2025 sales" value={toast ? formatCurrency(ytdSales) : "—"} hint={toast ? "Toast" : "no POS"} />
            <Kpi label="Open bills" value={openBills > 0 ? formatCurrency(openBills) : "—"} hint={`${myBills.length} total${lateBills ? ` · ${lateBills} late` : ""}`} tone={lateBills > 0 ? "destructive" : "default"} />
            <Kpi label="Filings" value={String(openFilings)} hint={`${seededFilings.length} tracked`} tone={openFilings > 0 ? "warning" : "default"} />
            <Kpi label="Licenses" value={String(activeLicenses)} hint={`${myLicenses.length} total`} />
            <Kpi label="Headcount" value={String(headcount)} hint={myEmployees.length === headcount ? "active" : `${myEmployees.length} total`} />
            <Kpi label="Domains" value={String(myDomains.length)} hint={myDomains.length > 0 ? "owned" : "none matched"} />
          </div>
        </div>

        {/* TABS */}
        <div className="px-8 -mb-px">
          <div className="flex gap-1 overflow-x-auto">
            {TABS.map((t) => (
              <button
                key={t.id}
                onClick={() => setTab(t.id)}
                className={`flex items-center gap-1.5 px-4 py-2.5 text-sm border-b-2 whitespace-nowrap transition-colors ${
                  tab === t.id
                    ? "border-foreground font-medium text-foreground"
                    : "border-transparent text-muted-foreground hover:text-foreground"
                }`}
              >
                <span>{t.icon}</span>
                {t.label}
              </button>
            ))}
          </div>
        </div>
      </div>

      <main className="flex-1 overflow-y-auto p-8 bg-muted/20 space-y-6">
        {tab === "overview" && <OverviewTab org={org} cms={cms} toast={toast} bills={myBills} employees={myEmployees} licenses={myLicenses} filings={seededFilings} filingState={filingState} domains={myDomains} />}
        {tab === "finance" && <FinanceTab accounts={myAccounts} bills={myBills} entitySlug={org.slug} />}
        {tab === "sales" && <SalesTab org={org} toast={toast} />}
        {tab === "compliance" && <ComplianceTab licenses={myLicenses} filings={seededFilings} filingState={filingState} org={org} />}
        {tab === "hr" && <HrTab employees={myEmployees} />}
        {tab === "marketing" && <MarketingTab posts={myPosts} domains={myDomains} org={org} slug={org.slug} />}
        {tab === "documents" && <DocumentsTab docs={myDocs} />}
        {tab === "integrations" && <IntegrationsTab org={org} cms={cms} toast={toast} accounts={myAccounts} />}
        {tab === "legal" && <LegalTab org={org} />}
      </main>
    </>
  );
}

// =========================================================================
// Tabs
// =========================================================================

function OverviewTab({
  org,
  cms,
  toast,
  bills,
  employees,
  licenses,
  filings,
  filingState,
  domains,
}: {
  org: Organization;
  cms: ReturnType<typeof getCmsFor>;
  toast: ReturnType<typeof getToastForEntity>;
  bills: Bill[];
  employees: Employee[];
  licenses: UserLicense[];
  filings: typeof SEED_FILINGS;
  filingState: Record<string, { status?: string; nextDueDate?: string }>;
  domains: typeof DOMAINS;
}) {
  const expiringDomains = domains
    .map((d) => ({ d, days: getDaysUntilExpiration(d.expirationIso) }))
    .filter((x) => x.days < 90)
    .sort((a, b) => a.days - b.days);
  const upcomingFilings = filings
    .map((f) => ({ f, due: filingState[f.id]?.nextDueDate ?? f.nextDueDate }))
    .filter((x) => x.due && (filingState[x.f.id]?.status ?? "Upcoming") !== "Filed")
    .sort((a, b) => (a.due ?? "").localeCompare(b.due ?? ""))
    .slice(0, 3);

  return (
    <div className="grid lg:grid-cols-3 gap-6">
      <Card className="lg:col-span-2">
        <CardContent className="p-6">
          <h3 className="text-base font-semibold">About {org.name}</h3>
          <p className="mt-2 text-sm text-foreground/85 leading-relaxed">{org.blurb}</p>
          <Separator className="my-5" />
          <h4 className="text-sm font-semibold mb-2">Headline numbers</h4>
          <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
            <Highlight label="Industry" value={org.industry} />
            <Highlight label="State" value={org.state} />
            <Highlight label="Entity type" value={org.entityType} />
            <Highlight label="Status" value={org.status} />
            <Highlight label="Formed" value={org.formationDate ? formatDate(org.formationDate) : "—"} />
            <Highlight label="Parent" value="South Armz Global" />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-6">
          <h3 className="text-base font-semibold">Quick links</h3>
          <div className="mt-3 space-y-2 text-sm">
            {cms.websiteUrl && (
              <a href={cms.websiteUrl} target="_blank" rel="noopener noreferrer" className="block rounded-md border bg-background p-3 hover:bg-accent">
                🌐 Live site<br />
                <span className="text-xs text-muted-foreground">{cms.websiteUrl.replace(/^https?:\/\//, "")}</span>
              </a>
            )}
            {cms.adminUrl && (
              <a href={cms.adminUrl} target="_blank" rel="noopener noreferrer" className="block rounded-md border bg-background p-3 hover:bg-accent">
                {CMS_ICON[cms.platform]} {CMS_LABEL[cms.platform]} admin
              </a>
            )}
            <Link href={`/app/compliance/licenses?entity=${org.slug}`} className="block rounded-md border bg-background p-3 hover:bg-accent">
              📜 {licenses.length} license{licenses.length === 1 ? "" : "s"}
            </Link>
            <Link href={`/app/compliance/filings?entity=${org.slug}`} className="block rounded-md border bg-background p-3 hover:bg-accent">
              🗓️ {filings.length} filing{filings.length === 1 ? "" : "s"}
            </Link>
            <Link href={`/app/finance/bills?entity=${org.slug}`} className="block rounded-md border bg-background p-3 hover:bg-accent">
              🧾 {bills.length} bill{bills.length === 1 ? "" : "s"}
            </Link>
          </div>
        </CardContent>
      </Card>

      {upcomingFilings.length > 0 && (
        <Card className="lg:col-span-2">
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">Next filings</h3>
            <ul className="mt-3 space-y-2 text-sm">
              {upcomingFilings.map(({ f, due }) => (
                <li key={f.id} className="flex items-center justify-between rounded-md border bg-background p-3">
                  <div>
                    <div className="font-medium">{f.filingType}</div>
                    <div className="text-xs text-muted-foreground">{f.agency} · {f.cadence}</div>
                  </div>
                  {due && <Badge variant="warning">{formatDate(due)}</Badge>}
                </li>
              ))}
            </ul>
            <Button asChild variant="outline" size="sm" className="mt-4 w-full">
              <Link href="/app/compliance/filings">All filings →</Link>
            </Button>
          </CardContent>
        </Card>
      )}

      {expiringDomains.length > 0 && (
        <Card>
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">Domains expiring &lt;90d</h3>
            <ul className="mt-3 space-y-2 text-xs">
              {expiringDomains.slice(0, 4).map(({ d, days }) => (
                <li key={d.domain} className="flex items-center justify-between rounded-md border bg-background p-2.5">
                  <span className="font-mono truncate">{d.domain}</span>
                  <Badge variant={days < 0 ? "destructive" : days <= 30 ? "destructive" : "warning"} className="shrink-0 text-[10px]">
                    {days < 0 ? `${Math.abs(days)}d late` : `${days}d`}
                  </Badge>
                </li>
              ))}
            </ul>
            <Button asChild variant="outline" size="sm" className="mt-4 w-full">
              <Link href="/app/domains">All domains →</Link>
            </Button>
          </CardContent>
        </Card>
      )}

      {employees.length > 0 && (
        <Card>
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">Team ({employees.length})</h3>
            <ul className="mt-3 space-y-2 text-sm">
              {employees.slice(0, 5).map((e) => (
                <li key={e.id} className="flex items-center justify-between rounded-md border bg-background p-2.5">
                  <div>
                    <div className="font-medium">{e.fullName}</div>
                    <div className="text-xs text-muted-foreground">{e.role}</div>
                  </div>
                  <Badge variant={e.status === "Active" ? "success" : "outline"} className="text-[10px]">{e.status}</Badge>
                </li>
              ))}
            </ul>
          </CardContent>
        </Card>
      )}

      {toast && (
        <Card>
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">2025 Toast snapshot</h3>
            <div className="mt-3 grid grid-cols-2 gap-3 text-sm">
              <div>
                <div className="text-xs text-muted-foreground">Net sales</div>
                <div className="text-lg font-semibold">{formatCurrency(toast.netSales)}</div>
              </div>
              <div>
                <div className="text-xs text-muted-foreground">Items</div>
                <div className="text-lg font-semibold">{toast.itemQty.toLocaleString()}</div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}

function FinanceTab({ accounts, bills, entitySlug }: { accounts: PlaidAccount[]; bills: Bill[]; entitySlug: string }) {
  return (
    <div className="space-y-6">
      <Card>
        <CardContent className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-base font-semibold">Bank accounts ({accounts.length})</h3>
            <Button asChild variant="outline" size="sm">
              <Link href="/app/finance">Manage in /app/finance →</Link>
            </Button>
          </div>
          {accounts.length === 0 ? (
            <EmptyState
              icon="🏦"
              title="No bank accounts assigned"
              message="Connect a bank via /app/finance and assign accounts to this entity to see balances here."
            />
          ) : (
            <ul className="space-y-2 text-sm">
              {accounts.map((a) => (
                <li key={a.accountId} className="flex items-center justify-between rounded-md border bg-background p-3">
                  <div>
                    <div className="font-medium">{a.name}</div>
                    <div className="text-xs text-muted-foreground">
                      {a.type}{a.subtype ? ` · ${a.subtype}` : ""}{a.mask ? ` · ····${a.mask}` : ""}
                    </div>
                  </div>
                  <div className="font-mono text-sm">{a.balance != null ? formatCurrency(a.balance) : "—"}</div>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>

      {accounts.length > 0 && <PlaidTransactions entitySlug={entitySlug} />}

      <Card>
        <CardContent className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-base font-semibold">Bills ({bills.length})</h3>
            <Button asChild variant="outline" size="sm">
              <Link href="/app/finance/bills">Manage in /app/finance/bills →</Link>
            </Button>
          </div>
          {bills.length === 0 ? (
            <EmptyState icon="🧾" title="No bills tracked" message="Add bills from /app/finance/bills." />
          ) : (
            <ul className="space-y-2 text-sm">
              {bills.slice(0, 8).map((b) => (
                <li key={b.id} className="flex items-center justify-between rounded-md border bg-background p-3">
                  <div>
                    <div className="font-medium">{b.vendor}</div>
                    <div className="text-xs text-muted-foreground">{formatDate(b.dueDate)} {b.recurring && `· ↻ ${b.recurrencePattern}`}</div>
                  </div>
                  <div className="flex items-center gap-2">
                    <Badge variant={b.status === "Paid" ? "success" : b.status === "Overdue" ? "destructive" : "outline"} className="text-[10px]">
                      {b.status}
                    </Badge>
                    <span className="font-mono">{formatCurrency(b.amount)}</span>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

function SalesTab({ org, toast }: { org: Organization; toast: ReturnType<typeof getToastForEntity> }) {
  return (
    <div className="space-y-6">
      {toast ? (
        <Card>
          <CardContent className="p-6">
            <h3 className="text-base font-semibold">2025 Toast snapshot</h3>
            <p className="text-xs text-muted-foreground mt-1">From sales-breakdown-2025.csv. Upload newer exports at /app/toast.</p>
            <div className="mt-5 grid grid-cols-2 md:grid-cols-4 gap-3">
              <KpiBig label="Net sales" value={formatCurrency(toast.netSales)} />
              <KpiBig label="Gross sales" value={formatCurrency(toast.grossSales)} />
              <KpiBig label="Items" value={toast.itemQty.toLocaleString()} />
              <KpiBig label="Tax" value={formatCurrency(toast.taxAmount)} />
            </div>
          </CardContent>
        </Card>
      ) : (
        <EmptyStateCard
          icon="🍞"
          title={`${org.name} not in Toast`}
          message="This entity isn't tied to a Toast restaurant_guid. If it should be, map it on /app/toast."
        />
      )}
      <Card>
        <CardContent className="p-6">
          <h3 className="text-base font-semibold">Other revenue sources</h3>
          <p className="text-sm text-muted-foreground mt-2">
            Non-Toast revenue (e-commerce, services, B2B invoices) lives in the bank-transaction feed once Plaid is mapped to this entity.
          </p>
        </CardContent>
      </Card>
    </div>
  );
}

function ComplianceTab({
  licenses,
  filings,
  filingState,
  org,
}: {
  licenses: UserLicense[];
  filings: typeof SEED_FILINGS;
  filingState: Record<string, { status?: string; nextDueDate?: string }>;
  org: Organization;
}) {
  return (
    <div className="space-y-6">
      <Card>
        <CardContent className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-base font-semibold">Licenses ({licenses.length})</h3>
            <Button asChild variant="outline" size="sm">
              <Link href="/app/compliance/licenses">Manage →</Link>
            </Button>
          </div>
          {licenses.length === 0 ? (
            <EmptyState icon="📜" title="No licenses tracked" message="Add licenses on /app/compliance/licenses." />
          ) : (
            <ul className="space-y-2 text-sm">
              {licenses.map((l) => (
                <li key={l.id} className="flex items-center justify-between rounded-md border bg-background p-3">
                  <div>
                    <div className="font-medium">{l.licenseType}</div>
                    <div className="text-xs text-muted-foreground">{l.agency}{l.licenseNumber ? ` · ${l.licenseNumber}` : ""}</div>
                  </div>
                  <Badge variant={l.status === "Active" ? "success" : "warning"} className="text-[10px]">{l.status}</Badge>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-base font-semibold">Filings ({filings.length})</h3>
            <Button asChild variant="outline" size="sm">
              <Link href="/app/compliance/filings">Manage →</Link>
            </Button>
          </div>
          {filings.length === 0 ? (
            <EmptyState icon="🗓️" title="No filings tracked" message="Add filings on /app/compliance/filings." />
          ) : (
            <ul className="space-y-2 text-sm">
              {filings.map((f) => {
                const s = filingState[f.id]?.status ?? "Upcoming";
                return (
                  <li key={f.id} className="flex items-center justify-between rounded-md border bg-background p-3">
                    <div>
                      <div className="font-medium">{f.filingType}</div>
                      <div className="text-xs text-muted-foreground">{f.agency} · {f.cadence}</div>
                    </div>
                    <Badge variant={s === "Filed" ? "success" : s === "Late" ? "destructive" : "warning"} className="text-[10px]">
                      {s}
                    </Badge>
                  </li>
                );
              })}
            </ul>
          )}
        </CardContent>
      </Card>

      {org.slug === "koshu-sake" && (
        <Card className="border-[var(--sag-brand)]/30 bg-[var(--sag-brand)]/5">
          <CardContent className="p-6 flex items-center justify-between flex-wrap gap-3">
            <div>
              <Badge variant="warning">Active application</Badge>
              <h3 className="mt-2 text-base font-semibold">TTB Winery Permit checklist</h3>
              <p className="text-xs text-muted-foreground">12 steps from premises qualification to first excise return.</p>
            </div>
            <Button asChild variant="brand" size="sm">
              <Link href="/app/compliance/koshu-sake/ttb">Open checklist →</Link>
            </Button>
          </CardContent>
        </Card>
      )}
    </div>
  );
}

function HrTab({ employees }: { employees: Employee[] }) {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-base font-semibold">Team ({employees.length})</h3>
          <Button asChild variant="outline" size="sm">
            <Link href="/app/hr">Add/edit in /app/hr →</Link>
          </Button>
        </div>
        {employees.length === 0 ? (
          <EmptyState icon="👥" title="No employees yet" message="Add team members on /app/hr." />
        ) : (
          <ul className="space-y-2 text-sm">
            {employees.map((e) => (
              <li key={e.id} className="flex items-center justify-between rounded-md border bg-background p-3">
                <div>
                  <div className="font-medium">{e.fullName}</div>
                  <div className="text-xs text-muted-foreground">{e.role}</div>
                </div>
                <div className="text-right">
                  <Badge variant={e.status === "Active" ? "success" : "outline"} className="text-[10px]">{e.status}</Badge>
                  {e.compAmount != null && e.compType && (
                    <div className="text-xs text-muted-foreground mt-1">
                      {e.compType === "salary" ? `${formatCurrency(e.compAmount)}/yr` : e.compType === "hourly" ? `${formatCurrency(e.compAmount)}/hr` : formatCurrency(e.compAmount)}
                    </div>
                  )}
                </div>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}

function MarketingTab({ posts, domains, org, slug }: { posts: SocialPost[]; domains: typeof DOMAINS; org: Organization; slug: string }) {
  return (
    <div className="space-y-6">
      <RecentCmsPosts slug={slug} />

      <Card>
        <CardContent className="p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-base font-semibold">Scheduled posts ({posts.length})</h3>
            <Button asChild variant="outline" size="sm">
              <Link href="/app/social">Plan in /app/social →</Link>
            </Button>
          </div>
          {posts.length === 0 ? (
            <EmptyState icon="📣" title="No posts scheduled" message={`Use /app/social with the Marketing Agent to draft posts in ${org.name}'s brand voice.`} />
          ) : (
            <ul className="space-y-2 text-sm">
              {posts.slice(0, 6).map((p) => (
                <li key={p.id} className="rounded-md border bg-background p-3">
                  <div className="flex items-center gap-2 mb-1 flex-wrap">
                    <Badge variant={p.status === "Posted" ? "success" : "outline"} className="text-[10px]">{p.status}</Badge>
                    <span className="text-[10px] text-muted-foreground">{formatDate(p.scheduledAt)}</span>
                    <span className="text-[10px] text-muted-foreground">{p.platforms.join(", ")}</span>
                  </div>
                  <p className="text-xs line-clamp-2">{p.content}</p>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-6">
          <h3 className="text-base font-semibold">Domains owned ({domains.length})</h3>
          <p className="text-xs text-muted-foreground">Matched by name. Verify in /app/domains if any look wrong.</p>
          {domains.length === 0 ? (
            <p className="text-sm text-muted-foreground mt-3">No domains matched this entity’s name.</p>
          ) : (
            <ul className="mt-3 space-y-1.5 text-sm">
              {domains.map((d) => (
                <li key={d.domain} className="flex items-center justify-between rounded-md border bg-background p-2.5 text-xs">
                  <a href={`https://${d.domain}`} target="_blank" rel="noopener noreferrer" className="font-mono hover:underline">
                    {d.domain}
                  </a>
                  <span className="text-muted-foreground">{d.expirationLabel}</span>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

function DocumentsTab({ docs }: { docs: VaultDoc[] }) {
  return (
    <Card>
      <CardContent className="p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-base font-semibold">Documents ({docs.length})</h3>
          <Button asChild variant="outline" size="sm">
            <Link href="/app/docs">Manage in /app/docs →</Link>
          </Button>
        </div>
        {docs.length === 0 ? (
          <EmptyState icon="📁" title="No documents yet" message="Upload EIN letters, articles, leases, licenses on /app/docs and tag this entity." />
        ) : (
          <ul className="space-y-2 text-sm">
            {docs.map((d) => (
              <li key={d.id} className="rounded-md border bg-background p-3">
                <div className="flex items-center gap-2 flex-wrap mb-0.5">
                  <Badge variant="outline" className="text-[10px]">{d.docType}</Badge>
                  <span className="text-[10px] text-muted-foreground">{formatDate(d.uploadedAt)}</span>
                </div>
                <div className="font-medium">{d.name}</div>
              </li>
            ))}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}

function IntegrationsTab({
  org,
  cms,
  toast,
  accounts,
}: {
  org: Organization;
  cms: ReturnType<typeof getCmsFor>;
  toast: ReturnType<typeof getToastForEntity>;
  accounts: PlaidAccount[];
}) {
  return (
    <div className="grid md:grid-cols-2 gap-5">
      <IntegrationCard
        title={`${CMS_LABEL[cms.platform]} site`}
        icon={CMS_ICON[cms.platform]}
        status={cms.platform === "none" ? "Not configured" : "Active"}
        statusVariant={cms.platform === "none" ? "outline" : "success"}
        body={
          cms.websiteUrl
            ? `Live at ${cms.websiteUrl.replace(/^https?:\/\//, "")}`
            : cms.notes ?? "No website configured for this entity yet."
        }
        primary={
          cms.adminUrl
            ? { label: `Open ${CMS_LABEL[cms.platform]} admin ↗`, href: cms.adminUrl }
            : undefined
        }
        secondary={cms.websiteUrl ? { label: "Visit live ↗", href: cms.websiteUrl } : undefined}
      />

      <IntegrationCard
        title="Toast POS"
        icon="🍞"
        status={toast ? "Active (CSV)" : "Not connected"}
        statusVariant={toast ? "success" : "outline"}
        body={
          toast
            ? `Mapped to Toast category "${toast.toastName}". 2025 net sales: ${formatCurrency(toast.netSales)}.`
            : "No Toast restaurant_guid mapped. If this entity uses Toast, add the mapping in /lib/sag/toast-csv.ts."
        }
        primary={{ label: "Open /app/toast →", href: "/app/toast" }}
        internal
      />

      <IntegrationCard
        title="Bank accounts (Plaid)"
        icon="🏦"
        status={accounts.length > 0 ? `${accounts.length} linked` : "None linked"}
        statusVariant={accounts.length > 0 ? "success" : "outline"}
        body={accounts.length > 0 ? `Total balance: ${formatCurrency(accounts.reduce((a, x) => a + (x.balance ?? 0), 0))}` : "Connect a bank in /app/finance and assign accounts to this entity."}
        primary={{ label: "Open /app/finance →", href: "/app/finance" }}
        internal
      />

      <IntegrationCard
        title="Social accounts"
        icon="📣"
        status={org.socialHandles && Object.keys(org.socialHandles).length > 0 ? "Configured" : "Not set"}
        statusVariant={org.socialHandles && Object.keys(org.socialHandles).length > 0 ? "success" : "outline"}
        body={
          org.socialHandles && Object.keys(org.socialHandles).length > 0
            ? Object.entries(org.socialHandles).map(([k, v]) => `${k}: ${v}`).join(" · ")
            : "Add Instagram, Facebook, etc. on this entity's edit panel."
        }
        primary={{ label: "Manage in /app/social →", href: "/app/social" }}
        internal
      />
    </div>
  );
}

function LegalTab({ org }: { org: Organization }) {
  return (
    <div className="space-y-6">
      <Card>
        <CardContent className="p-5 space-y-2 text-sm">
          <h3 className="text-base font-semibold mb-3">Entity record</h3>
          <DetailRow label="Legal name">{org.name}</DetailRow>
          {org.dba && <DetailRow label="DBA">{org.dba}</DetailRow>}
          <DetailRow label="Slug">{org.slug}</DetailRow>
          <DetailRow label="Industry">{org.industry}</DetailRow>
          <DetailRow label="Entity type">{org.entityType}</DetailRow>
          <DetailRow label="Status">{org.status}</DetailRow>
          <DetailRow label="State">{org.state}</DetailRow>
          <DetailRow label="Parent">South Armz Global</DetailRow>
          <DetailRow label="Formation date">{org.formationDate ? formatDate(org.formationDate) : "—"}</DetailRow>
          <DetailRow label="EIN">{org.ein ? `••••${org.ein.slice(-4)}` : "—"}</DetailRow>
          <DetailRow label="NC SoS file #">{org.ncSosFileNumber ?? "—"}</DetailRow>
          {org.website && (
            <DetailRow label="Website">
              <a href={org.website} target="_blank" rel="noopener noreferrer" className="text-[var(--sag-brand)] hover:underline">
                {org.website.replace(/^https?:\/\//, "")}
              </a>
            </DetailRow>
          )}
        </CardContent>
      </Card>

      <EntityEditor slug={org.slug} />
    </div>
  );
}

// =========================================================================
// Helpers
// =========================================================================

function Kpi({ label, value, hint, tone = "default" }: { label: string; value: string; hint?: string; tone?: "default" | "warning" | "destructive" }) {
  const colorClass =
    tone === "destructive" ? "text-destructive" : tone === "warning" ? "text-yellow-700 dark:text-yellow-400" : "text-foreground";
  return (
    <div className="rounded-md border bg-background p-3">
      <div className="section-label">{label}</div>
      <div className={`mt-0.5 text-lg font-semibold tabular-nums ${colorClass}`}>{value}</div>
      {hint && <div className="text-[10px] text-muted-foreground mt-0.5">{hint}</div>}
    </div>
  );
}

function KpiBig({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-md border bg-background p-4">
      <div className="text-xs uppercase tracking-wider text-muted-foreground">{label}</div>
      <div className="mt-1 text-2xl font-semibold tabular-nums">{value}</div>
    </div>
  );
}

function Highlight({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <div className="text-xs text-muted-foreground">{label}</div>
      <div className="font-medium">{value}</div>
    </div>
  );
}

function DetailRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex justify-between gap-3 py-1.5 border-b last:border-b-0">
      <span className="text-muted-foreground">{label}</span>
      <span className="font-medium text-right break-all">{children}</span>
    </div>
  );
}

function EmptyState({ icon, title, message }: { icon: string; title: string; message: string }) {
  return (
    <div className="rounded-md border border-dashed p-8 text-center">
      <div className="text-3xl mb-2">{icon}</div>
      <p className="text-sm font-medium">{title}</p>
      <p className="mt-1 text-xs text-muted-foreground">{message}</p>
    </div>
  );
}

function EmptyStateCard({ icon, title, message }: { icon: string; title: string; message: string }) {
  return (
    <Card>
      <CardContent className="p-8 text-center">
        <div className="text-4xl mb-2">{icon}</div>
        <p className="text-base font-medium">{title}</p>
        <p className="mt-1 text-sm text-muted-foreground">{message}</p>
      </CardContent>
    </Card>
  );
}

function IntegrationCard({
  title,
  icon,
  status,
  statusVariant,
  body,
  primary,
  secondary,
  internal,
}: {
  title: string;
  icon: string;
  status: string;
  statusVariant: "success" | "outline" | "warning" | "destructive";
  body: string;
  primary?: { label: string; href: string };
  secondary?: { label: string; href: string };
  internal?: boolean;
}) {
  return (
    <Card>
      <CardContent className="p-5">
        <div className="flex items-start justify-between gap-3 mb-2">
          <div className="flex items-center gap-2">
            <span className="text-2xl">{icon}</span>
            <h3 className="font-semibold">{title}</h3>
          </div>
          <Badge variant={statusVariant}>{status}</Badge>
        </div>
        <p className="text-sm text-muted-foreground">{body}</p>
        {(primary || secondary) && (
          <div className="mt-4 flex gap-2">
            {primary && (
              internal ? (
                <Button asChild variant="brand" size="sm"><Link href={primary.href}>{primary.label}</Link></Button>
              ) : (
                <Button asChild variant="brand" size="sm"><a href={primary.href} target="_blank" rel="noopener noreferrer">{primary.label}</a></Button>
              )
            )}
            {secondary && (
              <Button asChild variant="outline" size="sm">
                <a href={secondary.href} target="_blank" rel="noopener noreferrer">{secondary.label}</a>
              </Button>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
}