// Session workspace — header, stepper, stage content, chat panel

function SessionWorkspace({ session, game, stepperVariant }) {
  const { state, actions } = useStore();
  const [stage, setStage] = React.useState(Math.min(session.stage, 4));
  const [nameEditing, setNameEditing] = React.useState(false);

  // Let the app shell reclaim the 360px chat column on stages where the
  // chat rail isn't rendered (anywhere except Build). Stored on window so
  // the top-level app re-evaluates classes on the next render.
  React.useEffect(() => {
    window.__currentStage = stage;
    window.dispatchEvent(new Event('7play:stage-changed'));
  }, [stage]);


  const [nameDraft, setNameDraft] = React.useState(session.name || game.name);

  // Keyboard stage nav (dispatched from app.jsx)
  React.useEffect(() => {
    const prev = () => setStage(s => Math.max(0, s - 1));
    const next = () => setStage(s => Math.min(4, s + 1));
    window.addEventListener('7play:prev-stage', prev);
    window.addEventListener('7play:next-stage', next);
    return () => {
      window.removeEventListener('7play:prev-stage', prev);
      window.removeEventListener('7play:next-stage', next);
    };
  }, []);

  // Budget alert — warn at 80%
  React.useEffect(() => {
    const spentPct = (session.budget.spent / session.budget.maxUsd) * 100;
    if (spentPct >= 80 && !session._budgetWarned) {
      actions.updateSession(session.id, { _budgetWarned: true });
      actions.pushToast({
        kind: 'budget', title: 'Budget at 80%',
        text: `$${session.budget.spent.toFixed(2)} of $${session.budget.maxUsd.toFixed(2)} spent.`,
        actions: [
          { label: 'Open panel', run: () => actions.openModal({ kind: 'budget', data: { sessionId: session.id } }) },
          { label: 'Increase cap', run: () => actions.openModal({ kind: 'settings', data: { sessionId: session.id } }) },
        ],
        duration: 10000,
      });
    }
  }, [session.budget.spent]);

  const commitName = () => {
    setNameEditing(false);
    if (nameDraft.trim() && nameDraft !== session.name) {
      actions.updateSession(session.id, { name: nameDraft.trim() });
      actions.pushToast({ kind: 'success', title: 'Session renamed' });
    }
  };

  const stageComp = () => {
    const props = { game, session, onOpenVariant: (v) => actions.openModal({ kind: 'preview', data: { sessionId: session.id, variantId: v.id } }) };
    switch (stage) {
      case 0: return <StageReference {...props} />;
      case 1: return <StageStrategy {...props} />;
      case 2: return <StageBuild {...props} />;
      case 3: return <StageReview {...props} />;
      case 4: return <StageExport {...props} />;
      default: return null;
    }
  };

  const messages = session.chatByStage?.[stage] || [];
  const budget = session.budget;
  const spendPct = (budget.spent / budget.maxUsd) * 100;
  const budgetCls = spendPct >= 95 ? 'danger' : spendPct >= 80 ? 'warn' : '';

  return (
    <>
      <ChatPanel
        stage={window.STAGES[stage]?.label}
        game={game}
        collapsed={stage !== 2 || state.chatCollapsed}
        hidden={stage !== 2}
        onToggle={() => actions.setChatCollapsed(!state.chatCollapsed)}
        position="left"
        messages={messages}
        onSend={(text) => {
          actions.addChat(session.id, stage, { kind: 'user', time: 'now', text });
          setTimeout(() => {
            actions.addChat(session.id, stage, { kind: 'agent', time: 'now', label: window.STAGES[stage].key, text: "Acknowledged. I'll thread this into the current run — you'll see it reflected in the next artifact." });
          }, 900);
        }}
        onClear={() => {
          actions.openModal({ kind: 'confirm', data: {
            title: 'Clear stage conversation?',
            body: 'Removes this stage\'s messages. Agent run artifacts and reasoning are preserved in revision history.',
            cta: 'Clear',
            danger: true,
            onConfirm: () => { actions.clearChat(session.id, stage); actions.pushToast({ kind: 'info', title: 'Chat cleared' }); },
          }});
        }}
      />
      <div className="main">
        <Topbar
          homeButton={() => actions.nav('home')}
          title={
            nameEditing ? (
              <input
                className="session-name-edit"
                autoFocus
                value={nameDraft}
                onChange={e => setNameDraft(e.target.value)}
                onBlur={commitName}
                onKeyDown={e => { if (e.key === 'Enter') commitName(); if (e.key === 'Escape') { setNameDraft(session.name); setNameEditing(false); } }}
              />
            ) : (
              <span className="session-name-edit" onClick={() => setNameEditing(true)} title="Click to rename">{session.name}</span>
            )
          }
          crumbs={[<span key="c" style={{ cursor: 'pointer' }} onClick={() => actions.nav('home')}>Sessions</span>]}
          right={
            <>
              <GameIcon game={game} size={22} />
              <span className="chip">{game.genre}</span>
              <span className="chip" style={{ fontSize: 10 }}>{session.authenticity.replace(/_/g, '-')}</span>

              <div
                className={`budget-chip ${budgetCls}`}
                onClick={() => actions.openModal({ kind: 'budget', data: { sessionId: session.id } })}
                title={`$${budget.spent.toFixed(2)} / $${budget.maxUsd.toFixed(2)} · ${budget.elapsedMin}m / ${budget.maxMin}m`}
              >
                <Icon name="bolt" size={10} />
                <span>${budget.spent.toFixed(2)}/${budget.maxUsd.toFixed(2)}</span>
                <div className="bar-mini"><div className="bar-mini-fill" style={{ width: Math.min(100, spendPct) + '%' }} /></div>
              </div>

              <button className="btn ghost sm" title="Session info" onClick={() => actions.openModal({ kind: 'metadata', data: { sessionId: session.id } })}><Icon name="info" size={13} /></button>
              <button className="btn ghost sm" title="Share" onClick={() => actions.openModal({ kind: 'share', data: { sessionId: session.id } })}><Icon name="share" size={13} /></button>
              <button className="btn ghost sm" title="Settings" onClick={() => actions.openModal({ kind: 'settings', data: { sessionId: session.id } })}><Icon name="settings" size={13} /></button>
              <button className="btn ghost sm" title="Revision history" onClick={() => actions.openModal({ kind: 'history', data: { sessionId: session.id } })}><Icon name="history" size={13} /></button>
            </>
          }
        />

        <div style={{
          padding: '14px 28px',
          borderBottom: '1px solid var(--line)',
          background: 'var(--bg)',
          display: 'flex',
          gap: 14,
          alignItems: 'center',
          flexWrap: 'wrap',
        }}>
          <div onClick={(e) => {
            const el = e.target.closest('.step');
            if (!el) return;
            const idx = Array.from(el.parentElement.children).indexOf(el);
            if (idx >= 0) setStage(idx);
          }} style={{ cursor: 'pointer' }}>
            <Stepper current={stage} variant={stepperVariant} />
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
            <button className="btn ghost sm" disabled={stage === 0} onClick={() => setStage(s => Math.max(0, s - 1))}>
              <Icon name="arrowLeft" size={12} /> Back
            </button>
            <button className="btn sm" disabled={stage === 4} onClick={() => setStage(s => Math.min(4, s + 1))}>
              Next stage <Icon name="arrowRight" size={12} />
            </button>
          </div>
        </div>

        <div className="content">{stageComp()}</div>
      </div>
    </>
  );
}

window.SessionWorkspace = SessionWorkspace;