// WORTH platform sweep — Screen 4: Wealth map / allocation overview.
// The dashboard. Desktop IA = left nav rail + workspace + X-ray insight rail.
// Tablet landscape = adaptive two-pane. Phone = single column + platform nav.
// Shown light + dark (post-onboarding, so dark mode is allowed).

const WM_ALLOC = [
  { name: "Employer stock", custodian: "Carta · private", value: 702000, pct: 30, color: "var(--chart-3)", icon: "trending-up", tint: "var(--coral)", badges: [{ role: "manual", label: "30% of wealth" }] },
  { name: "Public equities", custodian: "Schwab", value: 605000, pct: 26, color: "var(--chart-1)", icon: "briefcase", tint: "var(--chart-1)", badges: [{ role: "source", label: "Verified" }] },
  { name: "Primary residence", custodian: "Estimated", value: 455000, pct: 19, color: "var(--chart-2)", icon: "home", tint: "var(--gold)", badges: [{ role: "est", label: "~Estimate" }] },
  { name: "Pension (SIPP)", custodian: "Aviva", value: 430000, pct: 18, color: "var(--chart-4)", icon: "landmark", tint: "var(--chart-4)", badges: [{ role: "source", label: "Verified" }] },
  { name: "Cash & equivalents", custodian: "3 accounts", value: 148000, pct: 6, color: "var(--chart-6)", icon: "wallet", tint: "var(--chart-6)", badges: [{ role: "verified", label: "Live" }] },
];
const fmtGBP = (n) => "£" + n.toLocaleString();

function AllocationDonut({ size = 188 }) {
  const { DonutProgress } = window.WORTHDesignSystem_70d33b;
  return (
    <DonutProgress
      size={size} thickness={Math.round(size / 7)}
      segments={WM_ALLOC.map((a) => ({ value: a.value, color: a.color }))}
      label="£2.34M"
      sublabel="net worth"
    />
  );
}

function AllocationLegend({ compact = false }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: compact ? 7 : 9, minWidth: 0 }}>
      {WM_ALLOC.map((a, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <span style={{ width: 9, height: 9, borderRadius: 2, background: a.color, flexShrink: 0 }} />
          <span style={{ fontFamily: "var(--font-text)", fontSize: 13, color: "var(--ink-soft)", fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.name}</span>
          <span style={{ marginLeft: "auto", fontFamily: "var(--font-text)", fontSize: 12.5, color: "var(--muted)", fontVariantNumeric: "tabular-nums" }}>{a.pct}%</span>
        </div>
      ))}
    </div>
  );
}

function AssetTable({ items = WM_ALLOC, dense = false }) {
  const { AssetRow } = window.WORTHDesignSystem_70d33b;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {items.map((a, i) => (
        <AssetRow key={i} icon={<Icon name={a.icon} size={18} />} tint={a.tint} name={a.name} context={a.custodian} value={fmtGBP(a.value)} badges={a.badges} chevron onClick={() => {}} />
      ))}
    </div>
  );
}

