// components/TierPanels/T1Panel.jsx
//
// T1 (Curious Prospect) panel. First curtain has been pulled.
// Adds: live Kaitiaki receipt chain, R1-R7 live scores during conversation,
//       SCAR ledger summary (last 5 SCARs).
// Inherits: all T0 content.
//
// Wire-in: window.T1Panel = T1Panel

const { useState, useEffect } = React;

function T1Panel({ persistence, liveRewardScores }) {
  const [receipts, setReceipts] = useState([]);
  const [recentScars, setRecentScars] = useState([]);
  const [expandedReceipt, setExpandedReceipt] = useState(null);

  // Subscribe to live receipt stream
  useEffect(() => {
    if (!persistence) return;
    const refresh = () => {
      const buffer = persistence.localBuffer || [];
      setReceipts(buffer.slice(-10).reverse());  // last 10, newest first
    };
    refresh();
    const interval = setInterval(refresh, 1500);
    return () => clearInterval(interval);
  }, [persistence]);

  // Fetch recent SCARs (static JSON for now per dispatch)
  useEffect(() => {
    fetch('/pataka/scars/recent.json')
      .then(r => r.ok ? r.json() : [])
      .then(scars => setRecentScars(scars.slice(0, 5)))
      .catch(() => setRecentScars([
        { id: 'SCAR-200', title: 'Morphy Substrate', status: 'approved-in-principle' },
        { id: 'SCAR-201', title: 'Morphy Game Curator', status: 'approved-in-principle' },
        { id: 'SCAR-202', title: 'Tier Grant is Kaitiaki Receipt', status: 'active' },
        { id: 'SCAR-203', title: 'Honest Concealment', status: 'active' },
        { id: 'SCAR-144', title: 'Tensor Tympani is Sacred', status: 'active' },
      ]));
  }, []);

  return React.createElement('aside', { className: 't1-panel' },
    React.createElement('header', { className: 't1-panel-header' },
      React.createElement('h3', null, 'T1. Curious Prospect'),
      React.createElement('p', { className: 't1-panel-subtitle' },
        'Substrate audit trail visible. Constitutional gates demonstrable live.'
      )
    ),

    React.createElement('section', { className: 't1-section' },
      React.createElement('h4', null, 'R1-R7 live scores'),
      React.createElement('div', { className: 't1-rewards-live' },
        ['R1', 'R2', 'R3', 'R4', 'R5', 'R6', 'R7'].map(r => {
          const v = liveRewardScores?.[r] || 0;
          return React.createElement('div', { key: r, className: 't1-reward-bar' },
            React.createElement('span', { className: 't1-reward-label' }, r),
            React.createElement('div', { className: 't1-reward-track' },
              React.createElement('div', {
                className: 't1-reward-fill',
                style: { width: `${(v * 100).toFixed(0)}%` },
              })
            ),
            React.createElement('span', { className: 't1-reward-value' }, v.toFixed(2))
          );
        })
      )
    ),

    React.createElement('section', { className: 't1-section' },
      React.createElement('h4', null, 'Live Kaitiaki receipt chain'),
      React.createElement('p', { className: 't1-section-note' },
        'Each turn produces a signed receipt. Click any receipt to expand its payload.'
      ),
      React.createElement('ul', { className: 't1-receipt-list' },
        receipts.length === 0
          ? React.createElement('li', { className: 't1-empty' },
              'No receipts yet. Speak to Morphy to begin the chain.'
            )
          : receipts.map((r, i) =>
              React.createElement('li', {
                key: i,
                className: 't1-receipt' + (expandedReceipt === i ? ' expanded' : ''),
                onClick: () => setExpandedReceipt(expandedReceipt === i ? null : i),
              },
                React.createElement('span', { className: 't1-receipt-type' },
                  r.receipt_type || r.receipt_subtype || 'turn'
                ),
                React.createElement('span', { className: 't1-receipt-hash' },
                  (r.kaitiaki_receipt || '').slice(0, 12) + '...'
                ),
                React.createElement('span', { className: 't1-receipt-time' },
                  new Date(r.timestamp).toLocaleTimeString()
                ),
                expandedReceipt === i && React.createElement('pre', { className: 't1-receipt-payload' },
                  JSON.stringify(r, null, 2)
                )
              )
            )
      )
    ),

    React.createElement('section', { className: 't1-section' },
      React.createElement('h4', null, 'Recent SCARs (Self-Correcting Architectural Regulation)'),
      React.createElement('ul', { className: 't1-scar-list' },
        recentScars.map(scar =>
          React.createElement('li', { key: scar.id, className: 't1-scar' },
            React.createElement('span', { className: 't1-scar-id' }, scar.id),
            React.createElement('span', { className: 't1-scar-title' }, scar.title),
            React.createElement('span', { className: `t1-scar-status status-${scar.status}` },
              scar.status
            )
          )
        )
      )
    )
  );
}

window.T1Panel = T1Panel;