// components/TierPanels/T0Panel.jsx
//
// T0 (Public Visitor) panel. Default view for any unauthenticated visitor.
// Shows: chat canvas, R1-R7 final scores at session close, Knowledge Gap report.
// Hides: everything else.
// SCAR-203: no locked icons, no teaser previews, no advertising of withheld content.
//
// Wire-in: window.T0Panel = T0Panel

const { useState, useEffect } = React;

function T0Panel({
  conversation,
  onSendMessage,
  onTriggerKnowledgeGapRitual,
  finalRewardScores,
  pttButton,  // injected push-to-talk button component
}) {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return;
    onSendMessage?.(inputValue);
    setInputValue('');
  };

  return React.createElement('div', { className: 't0-panel' },
    React.createElement('header', { className: 't0-panel-header' },
      React.createElement('h2', null, 'Dungeon Master'),
      React.createElement('p', { className: 't0-panel-tagline' },
        'Talk to Morphy. Substrate floor only. Knowledge Gap report at session close.'
      )
    ),

    React.createElement('main', { className: 't0-conversation-canvas' },
      conversation && conversation.length > 0
        ? conversation.map((turn, i) =>
            React.createElement('div', {
              key: i,
              className: `t0-turn role-${turn.role}`,
            },
              React.createElement('strong', null, `${turn.role}: `),
              turn.content
            )
          )
        : React.createElement('p', { className: 't0-empty-state' },
            'Push to talk, or type below. Morphy is ready.'
          )
    ),

    React.createElement('form', {
      className: 't0-input-form',
      onSubmit: handleSubmit,
    },
      React.createElement('input', {
        type: 'text',
        value: inputValue,
        onChange: (e) => setInputValue(e.target.value),
        placeholder: 'Ask Morphy anything...',
        className: 't0-input',
      }),
      React.createElement('button', { type: 'submit', className: 't0-submit' }, 'Send'),
      pttButton  // injected push-to-talk
    ),

    React.createElement('aside', { className: 't0-rewards' },
      React.createElement('h3', null, 'R1-R7 (final, at session close)'),
      finalRewardScores
        ? React.createElement('ul', null,
            ['R1', 'R2', 'R3', 'R4', 'R5', 'R6', 'R7'].map(r =>
              React.createElement('li', { key: r },
                `${r}: ${finalRewardScores[r]?.toFixed(2) || 'N/A'}`
              )
            )
          )
        : React.createElement('p', { className: 't0-rewards-pending' },
            'Scores publish at session close.'
          )
    ),

    React.createElement('footer', { className: 't0-panel-footer' },
      React.createElement('button', {
        className: 't0-end-session',
        onClick: onTriggerKnowledgeGapRitual,
      }, 'End session (Knowledge Gap Ritual)')
    )
  );
}

window.T0Panel = T0Panel;