// Summary panel — bottom right

const SummaryPanel = ({ totalIncome, totalCommitted, totalSupplied, period, sources, consumers }) => {
  const surplus = totalIncome - totalCommitted;
  const deficit = surplus < 0;
  const unpoweredCount = consumers.filter(c => {
    return c.amount > 0;
  }).length;

  const periodSuffix = period === 'monthly' ? '/mo' : period === 'biweekly' ? '/2wk' : '/wk';
  const annual = period === 'monthly' ? totalIncome * 12 : period === 'biweekly' ? totalIncome * 26 : totalIncome * 52;

  // bar dimensions
  const maxBar = Math.max(totalIncome, totalCommitted, 1);
  const incomePct = (totalIncome / maxBar) * 100;
  const committedPct = (totalCommitted / maxBar) * 100;

  return (
    <div className="summary-panel" style={{
      position: 'fixed',
      bottom: 16,
      right: 16,
      width: 320,
      background: 'rgba(11, 15, 22, 0.92)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      border: '1px solid var(--line-2)',
      borderRadius: 12,
      padding: 16,
      zIndex: 100,
      boxShadow: '0 -8px 32px rgba(0,0,0,0.4)'
    }}>
      {/* header */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 14,
        paddingBottom: 10,
        borderBottom: '1px solid var(--line)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{
            width: 6, height: 6, borderRadius: '50%',
            background: deficit ? 'var(--red)' : 'var(--green)',
            boxShadow: `0 0 8px ${deficit ? 'var(--red)' : 'var(--green)'}`,
            animation: 'pulse-glow 1.6s infinite'
          }} />
          <span style={{
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 10,
            letterSpacing: '0.2em',
            color: 'var(--ink-2)'
          }}>GRID STATUS</span>
        </div>
        <span style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10,
          letterSpacing: '0.15em',
          color: deficit ? 'var(--red)' : 'var(--green)',
          fontWeight: 700
        }}>
          {deficit ? '⚠ OVERDRAW' : 'NOMINAL'}
        </span>
      </div>

      {/* bars */}
      <div className="summary-bars" style={{ marginBottom: 14 }}>
        {/* Income bar */}
        <div style={{ marginBottom: 10 }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            marginBottom: 5,
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 9,
            letterSpacing: '0.1em'
          }}>
            <span style={{ color: 'var(--ink-3)', textTransform: 'uppercase' }}>Generation</span>
            <span style={{ color: 'var(--cyan)', fontWeight: 700 }}>${totalIncome.toFixed(0)}{periodSuffix}</span>
          </div>
          <div style={{
            height: 6,
            background: 'var(--bg-0)',
            border: '1px solid var(--line)',
            borderRadius: 3,
            overflow: 'hidden'
          }}>
            <div style={{
              height: '100%',
              width: `${incomePct}%`,
              background: 'linear-gradient(90deg, var(--cyan-dim), var(--cyan))',
              boxShadow: '0 0 8px var(--cyan)',
              transition: 'width 0.4s'
            }} />
          </div>
        </div>

        {/* Committed bar */}
        <div>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            marginBottom: 5,
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 9,
            letterSpacing: '0.1em'
          }}>
            <span style={{ color: 'var(--ink-3)', textTransform: 'uppercase' }}>Load</span>
            <span style={{ color: deficit ? 'var(--red)' : 'var(--amber)', fontWeight: 700 }}>${totalCommitted.toFixed(0)}{periodSuffix}</span>
          </div>
          <div style={{
            height: 6,
            background: 'var(--bg-0)',
            border: '1px solid var(--line)',
            borderRadius: 3,
            overflow: 'hidden'
          }}>
            <div style={{
              height: '100%',
              width: `${committedPct}%`,
              background: deficit
                ? 'linear-gradient(90deg, var(--red-dim), var(--red))'
                : 'linear-gradient(90deg, var(--amber-dim), var(--amber))',
              boxShadow: deficit ? '0 0 8px var(--red)' : '0 0 8px var(--amber)',
              transition: 'width 0.4s, background 0.3s'
            }} />
          </div>
        </div>
      </div>

      {/* Big surplus number */}
      <div className="summary-big" style={{
        background: 'var(--bg-0)',
        border: `1px solid ${deficit ? 'rgba(255, 85, 119, 0.3)' : 'rgba(110, 241, 149, 0.2)'}`,
        borderRadius: 8,
        padding: '12px 14px',
        marginBottom: 12,
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 9,
          letterSpacing: '0.15em',
          color: 'var(--ink-3)',
          textTransform: 'uppercase',
          marginBottom: 4
        }}>
          {deficit ? 'Deficit' : 'Surplus'}
        </div>
        <div className="summary-big-num" style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 28,
          fontWeight: 700,
          color: deficit ? 'var(--red)' : 'var(--green)',
          textShadow: `0 0 16px ${deficit ? 'var(--red)' : 'var(--green)'}`,
          lineHeight: 1
        }}>
          {deficit ? '-' : ''}${Math.abs(surplus).toFixed(0)}
        </div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 9,
          color: 'var(--ink-3)',
          marginTop: 4,
          letterSpacing: '0.05em'
        }}>
          {periodSuffix.replace('/', 'per ')} · ~${Math.abs(annual - (period === 'monthly' ? totalCommitted * 12 : period === 'biweekly' ? totalCommitted * 26 : totalCommitted * 52)).toFixed(0)} annual
        </div>
      </div>

      {/* mini stats grid */}
      <div className="summary-mini" style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr 1fr',
        gap: 8,
        fontFamily: 'JetBrains Mono, monospace'
      }}>
        <div style={{
          background: 'var(--bg-0)',
          border: '1px solid var(--line)',
          borderRadius: 6,
          padding: '8px 10px'
        }}>
          <div style={{ fontSize: 8, color: 'var(--ink-3)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>Sources</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--cyan)', marginTop: 2 }}>{sources.length}</div>
        </div>
        <div style={{
          background: 'var(--bg-0)',
          border: '1px solid var(--line)',
          borderRadius: 6,
          padding: '8px 10px'
        }}>
          <div style={{ fontSize: 8, color: 'var(--ink-3)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>Loads</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--amber)', marginTop: 2 }}>{consumers.length}</div>
        </div>
        <div style={{
          background: 'var(--bg-0)',
          border: '1px solid var(--line)',
          borderRadius: 6,
          padding: '8px 10px'
        }}>
          <div style={{ fontSize: 8, color: 'var(--ink-3)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>Funded</div>
          <div style={{ fontSize: 16, fontWeight: 700, color: 'var(--green)', marginTop: 2 }}>
            {totalCommitted > 0 ? Math.round((totalSupplied / totalCommitted) * 100) : 0}%
          </div>
        </div>
      </div>
    </div>
  );
};

window.SummaryPanel = SummaryPanel;