// guest.jsx - pre-auth conversational onboarding (exported to window)
// The visitor talks to Cova BEFORE signing up. Assets they describe are added to the
// very same `assets` state the signed-in app reads - so when they save, their vault is
// already built. Auth is deferred to the commitment moment and never loses progress.
const { useState: useStateG } = React;

function GuestChat({ messages, onSend, onAction, busy, assets, profile, logoV, onSave, onExit, voiceMode, onImport }) {
  const D = window.VC_DATA;
  const { t } = window.useT();
  const p = D.portfolio(assets);
  const count = assets.length;
  const total = assets.reduce((s, a) => s + (a.replacement || 0), 0);
  const ready = count > 0;

  const VaultSummary = ({ compact }) => (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 12, fontWeight: 700, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: ".04em" }}>Your vault so far</div>
          <div className="display" style={{ fontSize: compact ? 20 : 23, marginTop: 3 }}>{count === 0 ? "Nothing yet" : `${count} asset${count > 1 ? "s" : ""} · ${D.fmtNaira(total)}`}</div>
        </div>
        <window.CoverageRing pct={count ? p.covered : 0} size={compact ? 52 : 60} sub="" />
      </div>

      <div style={{ flex: 1, minHeight: 0, overflowY: "auto", display: "flex", flexDirection: "column", gap: 9, paddingRight: 2 }}>
        {count === 0 && (
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", flex: 1, color: "var(--text-faint)", padding: "30px 16px" }}>
            <span style={{ display: "grid", placeItems: "center", width: 52, height: 52, borderRadius: 16, background: "var(--accent-soft)", color: "var(--accent)", marginBottom: 14 }}><window.Icon name="vault" size={26} /></span>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--text-muted)", maxWidth: 200, lineHeight: 1.5 }}>Tell Cova what you own - it appears here, with its real replacement value.</div>
          </div>
        )}
        {assets.map((a, i) => (
          <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 11, padding: 11, borderRadius: 14, background: "var(--surface)", border: "1px solid var(--border)", boxShadow: "var(--shadow-sm)", animation: `vc-drop-in .55s var(--ease) ${i === count - 1 ? 0 : 0}s both` }}>
            <window.AssetThumb category={a.category} size={40} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontWeight: 700, fontSize: 13.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.name}</div>
              <div className="mono" style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{D.fmtFull(a.replacement)}</div>
            </div>
            <window.StatusBadge status={a.status} size="sm" />
          </div>
        ))}
      </div>

      <div style={{ marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
        <window.Btn size="lg" iconR="arrowR" disabled={!ready} onClick={onSave}
          style={{ width: "100%", justifyContent: "center", opacity: ready ? 1 : 0.55, boxShadow: ready ? "var(--shadow-glow)" : "none" }}>
          {ready ? "Save my vault" : "Add something to save"}
        </window.Btn>
        <div style={{ fontSize: 11.5, color: "var(--text-faint)", textAlign: "center", marginTop: 9, lineHeight: 1.4 }}>
          {ready ? "Create your account to lock this in - everything carries over." : "No account needed yet. Just keep chatting."}
        </div>
      </div>
    </div>
  );

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", background: "var(--hero-grad)" }}>
      {/* top bar */}
      <header style={{ flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 24px", borderBottom: "1px solid var(--border)", background: "var(--glass)", backdropFilter: "blur(14px)" }}>
        <window.Logo variant={logoV} size={28} onClick={onExit} />
        <div className="vc-hide-m" style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5, fontWeight: 700, color: "var(--text-muted)", padding: "6px 14px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--border)" }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--success)" }} />
          Chatting with Cova · guest mode
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <button onClick={onExit} style={{ fontSize: 13.5, fontWeight: 600, color: "var(--text-muted)" }}>Exit</button>
          <window.Btn size="sm" variant="outline" onClick={onSave}>Log in</window.Btn>
        </div>
      </header>

      {/* body: chat + live vault */}
      <div className="vc-guest-body" style={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "1fr 360px", gap: 0 }}>
        {/* minWidth 0: grid items default to min-width auto, so without it the
            chat cell inherits the composer's min-content and forces the 1fr
            track wider than the viewport on small screens */}
        <div style={{ minHeight: 0, minWidth: 0, display: "flex", flexDirection: "column", position: "relative" }}>
          <window.ChatPanel messages={messages} onSend={onSend} onAction={onAction} busy={busy} chatStyle="glass" placeholder="Describe what you own, or ask anything…" onImport={onImport} />
        </div>
        <aside className="vc-guest-aside" style={{ borderLeft: "1px solid var(--border)", background: "var(--bg-tint)", padding: 20, minHeight: 0 }}>
          <VaultSummary />
        </aside>
      </div>

      {/* mobile save bar */}
      <div className="vc-guest-mobilebar" style={{ display: "none", flexShrink: 0, padding: "12px 16px", borderTop: "1px solid var(--border)", background: "var(--glass)", backdropFilter: "blur(14px)", alignItems: "center", gap: 12 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: "var(--text-faint)", textTransform: "uppercase", letterSpacing: ".04em" }}>Your vault</div>
          <div style={{ fontWeight: 700, fontSize: 14, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{count === 0 ? "Nothing yet" : `${count} · ${D.fmtNaira(total)}`}</div>
        </div>
        <window.Btn size="sm" iconR="arrowR" disabled={!ready} onClick={onSave} style={{ opacity: ready ? 1 : 0.55 }}>Save vault</window.Btn>
      </div>
    </div>
  );
}

Object.assign(window, { GuestChat });