// WORTH platform sweep — Screen 6: Asset CRUD (add / edit a holding).
// Platform sheet conventions: iOS bottom sheet, Android full-screen dialog,
// desktop centered modal — each over a dimmed wealth-map backdrop. Light+dark.

function CrudField({ label, children }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ display: "block", fontFamily: "var(--font-text)", fontSize: 12, fontWeight: 650, color: "var(--ink-soft)", marginBottom: 5 }}>{label}</span>
      {children}
    </label>
  );
}

function SelectRow({ icon, tint, value, sub }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 11, background: "var(--panel)", border: "1.5px solid var(--line)", borderRadius: 11, padding: "9px 12px", minHeight: "var(--touch)" }}>
      <span style={{ width: 32, height: 32, borderRadius: 9, display: "grid", placeItems: "center", background: `color-mix(in srgb, ${tint} 13%, transparent)`, color: tint, flexShrink: 0 }}>
        <Icon name={icon} size={17} />
      </span>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: "var(--font-text)", fontSize: 14, fontWeight: 600, color: "var(--ink)" }}>{value}</div>
        {sub && <div style={{ fontFamily: "var(--font-text)", fontSize: 11.5, color: "var(--muted)" }}>{sub}</div>}
      </div>
      <Icon name="chevron-down" size={16} color="var(--faint)" style={{ marginLeft: "auto" }} />
    </div>
  );
}

function CrudForm({ onClose, compactGap = false }) {
  const { Input, Button, Badge } = window.WORTHDesignSystem_70d33b;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: compactGap ? 14 : 16 }}>
      <CrudField label="Holding name">
        <Input placeholder="e.g. Employer stock" defaultValue="Employer stock (Carta)" />
      </CrudField>
      <CrudField label="Asset class">
        <SelectRow icon="trending-up" tint="var(--coral)" value="Private equity comp" sub="RSUs & options" />
      </CrudField>
      <div style={{ display: "flex", gap: 12 }}>
        <div style={{ flex: 1 }}>
          <CrudField label="Value">
            <Input prefix="£" defaultValue="702,000" inputStyle={{ fontVariantNumeric: "tabular-nums" }} />
          </CrudField>
        </div>
        <div style={{ width: 132, flexShrink: 0 }}>
          <CrudField label="Currency">
            <SelectRow icon="globe" tint="var(--chart-1)" value="GBP" />
          </CrudField>
        </div>
      </div>
      <CrudField label="Provenance">
        <div style={{ display: "flex", gap: 8 }}>
          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 7, padding: "10px", borderRadius: 11, border: "1.5px solid var(--ink)", boxShadow: "var(--ring)", background: "var(--panel)", fontFamily: "var(--font-text)", fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>
            <Icon name="pencil" size={15} color="var(--gold)" /> Estimate
          </div>
          <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 7, padding: "10px", borderRadius: 11, border: "1.5px solid var(--line)", background: "var(--panel)", fontFamily: "var(--font-text)", fontSize: 13, fontWeight: 500, color: "var(--muted)" }}>
            <Icon name="shield-check" size={15} color="var(--faint)" /> Source-verified
          </div>
        </div>
      </CrudField>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 9, padding: "11px 13px", borderRadius: 12, background: "var(--gold-soft)", border: "1px solid rgba(195,154,61,0.25)" }}>
        <Icon name="alert-circle" size={16} color="var(--gold)" style={{ marginTop: 1 }} />
        <span style={{ fontFamily: "var(--font-text)", fontSize: 12.5, lineHeight: 1.5, color: "var(--ink-soft)" }}>
          <strong>30% of your wealth.</strong> The same bet as your salary.
        </span>
      </div>
      <div style={{ display: "flex", gap: 10, marginTop: 2 }}>
        <Button variant="ghost" onClick={onClose}>Cancel</Button>
        <Button full>Save holding</Button>
      </div>
    </div>
  );
}