function XrayInsightCard({ compact = false }) {
  const { ExposureBar, Button } = window.WORTHDesignSystem_70d33b;
  return (
    <div style={{ border: "1px solid var(--teal-soft)", background: "var(--teal-soft)", borderRadius: 16, padding: compact ? 16 : 18, display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
        <Icon name="sparkles" size={15} color="var(--teal-ink)" />
        <span style={{ fontFamily: "var(--font-text)", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--teal-ink)" }}>X-ray</span>
      </div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: compact ? 18 : 20, fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.01em", color: "var(--ink)" }}>
        One bet, made twice.
      </div>
      <p style={{ fontFamily: "var(--font-text)", fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-soft)", margin: 0 }}>
        £702k of employer stock. The same bet as your salary.
      </p>
      <ExposureBar night={false} height={12} legend={false}
        segments={[
          { frac: 0.30, color: "var(--coral)" },
          { frac: 0.70, color: "var(--stone)" },
        ]} />
      <Button variant="intelligence" full>De-risk this</Button>
    </div>
  );
}

function WMTopBar({ title = "Wealth map" }) {
  const { Button, Badge } = window.WORTHDesignSystem_70d33b;
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16 }}>
      <div>
        <Kicker style={{ marginBottom: 6 }}>Net worth · verified today</Kicker>
        <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
          <span style={{ fontFamily: "var(--font-display-hero)", fontSize: 42, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1, color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>£2,340,000</span>
          <span style={{ fontFamily: "var(--font-text)", fontSize: 13.5, color: "var(--muted)" }}>· £605k reachable now</span>
        </div>
      </div>
      <div style={{ display: "flex", gap: 10 }}>
        <Button variant="secondary" icon={<Icon name="search" size={16} color="var(--ink-soft)" />}>Filter</Button>
        <Button icon={<Icon name="plus" size={16} color="var(--charcoal-fg)" />}>Add holding</Button>
      </div>
    </div>
  );
}

function WealthMapScreen({ device = "phone", os = "ios", theme = "light" }) {
  const { AppHeader, Badge, AccuracyMeter, Button } = window.WORTHDesignSystem_70d33b;

  if (device === "desktop") {
    return (
      <DesktopFrame theme={theme} title="WORTH — Wealth map">
        <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
          <DesktopSidebar active="wealth" theme={theme} />
          {/* workspace */}
          <div style={{ flex: 1, minWidth: 0, padding: "30px 32px", display: "flex", flexDirection: "column", gap: 22, overflow: "hidden" }}>
            <WMTopBar />
            <div style={{ display: "flex", gap: 28, alignItems: "center", padding: "4px 0" }}>
              <AllocationDonut size={176} />
              <div style={{ flex: 1, minWidth: 0 }}><AllocationLegend /></div>
            </div>
            <div style={{ borderTop: "1px solid var(--line)", paddingTop: 18, flex: 1, minHeight: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              <Kicker>Holdings</Kicker>
              <AssetTable />
            </div>
          </div>
          {/* insight rail */}
          <div style={{ width: 312, flexShrink: 0, borderLeft: "1px solid var(--line)", background: "var(--panel)", padding: "28px 22px", display: "flex", flexDirection: "column", gap: 18, overflow: "hidden" }}>
            <Kicker>What your number hides</Kicker>
            <XrayInsightCard />
            <AccuracyMeter value={0.78} hint="Add 2 estimates to reach a verified read." chip={<Badge role="source">L2</Badge>} />
          </div>
        </div>
      </DesktopFrame>
    );
  }

  if (device === "tabletL") {
    return (
      <TabletFrame os={os} orientation="landscape" theme={theme}>
        <AppHeader brand title="Wealth map" divider right={<Badge role="verified">Verified</Badge>} />
        <div style={{ flex: 1, minHeight: 0, display: "flex", overflow: "hidden" }}>
          {/* left: allocation + insight */}
          <div style={{ width: 400, flexShrink: 0, borderRight: "1px solid var(--line)", padding: "24px 26px", display: "flex", flexDirection: "column", gap: 20, overflow: "hidden" }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              <Kicker>Net worth</Kicker>
              <span style={{ fontFamily: "var(--font-display-hero)", fontSize: 36, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>£2,340,000</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
              <AllocationDonut size={140} />
              <div style={{ flex: 1, minWidth: 0 }}><AllocationLegend compact /></div>
            </div>
            <XrayInsightCard compact />
          </div>
          {/* right: holdings */}
          <div style={{ flex: 1, minWidth: 0, padding: "24px 26px", display: "flex", flexDirection: "column", gap: 14, overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <Kicker>Holdings</Kicker>
              <Button size="sm" icon={<Icon name="plus" size={15} color="var(--charcoal-fg)" />}>Add</Button>
            </div>
            <AssetTable />
            <AccuracyMeter value={0.78} hint="Add 2 estimates to reach a verified read." chip={<Badge role="source">L2</Badge>} />
          </div>
        </div>
      </TabletFrame>
    );
  }

  // phone
  const isAndroid = os === "android";
  return (
    <PhoneFrame os={os} theme={theme}>
      <AppHeader brand title="Wealth map" divider right={<Badge role="verified">Verified</Badge>} />
      <div style={{ flex: 1, minHeight: 0, padding: "12px var(--gutter) 8px", display: "flex", flexDirection: "column", gap: 13, overflow: "hidden" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
          <Kicker>Net worth · verified</Kicker>
          <span style={{ fontFamily: "var(--font-display-hero)", fontSize: 34, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>£2,340,000</span>
          <span style={{ fontFamily: "var(--font-text)", fontSize: 13, color: "var(--muted)" }}>£605k reachable now.</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <AllocationDonut size={112} />
          <div style={{ flex: 1, minWidth: 0 }}><AllocationLegend compact /></div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          <AssetTable items={WM_ALLOC.slice(0, 2)} />
        </div>
        {/* Compact X-ray strip — solid surface so it never bleeds in dark mode */}
        <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 11, padding: "12px 14px", borderRadius: 14, background: "var(--panel-soft)", border: "1px solid var(--line)" }}>
          <span style={{ width: 34, height: 34, borderRadius: 10, flexShrink: 0, display: "grid", placeItems: "center", background: "var(--teal-soft)", color: "var(--teal-ink)" }}>
            <Icon name="sparkles" size={17} />
          </span>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-text)", fontSize: 11, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--teal-ink)" }}>X-ray</div>
            <div style={{ fontFamily: "var(--font-text)", fontSize: 13, fontWeight: 600, color: "var(--ink)", lineHeight: 1.3 }}>One bet, made twice.</div>
          </div>
          <Icon name="chevron-right" size={18} color="var(--faint)" style={{ marginLeft: "auto" }} />
        </div>
      </div>
      {isAndroid ? <AndroidNavBar active="wealth" /> : <IOSTabBar active="wealth" />}
      {isAndroid && <AndroidFAB label="Add" bottom={92} />}
    </PhoneFrame>
  );
}

Object.assign(window, { WealthMapScreen, AllocationDonut, AssetTable, XrayInsightCard, WM_ALLOC, fmtGBP });