/* home_dayone_web.jsx — DESKTOP day-one Home for the WEB build.
   Same day-one logic as the mobile HomeDayOne (fresh $0 account, the Get started
   checklist, "Needs you" starters, Today's read, Stream) — re-laid-out as a
   three-pane desktop dashboard: chat rail · center · stream.
   Reuses StarterIdeas, StreamView, NewsBrief, the Get started steps, etc. */

/* ---------------- top app nav (Home / Studio / Accounts · actions) -------- */
const WHNavLink = ({ children, active, caret, onClick }) => (
  <button className="press" onClick={onClick} style={{
    position: "relative", background: "none", border: "none", cursor: "pointer",
    display: "flex", alignItems: "center", gap: 5, padding: "6px 2px",
    fontFamily: "var(--f-display)", fontSize: 14, fontWeight: active ? 700 : 500,
    letterSpacing: "-0.01em", color: active ? "var(--ink)" : "var(--ink-2)" }}>
    {children}
    {caret && <Icon name="down" size={13} color="var(--ink-3)" />}
    {active && <span style={{ position: "absolute", left: 2, right: 2, bottom: -1, height: 2, background: "var(--accent)", borderRadius: 2 }} />}
  </button>
);

const WHActionBtn = ({ icon, label, primary, onClick }) => (
  <button className="press" onClick={onClick} style={{
    display: "inline-flex", alignItems: "center", gap: 8, padding: "9px 15px", borderRadius: 10, cursor: "pointer",
    background: primary ? "var(--accent)" : "var(--bg-2)",
    border: `1px solid ${primary ? "var(--accent)" : "var(--rule-2)"}`,
    color: primary ? "var(--accent-ink)" : "var(--ink)",
    fontFamily: "var(--f-display)", fontSize: 13.5, fontWeight: 600, letterSpacing: "-0.005em" }}>
    <Icon name={icon} size={16} stroke={1.6} color={primary ? "var(--accent-ink)" : "var(--ink)"} />
    {label}
  </button>
);

const WebTopNav = ({ onTab, onAddMoney, onTrade, onAgents, onBell }) => (
  <header style={{ flex: "none", display: "flex", alignItems: "center", gap: 22, padding: "14px 26px", borderBottom: "1px solid var(--rule)", background: "var(--bg)" }}>
    <button className="press" onClick={() => onTab && onTab("profile")} aria-label="Menu" style={{ background: "none", border: "none", padding: 4, margin: "0 -2px", display: "grid", placeItems: "center", color: "var(--ink)", cursor: "pointer" }}>
      <Icon name="menu" size={20} stroke={1.7} color="var(--ink)" />
    </button>
    <nav style={{ display: "flex", alignItems: "center", gap: 20 }}>
      <WHNavLink active onClick={() => onTab && onTab("home")}>Home</WHNavLink>
      <WHNavLink caret onClick={() => onTab && onTab("studio")}>Studio</WHNavLink>
      <WHNavLink onClick={() => onTab && onTab("accounts")}>Accounts</WHNavLink>
    </nav>
    <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 12 }}>
      <button className="press" onClick={onBell} aria-label="Alerts" style={{ position: "relative", background: "none", border: "none", padding: 6, display: "grid", placeItems: "center", color: "var(--ink)", cursor: "pointer" }}>
        <Icon name="bell" size={20} stroke={1.6} color="var(--ink)" />
      </button>
      <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
        <WHActionBtn primary icon="trade" label="Trade" onClick={onTrade} />
        <WHActionBtn icon="swap" label="Transfer" onClick={onAddMoney} />
        <WHActionBtn icon="easel" label="Agents" onClick={onAgents} />
      </div>
    </div>
  </header>
);

/* ---------------- left chat rail (day-one welcome) ------------------------ */
const WHChip = ({ children, onClick }) => (
  <button className="press" onClick={onClick} style={{
    flex: "none", padding: "8px 13px", borderRadius: 999, background: "var(--bg-2)", border: "1px solid var(--rule-2)",
    color: "var(--ink-2)", fontFamily: "var(--f-display)", fontSize: 13, fontWeight: 500, whiteSpace: "nowrap", cursor: "pointer" }}>
    {children}
  </button>
);