// Faint dashboard hint behind the scrim
function DashboardGhost() {
  return (
    <div style={{ position: "absolute", inset: 0, padding: "20px 22px", opacity: 0.5, filter: "blur(1px)", pointerEvents: "none" }}>
      <div style={{ fontFamily: "var(--font-display-hero)", fontSize: 34, fontWeight: 700, color: "var(--ink)" }}>£2,340,000</div>
      <div style={{ fontFamily: "var(--font-text)", fontSize: 13, color: "var(--muted)", marginTop: 4 }}>Net worth · verified</div>
    </div>
  );
}

function SheetHandle() {
  return <div style={{ display: "flex", justifyContent: "center", padding: "10px 0 6px" }}><div style={{ width: 38, height: 5, borderRadius: 3, background: "var(--line-strong)" }} /></div>;
}

function CrudTitle({ small }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 3, marginBottom: 4 }}>
      <Kicker>Edit holding</Kicker>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: small ? 22 : 25, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--ink)", margin: 0 }}>What's it worth?</h2>
    </div>
  );
}

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

  if (device === "desktop") {
    return (
      <DesktopFrame theme={theme} title="WORTH — Wealth map">
        <div style={{ flex: 1, position: "relative", minHeight: 0, overflow: "hidden" }}>
          {/* dimmed dashboard */}
          <div style={{ position: "absolute", inset: 0, display: "flex" }}>
            <DesktopSidebar active="wealth" theme={theme} />
            <div style={{ flex: 1, position: "relative" }}><DashboardGhost /></div>
          </div>
          <div style={{ position: "absolute", inset: 0, background: "var(--scrim)" }} />
          {/* centered modal */}
          <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", padding: 32 }}>
            <div style={{ width: 520, background: "var(--panel)", borderRadius: 20, border: "1px solid var(--line)", boxShadow: "0 30px 80px rgba(20,18,10,0.35)", padding: "28px 30px" }}>
              <CrudTitle />
              <CrudForm onClose={() => {}} />
            </div>
          </div>
        </div>
      </DesktopFrame>
    );
  }

  // Android — full-screen dialog (Material: top app bar with close + Save action)
  if (os === "android") {
    const { Button } = window.WORTHDesignSystem_70d33b;
    return (
      <PhoneFrame os="android" theme={theme}>
        <div style={{ flexShrink: 0, display: "flex", alignItems: "center", gap: 14, padding: "8px 12px 8px 8px", borderBottom: "1px solid var(--line)" }}>
          <span style={{ width: 44, height: 44, display: "grid", placeItems: "center", color: "var(--ink-soft)" }}><Icon name="x" size={22} /></span>
          <span style={{ fontFamily: "var(--font-text)", fontSize: 18, fontWeight: 600, color: "var(--ink)" }}>Edit holding</span>
          <span style={{ marginLeft: "auto", fontFamily: "var(--font-text)", fontSize: 15, fontWeight: 700, color: "var(--teal-ink)", padding: "0 8px" }}>SAVE</span>
        </div>
        <div style={{ flex: 1, minHeight: 0, padding: "18px var(--gutter)", overflow: "hidden" }}>
          <CrudForm onClose={() => {}} compactGap />
        </div>
      </PhoneFrame>
    );
  }

  // iOS — bottom sheet over dashboard
  return (
    <PhoneFrame os="ios" theme={theme}>
      <div style={{ flex: 1, position: "relative", minHeight: 0, overflow: "hidden" }}>
        <DashboardGhost />
        <div style={{ position: "absolute", inset: 0, background: "var(--scrim)" }} />
        <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, background: "var(--panel)", borderRadius: "22px 22px 0 0", boxShadow: "var(--shadow-sheet)", padding: "0 var(--gutter) 18px", maxHeight: "94%", display: "flex", flexDirection: "column" }}>
          <SheetHandle />
          <CrudTitle small />
          <div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}><CrudForm onClose={() => {}} compactGap /></div>
        </div>
      </div>
    </PhoneFrame>
  );
}

Object.assign(window, { CrudScreen, CrudForm });