import { useCallback, useEffect, useMemo, useState } from "react";
import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
import { Bar, BarChart, CartesianGrid, Cell, Area, AreaChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { ArrowLeft, ArrowUpRight, ClipboardCheck, CalendarRange, FileBarChart, FileDown, FileText, Eye, RefreshCw, Sparkles, Briefcase, Link2, Facebook, Instagram } from "lucide-react";
import { api } from "../api.js";
import ClientPortal from "./ClientPortal.jsx";
import MonthlyReport from "./MonthlyReport.jsx";
import BrandKit from "./BrandKit.jsx";
import LinkInBio from "./LinkInBio.jsx";
import Screenshots from "./Screenshots.jsx";
import { useAuth } from "../App.jsx";
import {
  Badge, Button, cx, Dialog, Empty, ErrorNote, fmt, fmtDate, fmtDateTime, Panel, Spinner, Stat, StatCell, StatRow, STATUS_TONE, Tabs, timeAgo,
} from "../ui.jsx";

const FORMAT = {
  reel: { label: "Reel", color: "#3b3778" },
  carousel: { label: "Carousel", color: "#fc6d45" },
  image: { label: "Image", color: "#a9afba" },
};
const formatOf = (p) => (p.media_product_type === "REELS" || p.media_type === "VIDEO" ? "reel" : p.media_type === "CAROUSEL_ALBUM" ? "carousel" : "image");

const RUNS = [
  { type: "account-audit", label: "Account audit", icon: ClipboardCheck, hint: "Internal + client audit, brand draft, PDFs" },
  { type: "weekly-plan", label: "Weekly content plan", icon: CalendarRange, hint: "Next week's posts and creative briefs" },
  { type: "weekly-report", label: "Weekly report", icon: FileBarChart, hint: "Last 7 days vs previous week, lessons" },
];

export default function Client() {
  const { slug } = useParams();
  const nav = useNavigate();
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [params] = useSearchParams();
  const [tab, setTab] = useState(params.get("tab") || "performance");
  const [runOpen, setRunOpen] = useState(false);
  const [linkOpen, setLinkOpen] = useState(false);
  const { isAdmin } = useAuth();

  const load = useCallback(() => api(`/api/clients/${slug}`).then(setData).catch(setError), [slug]);
  useEffect(() => { setData(null); load(); }, [load]);
  useEffect(() => {
    if (!data?.refreshing) return;
    const t = setInterval(load, 5000);
    return () => clearInterval(t);
  }, [data?.refreshing, load]);

  const refresh = async () => {
    setError(null);
    await api(`/api/clients/${slug}/refresh`, { method: "POST" }).catch(setError);
    load();
  };

  if (error && !data) return <ErrorNote error={error} />;
  if (!data) return <Spinner />;
  const { client, snapshot } = data;

  return (
    <div className="space-y-5">
      <Link to="/" className="inline-flex items-center gap-1 text-[12.5px] text-muted hover:text-ink">
        <ArrowLeft className="size-3.5" /> Clients
      </Link>

      <header className="flex items-start justify-between gap-4">
        <div className="min-w-0">
          <h1 className="text-[24px] font-extrabold truncate">{client.name}</h1>
          <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-1 text-[13px] text-muted">
            {client.igUsername && (
              <a className="hover:text-brand inline-flex items-center gap-0.5" href={`https://instagram.com/${client.igUsername}`} target="_blank" rel="noopener">
                @{client.igUsername} <ArrowUpRight className="size-3" />
              </a>
            )}
            {client.pageId && (
              <a className="hover:text-brand inline-flex items-center gap-0.5" href={`https://facebook.com/${client.pageId}`} target="_blank" rel="noopener">
                Facebook Page <ArrowUpRight className="size-3" />
              </a>
            )}
            {client.category && <span>{client.category}</span>}
            {client.odooProject && (
              <span className="inline-flex items-center gap-1"><Briefcase className="size-3" />{client.odooProject.name}</span>
            )}
          </div>
        </div>
        <div className="flex gap-2 shrink-0">
          {client.linked ? (
            <Button icon={RefreshCw} onClick={refresh} loading={data.refreshing}>
              {data.refreshing ? "Fetching from Meta" : "Refresh numbers"}
            </Button>
          ) : isAdmin && (
            <Button icon={Link2} onClick={() => setLinkOpen(true)}>Link an account</Button>
          )}
          <Button variant="primary" icon={Sparkles} onClick={() => setRunOpen(true)}>Run with Claude</Button>
        </div>
      </header>

      <ErrorNote error={error} />
      <SetupHints client={client} />

      <Tabs
        value={tab}
        onChange={setTab}
        tabs={[
          { value: "performance", label: "Performance" },
          { value: "docs", label: "Documents", count: data.docs.filter((d) => d.kind !== "setup").length },
          { value: "runs", label: "AI runs", count: data.jobs.length },
          { value: "shots", label: "Screenshots" },
          { value: "brand", label: "Brand kit" },
          { value: "bio", label: "Link in bio" },
          { value: "portal", label: "Client approval" },
        ]}
      />

      {tab === "performance" && (client.linked
        ? <Performance snapshot={snapshot} history={data.history} refreshing={data.refreshing} onRefresh={refresh} />
        : (
          <Panel>
            <Empty icon={Link2} title="Not linked to a Facebook Page or Instagram account" action={isAdmin && <Button variant="primary" icon={Link2} onClick={() => setLinkOpen(true)}>Link an account</Button>}>
              Numbers, publishing and the inbox need this client's Facebook Page or Instagram account. If it isn't in the list,
              assign it to the agency's system user in Meta Business Settings → System users → Assign assets, then check again.
            </Empty>
          </Panel>
        ))}
      {tab === "docs" && <div className="space-y-5"><MonthlyReport slug={slug} onBuilt={load} /><Documents slug={slug} docs={data.docs} reload={load} openPath={params.get("doc")} /></div>}
      {tab === "runs" && <ClientRuns jobs={data.jobs} />}
      {tab === "shots" && <Screenshots slug={slug} clientName={client.name} />}
      {tab === "brand" && <BrandKit slug={slug} />}
      {tab === "bio" && <LinkInBio slug={slug} />}
      {tab === "portal" && <ClientPortal slug={slug} clientName={client.name} />}

      <RunDialog open={runOpen} onClose={() => setRunOpen(false)} client={client} onStarted={(job) => nav(`/runs/${job.id}`)} />
      {linkOpen && <LinkPageDialog client={client} onClose={() => setLinkOpen(false)} onLinked={() => { setLinkOpen(false); load(); }} />}
    </div>
  );
}

/** Link an existing client folder to a Page the agency's Meta account manages. */
function LinkPageDialog({ client, onClose, onLinked }) {
  const [accounts, setAccounts] = useState(null);
  const [picked, setPicked] = useState(null);
  const [error, setError] = useState(null);
  const [busy, setBusy] = useState(false);

  const check = useCallback(() => {
    setAccounts(null); setError(null);
    api("/api/accounts/unlinked?refresh=1").then((r) => setAccounts(r.accounts)).catch(setError);
  }, []);
  useEffect(() => { check(); }, [check]);

  const link = async () => {
    setBusy(true); setError(null);
    try { await api(`/api/clients/${client.slug}/link-page`, { method: "POST", body: { accountId: picked.account_id } }); onLinked(); }
    catch (e) { setError(e); setBusy(false); }
  };

  return (
    <Dialog open onClose={onClose} title={`Link ${client.name} to an account`}
      footer={<><Button variant="ghost" onClick={onClose}>Cancel</Button><Button variant="primary" disabled={!picked} loading={busy} onClick={link}>Link and fetch numbers</Button></>}>
      <p className="text-muted text-[13px] mb-3">Facebook Pages and Instagram accounts the agency's Meta account manages that no client is linked to yet. The client keeps its name and files.</p>
      <ErrorNote error={error} className="mb-3" />
      <div className="flex justify-end mb-2"><Button size="sm" variant="ghost" icon={RefreshCw} onClick={check}>Check Meta again</Button></div>
      {!accounts && !error ? <Spinner label="Asking Meta…" /> : accounts?.length === 0 ? (
        <Empty title="No unlinked accounts">Assign {client.name}'s Page or Instagram account to the agency's system user in Meta Business Settings → System users → Assign assets, then press Check Meta again.</Empty>
      ) : (
        <ul className="border border-line rounded-lg divide-y divide-line max-h-[260px] overflow-y-auto">
          {accounts?.map((a) => (
            <li key={a.account_id}>
              <button type="button" onClick={() => setPicked(a)} className={cx("w-full text-left px-3.5 py-2.5 flex items-center gap-3", picked?.account_id === a.account_id ? "bg-brand-soft" : "hover:bg-canvas")}>
                <span className={cx("size-4 rounded-full border-2 shrink-0", picked?.account_id === a.account_id ? "border-brand bg-brand shadow-[inset_0_0_0_2px_white]" : "border-line-strong")} />
                <span className="min-w-0 flex-1">
                  <span className="block font-medium truncate">{a.page_name}</span>
                  <span className="flex gap-3 text-[12px] text-muted">
                    {a.page_id ? <span className="inline-flex items-center gap-1"><Facebook className="size-3" />{a.category || "Page"}</span> : <span>Instagram only · no Facebook Page</span>}
                    {a.instagram ? <span className="inline-flex items-center gap-1"><Instagram className="size-3" />@{a.instagram.username}</span> : <span>no Instagram linked</span>}
                  </span>
                </span>
              </button>
            </li>
          ))}
        </ul>
      )}
    </Dialog>
  );
}

function SetupHints({ client }) {
  const notes = [];
  if (client.setup.brand.draft) notes.push("brand.md is a DRAFT. Confirm it with the client.");
  if (client.setup.goals.placeholders > 3) notes.push("goals.md still has template gaps (approver, KPIs, retainer).");
  if (client.setup.constraints.placeholders > 3) notes.push("constraints.md is mostly empty (approver, claims, regulated rules).");
  if (!notes.length) return null;
  return (
    <div className="rounded-lg border border-[#f1dcb8] bg-warn-soft px-4 py-2.5 text-[13px] text-[#7a4f10]">
      <span className="font-semibold">Setup gaps · </span>
      {notes.join(" ")}
    </div>
  );
}

// ---------------------------------------------------------------- performance
function Performance({ snapshot, history, refreshing, onRefresh }) {
  const ig = snapshot?.ig;
  const fb = snapshot?.fb;
  const posts = ig?.posts || [];

  const perPost = useMemo(
    () =>
      [...posts]
        .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp))
        .map((p) => ({ date: fmtDate(p.timestamp), reach: p.insights?.reach ?? 0, format: formatOf(p), caption: (p.caption || "").split("\n")[0].slice(0, 70) })),
    [posts]
  );

  if (!snapshot) {
    return (
      <Panel>
        <Empty icon={RefreshCw} title={refreshing ? "Fetching numbers from Meta…" : "No numbers yet"} action={!refreshing && <Button variant="primary" onClick={onRefresh}>Fetch now</Button>}>
          The first fetch pulls the profile, 28-day totals and insights for the last 20 posts. It takes about a minute.
        </Empty>
      </Panel>
    );
  }

  const d = ig?.derived;
  const t = ig?.totals || {};
  const followersTrend = history.filter((h) => h.igFollowers != null);
  const followerDelta = followersTrend.length > 1 ? followersTrend.at(-1).igFollowers - followersTrend[0].igFollowers : null;

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between text-[12.5px] text-muted">
        <span>Fetched {timeAgo(snapshot.fetchedAt)} · totals cover the last 28 days</span>
        {snapshot.errors?.length > 0 && <span className="text-bad">{snapshot.errors.join(" · ")}</span>}
      </div>

      {ig && (
        <StatRow className="grid-cols-5">
          <StatCell>
            <Stat label="IG followers" value={fmt(ig.profile.followers_count)}
              note={followerDelta != null ? `${followerDelta >= 0 ? "+" : ""}${followerDelta} since ${fmtDate(followersTrend[0].date)}` : `follows ${fmt(ig.profile.follows_count)}`} />
          </StatCell>
          <StatCell><Stat label="Accounts reached" value={fmt(t.reach)} note={ig.profile.followers_count ? `${(t.reach / ig.profile.followers_count).toFixed(1)}× follower count` : null} /></StatCell>
          <StatCell><Stat label="Interactions" value={fmt(t.total_interactions)} note={`${fmt(t.likes)} likes · ${fmt(t.comments)} comments`} /></StatCell>
          <StatCell><Stat label="Profile link taps" value={fmt(t.profile_links_taps)} tone={t.profile_links_taps === 0 ? "bad" : null} note={t.profile_links_taps === 0 ? "nobody reached the website" : "to website / booking"} /></StatCell>
          <StatCell><Stat label="Saves · shares" value={`${fmt(t.saves)} · ${fmt(t.shares)}`} note="signals content worth keeping" /></StatCell>
        </StatRow>
      )}

      <div className="grid grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)] gap-5">
        <Panel title="Reach per post" subtitle="Last 20 Instagram posts, oldest to newest" bodyClass="px-2 pt-3 pb-2">
          {perPost.length ? (
            <>
              <div className="h-[220px]">
                <ResponsiveContainer>
                  <BarChart data={perPost} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>
                    <CartesianGrid vertical={false} stroke="#eef0f3" />
                    <XAxis dataKey="date" tick={{ fontSize: 11, fill: "#8a8f99" }} tickLine={false} axisLine={{ stroke: "#e4e7ec" }} interval="preserveStartEnd" minTickGap={18} />
                    <YAxis tick={{ fontSize: 11, fill: "#8a8f99" }} tickLine={false} axisLine={false} width={48} allowDecimals={false} tickFormatter={(v) => (v >= 10000 ? `${Math.round(v / 1000)}k` : v)} />
                    <Tooltip cursor={{ fill: "#f3f6fa" }} content={<PostTip />} />
                    <Bar dataKey="reach" radius={[3, 3, 0, 0]} maxBarSize={26} isAnimationActive={false}>
                      {perPost.map((p, i) => <Cell key={i} fill={FORMAT[p.format].color} />)}
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
              </div>
              <div className="flex gap-4 px-3 pt-1 text-[12px] text-muted">
                {Object.values(FORMAT).map((f) => (
                  <span key={f.label} className="inline-flex items-center gap-1.5"><span className="size-2.5 rounded-sm" style={{ background: f.color }} />{f.label}</span>
                ))}
              </div>
            </>
          ) : <Empty title="No posts yet" />}
        </Panel>

        <Panel title="What's working" subtitle="Average reach by format (posts older than 48 h)" bodyClass="p-4 space-y-4">
          {d && (
            <>
              <FormatBars d={d} />
              <div className="grid grid-cols-3 gap-3 pt-3 border-t border-line">
                <Stat label="Posts / 28d" value={fmt(d.postsLast28)} tone={d.postsLast28 < 8 ? "warn" : null} note="target 16+" />
                <Stat label="Last post" value={d.daysSinceLastPost == null ? "—" : `${d.daysSinceLastPost}d`} tone={d.daysSinceLastPost >= 7 ? "bad" : null} note="ago" />
                <Stat label="Longest gap" value={d.longestGapDays == null ? "—" : `${d.longestGapDays}d`} tone={d.longestGapDays > 7 ? "warn" : null} note="in last 20" />
              </div>
            </>
          )}
        </Panel>
      </div>

      {ig?.dailyReach?.length > 1 && (
        <Panel title="Accounts reached per day" subtitle="Instagram, last 30 days" bodyClass="px-2 pt-3 pb-2">
          <div className="h-[180px]">
            <ResponsiveContainer>
              <AreaChart data={ig.dailyReach.map((x) => ({ ...x, label: fmtDate(x.date) }))} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>
                <defs>
                  <linearGradient id="reachFill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#3b3778" stopOpacity={0.18} />
                    <stop offset="100%" stopColor="#3b3778" stopOpacity={0} />
                  </linearGradient>
                </defs>
                <CartesianGrid vertical={false} stroke="#eef0f3" />
                <XAxis dataKey="label" tick={{ fontSize: 11, fill: "#8a8f99" }} tickLine={false} axisLine={{ stroke: "#e4e7ec" }} minTickGap={24} />
                <YAxis tick={{ fontSize: 11, fill: "#8a8f99" }} tickLine={false} axisLine={false} width={48} allowDecimals={false} tickFormatter={(v) => (v >= 10000 ? `${Math.round(v / 1000)}k` : v)} />
                <Tooltip contentStyle={{ fontSize: 12, borderRadius: 8, border: "1px solid #e4e7ec" }} formatter={(v) => [fmt(v), "Reached"]} />
                <Area type="monotone" dataKey="value" stroke="#3b3778" strokeWidth={2} fill="url(#reachFill)" isAnimationActive={false} />
              </AreaChart>
            </ResponsiveContainer>
          </div>
        </Panel>
      )}

      {fb && (
        <StatRow className="grid-cols-4">
          <StatCell><Stat label="FB followers" value={fmt(fb.page.followers_count)} /></StatCell>
          <StatCell><Stat label="Unique viewers" value={fmt(fb.totals.page_total_media_view_unique)} note="saw a post or Reel" /></StatCell>
          <StatCell><Stat label="Post engagements" value={fmt(fb.totals.page_post_engagements)} tone={fb.totals.page_post_engagements <= 1 ? "warn" : null} /></StatCell>
          <StatCell><Stat label="Page views" value={fmt(fb.totals.page_views_total)} /></StatCell>
        </StatRow>
      )}

      <Panel title="Recent Instagram posts" bodyClass="overflow-x-auto">
        {posts.length ? (
          <table className="tbl">
            <thead>
              <tr>
                <th>Post</th><th>Format</th><th>Published</th>
                <th className="text-right">Reached</th><th className="text-right">Likes</th><th className="text-right">Saves</th><th className="text-right">Shares</th><th />
              </tr>
            </thead>
            <tbody>
              {posts.map((p) => {
                const f = FORMAT[formatOf(p)];
                return (
                  <tr key={p.id}>
                    <td className="max-w-[380px]"><div className="truncate text-ink">{(p.caption || "(no caption)").split("\n")[0]}</div></td>
                    <td><span className="inline-flex items-center gap-1.5 text-ink-2"><span className="size-2 rounded-sm" style={{ background: f.color }} />{f.label}</span></td>
                    <td className="text-ink-2 whitespace-nowrap">{fmtDate(p.timestamp)}</td>
                    <td className="text-right num font-medium">{fmt(p.insights?.reach)}</td>
                    <td className="text-right num">{fmt(p.like_count)}</td>
                    <td className="text-right num">{fmt(p.insights?.saved)}</td>
                    <td className="text-right num">{fmt(p.insights?.shares)}</td>
                    <td className="text-right">
                      <a href={p.permalink} target="_blank" rel="noopener" className="text-muted hover:text-brand inline-flex" aria-label="Open on Instagram"><ArrowUpRight className="size-4" /></a>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        ) : <Empty title="No Instagram posts" />}
      </Panel>
    </div>
  );
}

function PostTip({ active, payload }) {
  if (!active || !payload?.length) return null;
  const p = payload[0].payload;
  return (
    <div className="bg-white border border-line rounded-lg shadow-sm px-3 py-2 text-[12px] max-w-[240px]">
      <div className="font-semibold text-ink">{fmt(p.reach)} reached · {FORMAT[p.format].label}</div>
      <div className="text-muted">{p.date}</div>
      {p.caption && <div className="text-ink-2 mt-1">{p.caption}</div>}
    </div>
  );
}

function FormatBars({ d }) {
  const rows = [
    ["reel", d.formatMix.reels, d.avgReach.reels],
    ["carousel", d.formatMix.carousels, d.avgReach.carousels],
    ["image", d.formatMix.images, d.avgReach.images],
  ];
  const max = Math.max(...rows.map((r) => r[2] || 0), 1);
  return (
    <div className="space-y-3">
      {rows.map(([k, count, reach]) => (
        <div key={k}>
          <div className="flex justify-between text-[12.5px]">
            <span className="text-ink-2">{FORMAT[k].label}s <span className="text-faint">· {count} posted</span></span>
            <span className="num font-semibold text-ink">{reach == null ? "—" : fmt(reach)}</span>
          </div>
          <div className="h-2 rounded-full bg-[#eef0f3] mt-1.5 overflow-hidden">
            <div className="h-full rounded-full" style={{ width: `${((reach || 0) / max) * 100}%`, background: FORMAT[k].color }} />
          </div>
        </div>
      ))}
    </div>
  );
}

// ---------------------------------------------------------------- documents
const KIND_LABEL = { monthly: "Monthly reports", audit: "Audits", competitors: "Competitor analysis", trends: "Trend scans", report: "Weekly reports", calendar: "Content calendars", "profile-check": "Profile checks", setup: "Client setup files" };

function Documents({ slug, docs, reload, openPath }) {
  const [preview, setPreview] = useState(null);
  const [busy, setBusy] = useState(null);
  const [error, setError] = useState(null);

  const open = async (doc) => {
    setPreview({ doc, loading: true });
    try {
      setPreview({ doc, ...(await api(`/api/clients/${slug}/doc?path=${encodeURIComponent(doc.path)}`)) });
    } catch (e) {
      setPreview(null);
      setError(e);
    }
  };
  // Deep link from other pages (e.g. Competitors → "Open report"): ?tab=docs&doc=<path>
  useEffect(() => {
    const doc = openPath && docs.find((d) => d.path === openPath);
    if (doc) open(doc);
  }, [openPath]); // eslint-disable-line react-hooks/exhaustive-deps
  const exportPdf = async (doc) => {
    setBusy(doc.path);
    setError(null);
    try {
      const r = await api(`/api/clients/${slug}/doc/pdf`, { method: "POST", body: { path: doc.path } });
      window.open(fileUrl(slug, r.pdf), "_blank");
      reload();
    } catch (e) {
      setError(e);
    } finally {
      setBusy(null);
    }
  };

  const groups = Object.keys(KIND_LABEL).map((k) => [k, docs.filter((d) => d.kind === k)]).filter(([, list]) => list.length);
  if (!docs.length) return <Panel><Empty icon={FileText} title="No documents yet">Run an account audit to create the first ones.</Empty></Panel>;

  return (
    <div className="space-y-5">
      <ErrorNote error={error} />
      {groups.map(([kind, list]) => (
        <Panel key={kind} title={KIND_LABEL[kind]}>
          <table className="tbl">
            <tbody>
              {list.map((d) => (
                <tr key={d.path}>
                  <td className="w-full">
                    <button onClick={() => open(d)} className="text-left">
                      <span className="font-medium text-ink hover:text-brand">{d.title}</span>
                      <span className="block text-[12px] text-muted">Updated {fmtDateTime(d.updatedAt)}</span>
                    </button>
                  </td>
                  <td>
                    {d.audience === "client" && <Badge tone="ok">For client</Badge>}
                    {d.audience === "internal" && <Badge tone="bad">Internal only</Badge>}
                  </td>
                  <td className="whitespace-nowrap">
                    {d.pdf ? (
                      <span className={cx("text-[12px]", d.pdf.stale ? "text-warn" : "text-muted")}>{d.pdf.stale ? "PDF out of date" : "PDF ready"}</span>
                    ) : <span className="text-[12px] text-faint">no PDF</span>}
                  </td>
                  <td>
                    <div className="flex gap-1.5 justify-end">
                      <Button size="sm" variant="ghost" icon={Eye} onClick={() => open(d)}>Preview</Button>
                      {d.pdf && !d.pdf.stale ? (
                        <a href={fileUrl(slug, d.path.replace(/\.md$/, ".pdf"))} target="_blank" rel="noopener">
                          <Button size="sm" icon={FileDown}>Open PDF</Button>
                        </a>
                      ) : (
                        kind !== "setup" && <Button size="sm" icon={FileDown} loading={busy === d.path} onClick={() => exportPdf(d)}>Export PDF</Button>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </Panel>
      ))}

      <Dialog
        open={Boolean(preview)}
        onClose={() => setPreview(null)}
        title={preview?.doc.title}
        wide
        footer={
          preview && preview.doc.kind !== "setup" && (
            <>
              <a href={fileUrl(slug, preview.doc.path, true)}><Button>Download .md</Button></a>
              <Button variant="primary" icon={FileDown} loading={busy === preview.doc.path} onClick={() => exportPdf(preview.doc)}>Export branded PDF</Button>
            </>
          )
        }
      >
        {preview?.loading ? <Spinner /> : preview?.page ? (
          <iframe title={preview.doc.title} srcDoc={preview.page} sandbox="allow-popups allow-popups-to-escape-sandbox" className="w-full h-[72vh] rounded-lg border border-line bg-white" />
        ) : preview && (
          <>
            {preview.meta?.client && (
              <div className="rounded-lg bg-[#232327] text-white px-5 py-4 mb-4">
                <div className="text-[11px] font-bold tracking-[0.12em] uppercase text-sky">{preview.meta.report}</div>
                <div className="font-display text-[20px] font-extrabold mt-1">{preview.meta.client}</div>
                <div className="text-[12.5px] text-[#c9ccd3] mt-1">{[preview.meta.period, preview.meta.accounts].filter(Boolean).join(" · ")}</div>
              </div>
            )}
            {preview.meta?.kpis?.length > 0 && (
              <div className="grid grid-cols-4 gap-2.5 mb-5">
                {preview.meta.kpis.map((k, i) => (
                  <div key={i} className="border border-line rounded-lg px-3 py-2.5 border-t-[3px] border-t-brand">
                    <div className="font-display text-[19px] font-extrabold num">{k.value}</div>
                    <div className="text-[12px] font-medium text-ink">{k.label}</div>
                    {k.note && <div className="text-[11.5px] text-muted">{k.note}</div>}
                  </div>
                ))}
              </div>
            )}
            <article className="doc" dangerouslySetInnerHTML={{ __html: preview.html }} />
          </>
        )}
      </Dialog>
    </div>
  );
}

const fileUrl = (slug, path, download) => `/api/clients/${slug}/file?path=${encodeURIComponent(path)}${download ? "&download=1" : ""}`;

// ---------------------------------------------------------------- runs
function ClientRuns({ jobs }) {
  const nav = useNavigate();
  if (!jobs.length) return <Panel><Empty icon={Sparkles} title="No AI runs for this client yet">Use “Run with Claude” to start an audit, weekly plan or report.</Empty></Panel>;
  return (
    <Panel bodyClass="overflow-x-auto">
      <table className="tbl">
        <thead><tr><th>Run</th><th>Status</th><th>Started</th><th>By</th><th className="text-right">Cost</th></tr></thead>
        <tbody>
          {jobs.map((j) => (
            <tr key={j.id} className="clickable" onClick={() => nav(`/runs/${j.id}`)}>
              <td className="font-medium">{j.label}</td>
              <td><Badge tone={STATUS_TONE[j.status]} dot>{j.status}</Badge></td>
              <td className="text-ink-2">{fmtDateTime(j.startedAt || j.createdAt)}</td>
              <td className="text-ink-2">{j.createdBy}</td>
              <td className="text-right num text-ink-2">{j.costUsd != null ? `$${j.costUsd.toFixed(2)}` : "—"}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Panel>
  );
}

export function RunDialog({ open, onClose, client, onStarted }) {
  const [type, setType] = useState("account-audit");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState(null);
  const start = async () => {
    setBusy(true);
    setError(null);
    try {
      const r = await api("/api/jobs", { method: "POST", body: { type, slug: client.slug } });
      onClose();
      onStarted(r.job);
    } catch (e) {
      setError(e);
    } finally {
      setBusy(false);
    }
  };
  return (
    <Dialog
      open={open}
      onClose={onClose}
      title={`Run with Claude · ${client.name}`}
      footer={<><Button onClick={onClose}>Cancel</Button><Button variant="primary" icon={Sparkles} loading={busy} onClick={start}>Start run</Button></>}
    >
      <div className="space-y-2">
        {RUNS.map((r) => (
          <button
            key={r.type}
            onClick={() => setType(r.type)}
            className={cx("w-full flex items-start gap-3 text-left rounded-lg border px-3.5 py-3 transition-colors", type === r.type ? "border-brand bg-brand-soft" : "border-line hover:bg-[#f8fafc]")}
          >
            <r.icon className={cx("size-4 mt-0.5", type === r.type ? "text-brand" : "text-muted")} strokeWidth={2} />
            <span>
              <span className="block font-medium">{r.label}</span>
              <span className="block text-[12.5px] text-muted">{r.hint}</span>
            </span>
          </button>
        ))}
      </div>
      <p className="text-[12.5px] text-muted mt-4">
        Claude reads the client's brand files, playbooks and live numbers, writes the documents into the client's folder and exports the PDFs.
        It never publishes or changes Odoo. Runs go one at a time and usually take 3–10 minutes.
      </p>
      <ErrorNote error={error} className="mt-3" />
    </Dialog>
  );
}