// WORTH platform sweep — Screen 3: Onboarding · FastAI document upload.
// LIGHT-LOCKED. Phone/tablet-portrait = single column; desktop = two-pane
// (upload + progress on the left, the live-mapped holdings on the right).

const OB_ASSETS = [
  { icon: "briefcase", tint: "var(--chart-1)", name: "Public equities", context: "Schwab · brokerage", value: "£820,000", badges: [{ role: "source", label: "Verified" }] },
  { icon: "trending-up", tint: "var(--coral)", name: "Employer stock", context: "Carta · private", value: "£702,000", badges: [{ role: "est", label: "~Estimate" }] },
  { icon: "landmark", tint: "var(--chart-4)", name: "Pension (SIPP)", context: "Aviva", value: "£430,000", badges: [{ role: "source", label: "Verified" }] },
  { icon: "home", tint: "var(--gold)", name: "Primary residence", context: "Estimated value", value: "£540,000", badges: [{ role: "est", label: "~Estimate" }] },
  { icon: "wallet", tint: "var(--chart-6)", name: "Cash & equivalents", context: "3 accounts", value: "£148,000", badges: [{ role: "verified", label: "Live" }] },
];

function ObAssetList({ items = OB_ASSETS }) {
  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.context} value={a.value} badges={a.badges} />
      ))}
    </div>
  );
}

function LongCol({ size = 124 }) {
  const { DonutProgress } = window.WORTHDesignSystem_70d33b;
  return <DonutProgress size={size} thickness={11} progress={0.62} color="var(--gold)" label="62%" sublabel="mapped" />;
}

function ObHeadline({ small = false }) {
  return (
    <h1 style={{ fontFamily: "var(--font-display)", fontSize: small ? 24 : 30, fontWeight: 700, letterSpacing: "-0.01em", lineHeight: 1.08, color: "var(--ink)", margin: 0 }}>
      Reading your statements.
    </h1>
  );
}

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

  if (device === "desktop") {
    return (
      <DesktopFrame theme="light" title="WORTH — Onboarding">
        <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
          {/* Left: upload + progress */}
          <div style={{ width: 460, flexShrink: 0, borderRight: "1px solid var(--line)", padding: "40px 40px", display: "flex", flexDirection: "column", gap: 24, background: "var(--panel-soft)" }}>
            <Kicker>Step 2 of 3 · FastAI</Kicker>
            <ObHeadline />
            <Dropzone state="busy" />
            <div style={{ display: "flex", alignItems: "center", gap: 20, marginTop: 4 }}>
              <LongCol size={132} />
              <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 700, color: "var(--ink)" }}>5 of 8 sources</div>
            </div>
          </div>
          {/* Right: live mapped holdings */}
          <div style={{ flex: 1, minWidth: 0, padding: "36px 40px", display: "flex", flexDirection: "column", gap: 18 }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <Kicker>Mapped so far</Kicker>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>£2,640,000</span>
            </div>
            <ObAssetList />
            <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 14 }}>
              <AccuracyMeter value={0.62} chip={<Badge role="est">~Estimate</Badge>} />
              <div style={{ display: "flex", gap: 10, justifyContent: "flex-end" }}>
                <Button variant="ghost">Add manually</Button>
                <Button>Continue</Button>
              </div>
            </div>
          </div>
        </div>
      </DesktopFrame>
    );
  }

  if (device === "tabletP") {
    return (
      <TabletFrame os={os} orientation="portrait" theme="light">
        <AppHeader brand kicker="Step 2 of 3" title="Map your wealth" divider right={<Badge role="L1">FastAI</Badge>} />
        <div style={{ flex: 1, minHeight: 0, padding: "26px 64px", display: "flex", flexDirection: "column", gap: 22, overflow: "hidden" }}>
          <ObHeadline />
          <Dropzone state="busy" />
          <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
            <LongCol size={120} />
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 19, fontWeight: 700, color: "var(--ink)" }}>5 of 8 sources read</div>
              <p style={{ fontFamily: "var(--font-text)", fontSize: 13.5, color: "var(--muted)", margin: "5px 0 0", lineHeight: 1.5 }}>Carta still importing.</p>
            </div>
          </div>
          <ObAssetList items={OB_ASSETS.slice(0, 4)} />
          <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 14 }}>
            <AccuracyMeter value={0.62} chip={<Badge role="est">~Estimate</Badge>} />
            <Button full>Continue</Button>
          </div>
        </div>
      </TabletFrame>
    );
  }

  // phone
  return (
    <PhoneFrame os={os} theme="light">
      <AppHeader brand kicker="Step 2 of 3" title="Map your wealth" divider right={<Badge role="L1">FastAI</Badge>} />
      <div style={{ flex: 1, minHeight: 0, padding: "14px var(--gutter)", display: "flex", flexDirection: "column", gap: 14, overflow: "hidden" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <LongCol size={96} />
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, letterSpacing: "-0.01em", lineHeight: 1.12, color: "var(--ink)", margin: 0 }}>Reading your statements.</h1>
        </div>
        <Dropzone state="busy" />
        <ObAssetList items={OB_ASSETS.slice(0, 3)} />
        <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 12 }}>
          <AccuracyMeter value={0.62} chip={<Badge role="est">~Est</Badge>} />
          <Button full>Continue</Button>
        </div>
      </div>
    </PhoneFrame>
  );
}

Object.assign(window, { OnboardingScreen, ObAssetList });