import React from 'react';

export default function InfoPanel({ isOpen, onToggle, activeSession, lastModel, lastTokenCount, selectedModel, onModelChange, models }) {
  return (
    <div className="flex-col" style={{
  position: 'fixed',
  top: 0,
  right: 0,
  height: '100vh',
  width: 'var(--panel-width)',
  background: 'var(--bg-surface)',
  borderLeft: '1px solid var(--border)',
  transform: isOpen ? 'translateX(0)' : 'translateX(100%)',
  transition: 'transform 0.2s ease',
  zIndex: 20,
}}>

      {/* Header */}
      <div className="panel-header" style={{
        justifyContent: isOpen ? 'space-between' : 'center',
        padding: isOpen ? '0 16px 0 12px' : '0',
      }}>
        <button className="btn-icon" onClick={onToggle}>{isOpen ? '▶' : '◀'}</button>
        {isOpen && <span className="text-base" style={{ fontWeight: 500, color: 'var(--text-secondary)' }}>Session Info</span>}
      </div>

      {isOpen && (
        <div className="flex-1 scroll-y" style={{ padding: '16px' }}>

          {/* Model selector */}
          <Section title="Model">
            <select
              value={selectedModel}
              onChange={e => onModelChange(e.target.value)}
              style={{
                width: '100%',
                padding: '8px 10px',
                background: 'var(--bg-elevated)',
                border: '1px solid var(--border)',
                borderRadius: 'var(--radius-md)',
                color: 'var(--text-primary)',
                fontSize: '13px',
                cursor: 'pointer',
                outline: 'none',
              }}
            >
              {models.map(m => (
                <option key={m.value} value={m.value}>{m.label}</option>
              ))}
            </select>
          </Section>

          {/* Session details */}
          <Section title="Session">
            {activeSession ? (
              <div className="flex-col" style={{ gap: '8px' }}>
                <InfoRow label="ID" value={activeSession.external_id} mono truncate />
                <InfoRow label="Status" value={activeSession.isNew ? 'Unsaved' : 'Active'} accent={activeSession.isNew} />
              </div>
            ) : (
              <p className="text-sm text-muted">No session selected</p>
            )}
          </Section>

          {/* Last response stats */}
          <Section title="Last Response">
            {lastModel ? (
              <div className="flex-col" style={{ gap: '8px' }}>
                <InfoRow label="Model"  value={lastModel} />
                <InfoRow label="Tokens" value={lastTokenCount > 0 ? lastTokenCount.toLocaleString() : '—'} />
              </div>
            ) : (
              <p className="text-sm text-muted">No response yet</p>
            )}
          </Section>

        </div>
      )}
    </div>
  );
}

function Section({ title, children }) {
  return (
    <div style={{ marginBottom: '24px' }}>
      <p className="label-upper" style={{ marginBottom: '10px' }}>{title}</p>
      {children}
    </div>
  );
}

function InfoRow({ label, value, mono, truncate, accent }) {
  return (
    <div className="flex items-center" style={{ justifyContent: 'space-between', gap: '8px' }}>
      <span className="text-sm text-muted flex-shrink">{label}</span>
      <span style={{
        fontSize: '12px',
        color: accent ? 'var(--accent)' : 'var(--text-secondary)',
        fontFamily: mono ? 'monospace' : 'inherit',
        overflow: truncate ? 'hidden' : 'visible',
        textOverflow: truncate ? 'ellipsis' : 'clip',
        whiteSpace: truncate ? 'nowrap' : 'normal',
        maxWidth: truncate ? '130px' : 'auto',
        textAlign: 'right',
      }}>
        {value}
      </span>
    </div>
  );
}

function IconHint({ title, children }) {
  return (
    <div title={title} style={{
      width: '32px',
      height: '32px',
      borderRadius: 'var(--radius-md)',
      background: 'var(--bg-elevated)',
      border: '1px solid var(--border)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '12px',
      color: 'var(--text-muted)',
      cursor: 'default',
    }}>
      {children}
    </div>
  );
}