const WHBubble = ({ children }) => (
  <div style={{ alignSelf: "flex-start", maxWidth: "85%", background: "var(--bg-card)", border: "1px solid var(--rule)", borderRadius: 16, borderTopLeftRadius: 5, padding: "13px 15px", fontFamily: "var(--f-display)", fontSize: 14.5, lineHeight: 1.5, color: "var(--ink)", textWrap: "pretty" }}>
    {children}
  </div>
);

const WHChatRail = ({ onAddMoney, onConnect, flash }) => {
  const chips = [
    ["What can you do?", () => flash && flash("Yoshi chat opens in the full app")],
    ["How do I add money?", onAddMoney],
    ["Connect my accounts", onConnect],
    ["Set a goal", () => flash && flash("Goals open in the full app")],
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
      <div style={{ flex: "none", padding: "20px 22px 6px", display: "flex", alignItems: "center", gap: 9 }}>
        <Logo size={22} color="var(--ink)" />
        <span style={{ fontFamily: "var(--f-display)", fontSize: 16, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--ink)" }}>Yoshi</span>
      </div>

      <div className="scroll" style={{ flex: 1, minHeight: 0, padding: "16px 22px 8px", display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ alignSelf: "center", fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.06em", color: "var(--ink-3)", textTransform: "uppercase" }}>Today · 9:24 AM</div>
        <WHBubble>Welcome to Yoshi. Your money is happy you're here.</WHBubble>
        <WHBubble>Add funds or connect external accounts so I can start finding ideas and building a plan. You approve everything before any money moves.</WHBubble>
      </div>

      <div style={{ flex: "none", padding: "8px 18px 4px" }}>
        <div className="hcar" style={{ display: "flex", gap: 8, overflowX: "auto", padding: "0 4px 10px" }}>
          {chips.map(([label, fn], i) => <WHChip key={i} onClick={fn}>{label}</WHChip>)}
        </div>
      </div>

      <div style={{ flex: "none", padding: "0 18px 20px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 15px", background: "var(--bg-2)", border: "1px solid var(--rule-2)", borderRadius: 14 }}>
          <Icon name="plus" size={19} stroke={1.7} color="var(--ink-3)" />
          <span style={{ flex: 1, fontFamily: "var(--f-display)", fontSize: 14.5, color: "var(--ink-3)" }}>Talk to Yoshi…</span>
          <Icon name="phone" size={17} stroke={1.6} color="var(--ink-3)" />
        </div>
      </div>
    </div>
  );
};

/* ---------------- center: balance + chart (empty / funded) --------------- */
const WH_RANGES = ["1D", "1M", "6M", "YTD", "1Y", "5Y", "All"];
const WHEmptyChart = () => (
  <div style={{ position: "relative", height: 200, border: "1px solid var(--rule)", borderRadius: 12, background: "var(--bg-card)", overflow: "hidden" }}>
    <svg width="100%" height="100%" viewBox="0 0 600 200" preserveAspectRatio="none" style={{ display: "block" }}>
      <line x1="0" y1="150" x2="600" y2="150" stroke="var(--rule-2)" strokeWidth="1.5" strokeDasharray="3 6" />
    </svg>
    <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", textAlign: "center", padding: "0 32px" }}>
      <div style={{ fontFamily: "var(--f-display)", fontSize: 14, color: "var(--ink-3)", lineHeight: 1.5, textWrap: "pretty" }}>
        Your balance charts here once money lands. Add funds to begin.
      </div>
    </div>
  </div>
);
const WHFundedChart = ({ balance }) => (
  <div style={{ position: "relative", height: 200, border: "1px solid var(--rule)", borderRadius: 12, background: "var(--bg-card)", overflow: "hidden" }}>
    <svg width="100%" height="100%" viewBox="0 0 600 200" preserveAspectRatio="none" style={{ display: "block" }}>
      <defs>
        <linearGradient id="wh-fund-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0.18" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d="M0 156 L 372 156 L 430 78 L 600 78 L 600 200 L 0 200 Z" fill="url(#wh-fund-fill)" />
      <path d="M0 156 L 372 156 L 430 78 L 600 78" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinejoin="round" />
    </svg>
    <div style={{ position: "absolute", top: 13, left: 15, display: "inline-flex", alignItems: "center", gap: 7, padding: "5px 10px", borderRadius: 999, background: "color-mix(in srgb, var(--accent) 16%, var(--bg-card))", border: "1px solid var(--accent)" }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)" }} />
      <span style={{ fontFamily: "var(--f-display)", fontSize: 12.5, fontWeight: 700, letterSpacing: "-0.005em", color: "var(--ink)" }}>{usd(balance, 0)} added today</span>
    </div>
  </div>
);
const WHBalance = ({ balance, flash, hasFunding, activation }) => (
  <section style={{ padding: "22px 26px 8px" }}>
    <Eyebrow>Yoshi balance</Eyebrow>
    <div style={{ marginTop: 6, lineHeight: 1 }}><Money value={balance} size={34} weight={500} /></div>
    <div style={{ marginTop: 8, fontFamily: "var(--f-mono)", fontSize: 13.5, color: "var(--ink-3)" }}>
      +$0.00 (0%) <span style={{ color: "var(--ink-3)" }}>Today</span>
    </div>

    <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
      <WHActionBtn icon="swap" label="Compare" onClick={() => flash && flash("Compare opens in the full app")} />
      <WHActionBtn icon="bulb" label="Indicators" onClick={() => flash && flash("Indicators open in the full app")} />
    </div>

    <div style={{ marginTop: 18 }}>
      {hasFunding ? <WHFundedChart balance={balance} /> : (activation || <WHEmptyChart />)}
    </div>

    {hasFunding && (
      <div style={{ display: "flex", gap: 4, marginTop: 10 }}>
        {WH_RANGES.map((r, i) => (
          <span key={r} style={{ flex: 1, textAlign: "center", padding: "6px 0", borderRadius: 8, background: i === 3 ? "var(--bg-2)" : "transparent", fontFamily: "var(--f-mono)", fontSize: 12, fontWeight: 500, letterSpacing: "0.02em", color: i === 3 ? "var(--ink)" : "var(--ink-3)" }}>{r}</span>
        ))}
      </div>
    )}
  </section>
);

/* ---------------- center: Get started checklist (same logic as mobile) --- */
const WHGetStarted = ({ steps, onDismiss, bare }) => {
  const card = (
    <div style={{ position: "relative", background: "#15140f", border: "1px solid var(--accent)", borderRadius: 14, padding: "15px 18px 8px", overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4, paddingRight: 24 }}>
        <Icon name="bolt" size={15} stroke={1.9} color="var(--accent)" />
        <span style={{ fontFamily: "var(--f-display)", fontSize: 14.5, fontWeight: 700, letterSpacing: "-0.005em", color: "var(--accent)" }}>Get started</span>
      </div>
      <button className="press" onClick={onDismiss} aria-label="Dismiss" style={{ position: "absolute", top: 11, right: 11, width: 24, height: 24, display: "grid", placeItems: "center", background: "none", border: "none", color: "#9b9685", cursor: "pointer", zIndex: 2 }}>
        <Icon name="close" size={14} stroke={2} color="#9b9685" />
      </button>
      <div>
        {steps.map((s, i) => (
          <button key={s.key} className="press" onClick={s.onClick} disabled={s.done} style={{
            width: "100%", textAlign: "left", display: "flex", alignItems: "center", gap: 13,
            padding: "12px 0", background: "none", border: "none",
            borderBottom: i === steps.length - 1 ? "none" : "1px solid rgba(255,255,255,0.1)",
            cursor: s.done ? "default" : "pointer", opacity: s.done ? 0.5 : 1 }}>
            <span style={{ width: 30, height: 30, flex: "none", borderRadius: 999, display: "grid", placeItems: "center", background: s.done ? "var(--accent)" : "transparent", border: s.done ? "none" : "1px solid rgba(240,236,226,0.25)", color: s.done ? "#15140f" : "#f0ece2" }}>
              {s.done ? <Icon name="check" size={15} stroke={2.4} color="#15140f" /> : <Icon name={s.icon} size={17} stroke={1.7} color="#f0ece2" />}
            </span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{ display: "block", fontFamily: "var(--f-display)", fontSize: 14.5, fontWeight: 600, letterSpacing: "-0.01em", color: "#f0ece2", textDecoration: s.done ? "line-through" : "none" }}>{s.title}</span>
              <span style={{ display: "block", fontFamily: "var(--f-display)", fontSize: 12, color: "#9b9685", marginTop: 1, textWrap: "pretty" }}>{s.sub}</span>
            </span>
            {!s.done && <Icon name="back" size={15} color="#9b9685" style={{ flex: "none", transform: "scaleX(-1)" }} />}
          </button>
        ))}
      </div>
    </div>
  );
  return bare ? card : <section style={{ padding: "12px 26px 4px" }}>{card}</section>;
};

/* ---------------- the page ----------------------------------------------- */
const WebHomeDayOne = ({ balance = 0, externals = [], linkedCount, nav, flash, onAddMoney, onConnect, onAgents, onTrade }) => {
  const onChat = () => flash && flash("Yoshi chat opens in the full app");
  const [getStartedDismissed, setGetStartedDismissed] = React.useState(false);

  // ---- same day-one activation logic as mobile HomeDayOne ----
  const accts = externals.length ? externals : [];
  const linked = accts.length || (linkedCount || 0);
  const hasFunding = balance > 0;
  const hasConnections = linked > 1;
  const showFund = !hasFunding;
  const showConnect = !hasConnections;
  const showActivation = !(hasFunding && hasConnections);

  const connectTitle = hasConnections ? `${linked} account${linked === 1 ? "" : "s"} connected` : "Connect accounts";
  const connectSub = hasConnections ? "Add more anytime in Accounts" : "So Yoshi can spot ideas everywhere";

  const steps = [
    showFund    && { key: "fund",    icon: "plus",  title: hasFunding ? `Added ${usd(balance, 0)}` : "Add money",  sub: hasFunding ? "Ready to put to work" : "So Yoshi can start growing your money", done: hasFunding,    onClick: onAddMoney },
    showConnect && { key: "connect", icon: "route", title: connectTitle, sub: connectSub, done: hasConnections, onClick: onConnect },
  ].filter(Boolean);

  return (
    <div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0, background: "var(--bg)" }}>
      <WebTopNav
        onTab={(t) => nav && nav.tab(t)}
        onAddMoney={onAddMoney}
        onTrade={onTrade || (() => flash && flash("Trading opens in the full app"))}
        onAgents={onAgents || (() => flash && flash("Agents open in the full app"))}
        onBell={() => flash && flash("Nothing needs you yet")} />

      <div style={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: "1fr 1.34fr 0.86fr" }}>
        {/* left · chat */}
        <aside style={{ minWidth: 0, minHeight: 0, borderRight: "1px solid var(--rule)", overflow: "hidden" }}>
          <WHChatRail onAddMoney={onAddMoney} onConnect={onConnect} flash={flash} />
        </aside>

        {/* center · balance + get started + needs you + read */}
        <main className="scroll" style={{ minWidth: 0, minHeight: 0, overflowY: "auto" }}>
          <WHBalance
            balance={balance}
            flash={flash}
            hasFunding={hasFunding}
            activation={!hasFunding && showActivation && !getStartedDismissed
              ? <WHGetStarted bare steps={steps} onDismiss={() => setGetStartedDismissed(true)} />
              : null} />
          {hasFunding && showActivation && !getStartedDismissed && <WHGetStarted steps={steps} onDismiss={() => setGetStartedDismissed(true)} />}
          <StarterIdeas onChat={onChat} onConnect={onConnect} onAddMoney={onAddMoney} externals={externals} />
          <section style={{ padding: "16px 26px 0" }}>
            <span style={{ fontFamily: "var(--f-display)", fontSize: 14, fontWeight: 700, letterSpacing: "-0.01em" }}>Today's read</span>
            <NewsBrief data={hasConnections ? DAYONE_FINANCE_NEWS : DAYONE_MARKET_NEWS} hideSources hideByline />
          </section>
          <div style={{ height: 24 }} />
        </main>

        {/* right · stream */}
        <aside className="scroll" style={{ minWidth: 0, minHeight: 0, overflowY: "auto", borderLeft: "1px solid var(--rule)" }}>
          <div style={{ padding: "22px 18px 14px" }}>
            <span style={{ fontFamily: "var(--f-display)", fontSize: 16, fontWeight: 700, letterSpacing: "-0.02em" }}>Stream</span>
          </div>
          <StreamView externals={externals} compact onOpen={nav && nav.sheet ? (item) => nav.sheet({ type: "activity", item }) : undefined} />
          <div style={{ height: 24 }} />
        </aside>
      </div>
    </div>
  );
};

window.WebHomeDayOne = WebHomeDayOne;