// WORTH platform sweep — Screen 5: Chat / Q&A.
// WORTH speaks as "I"; X-ray findings carry the teal insight treatment.
// Desktop = sidebar + thread + referenced-holdings rail; tablet landscape =
// summary pane + thread; phone = thread + composer + platform nav.

function ChatThread({ tight = false }) {
  const { ChatBubble } = window.WORTHDesignSystem_70d33b;
  return (
    <React.Fragment>
      <ChatBubble from="worth">Ask me anything about your money.</ChatBubble>
      <ChatBubble from="user" time="09:41">If I needed £500K in a month, where would it come from?</ChatBubble>
      <ChatBubble from="worth" insight>
        £371k clears in 3 days — cash and public equities. The last £129k means selling Schwab stock. £96k of that is your employer's.
      </ChatBubble>
      {!tight && (
        <ChatBubble from="user" time="09:42">So raising cash deepens the concentration?</ChatBubble>
      )}
      {!tight && (
        <ChatBubble from="worth" insight>
          Yes — employer exposure climbs 30% → 34%. There's a way to raise it without touching that stock.
        </ChatBubble>
      )}
    </React.Fragment>
  );
}

function ChatComposer() {
  const { Composer } = window.WORTHDesignSystem_70d33b;
  return <Composer value="" onChange={() => {}} placeholder="Ask about your money…" />;
}

function ReferencedRail() {
  const { AssetRow } = window.WORTHDesignSystem_70d33b;
  return (
    <div style={{ width: 300, flexShrink: 0, borderLeft: "1px solid var(--line)", background: "var(--panel)", padding: "28px 22px", display: "flex", flexDirection: "column", gap: 14 }}>
      <Kicker>Referenced in this answer</Kicker>
      <AssetRow icon={<Icon name="wallet" size={18} />} tint="var(--chart-6)" name="Cash & equivalents" context="Clears in 3 days" value="£148,000" badges={[{ role: "verified", label: "Live" }]} />
      <AssetRow icon={<Icon name="briefcase" size={18} />} tint="var(--chart-1)" name="Public equities" context="Schwab · T+2 settle" value="£605,000" badges={[{ role: "source", label: "Verified" }]} />
      <AssetRow icon={<Icon name="trending-up" size={18} />} tint="var(--coral)" name="Employer stock" context="Locked · 30% of wealth" value="£702,000" badges={[{ role: "manual", label: "Exposure" }]} />
      <div style={{ marginTop: 4, padding: 14, borderRadius: 14, border: "1px solid var(--line)", background: "var(--panel-soft)", display: "flex", gap: 10, alignItems: "flex-start" }}>
        <Icon name="info" size={16} color="var(--muted)" style={{ marginTop: 1 }} />
        <span style={{ fontFamily: "var(--font-text)", fontSize: 12, lineHeight: 1.5, color: "var(--muted)" }}>Not advice. Traced to your statements.</span>
      </div>
    </div>
  );
}

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

  if (device === "desktop") {
    return (
      <DesktopFrame theme={theme} title="WORTH — Ask">
        <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
          <DesktopSidebar active="chat" theme={theme} />
          <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", minHeight: 0 }}>
            <div style={{ padding: "22px 32px", borderBottom: "1px solid var(--line)" }}>
              <Kicker style={{ marginBottom: 4 }}>Ask WORTH</Kicker>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 700, letterSpacing: "-0.01em", color: "var(--ink)" }}>Liquidity & concentration</div>
            </div>
            <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 14, padding: "26px 32px", overflow: "hidden" }}>
              <div style={{ width: "100%", maxWidth: 640, margin: "0 auto", display: "flex", flexDirection: "column", gap: 14 }}>
                <ChatThread />
              </div>
            </div>
            <div style={{ padding: "0 32px 26px" }}>
              <div style={{ maxWidth: 640, margin: "0 auto" }}><ChatComposer /></div>
            </div>
          </div>
          <ReferencedRail />
        </div>
      </DesktopFrame>
    );
  }

  if (device === "tabletL") {
    const { DonutProgress } = window.WORTHDesignSystem_70d33b;
    return (
      <TabletFrame os={os} orientation="landscape" theme={theme}>
        <div style={{ flex: 1, minHeight: 0, display: "flex", overflow: "hidden" }}>
          <div style={{ width: 320, flexShrink: 0, borderRight: "1px solid var(--line)", background: "var(--panel-soft)", padding: "28px 26px", display: "flex", flexDirection: "column", gap: 18 }}>
            <Kicker>Your read</Kicker>
            <DonutProgress size={150} thickness={20} segments={WM_ALLOC.map((a) => ({ value: a.value, color: a.color }))} label="£2.34M" sublabel="net worth" />
            <div style={{ padding: 14, borderRadius: 14, background: "var(--teal-soft)", border: "1px solid var(--teal-soft)" }}>
              <div style={{ fontFamily: "var(--font-text)", fontSize: 11, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--teal-ink)", marginBottom: 6 }}>Reachable now</div>
              <div style={{ fontFamily: "var(--font-display-hero)", fontSize: 26, fontWeight: 700, color: "var(--ink)", fontVariantNumeric: "tabular-nums" }}>£605,000</div>
            </div>
          </div>
          <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", minHeight: 0 }}>
            <AppHeader brand title="Ask WORTH" divider right={<Badge role="L2">L2</Badge>} />
            <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 12, padding: "20px 28px", overflow: "hidden" }}>
              <ChatThread tight />
            </div>
            <div style={{ padding: "0 28px 24px" }}><ChatComposer /></div>
          </div>
        </div>
      </TabletFrame>
    );
  }

  // phone
  const isAndroid = os === "android";
  return (
    <PhoneFrame os={os} theme={theme}>
      <AppHeader brand title="Ask WORTH" divider right={<Badge role="L2">L2</Badge>} />
      <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column", justifyContent: "flex-end", gap: 11, padding: "14px var(--gutter)", overflow: "hidden" }}>
        <ChatThread tight />
      </div>
      <div style={{ padding: "0 var(--gutter) 12px" }}><ChatComposer /></div>
      {isAndroid ? <AndroidNavBar active="chat" /> : <IOSTabBar active="chat" />}
    </PhoneFrame>
  );
}

Object.assign(window, { ChatScreen, ChatThread });