// Filter info panel — overlays the calculator card when a filter's "?" is open.
// Closes on click-outside (pointerdown) or Escape.

function InfoPanel({ filter, onClose, style }) {
  if (!filter) return null;
  const t = filter.tooltip;
  const panelRef = React.useRef(null);

  React.useEffect(() => {
    const onDocDown = (e) => {
      if (!panelRef.current) return;
      if (panelRef.current.contains(e.target)) return;
      onClose();
    };
    setTimeout(() => document.addEventListener('pointerdown', onDocDown), 0);
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('pointerdown', onDocDown);
      document.removeEventListener('keydown', onKey);
    };
  }, [onClose]);

  return (
    <div ref={panelRef} style={{
      position: 'absolute',
      background: 'var(--bg)',
      color: 'var(--fg)',
      border: '1px solid rgba(var(--fg-rgb), 0.13)',
      borderRadius: 4,
      padding: '20px 22px',
      overflowY: 'auto',
      boxShadow: '-16px 0 40px rgba(0,0,0,0.25)',
      animation: 'panelIn 0.35s cubic-bezier(0.2, 0.9, 0.2, 1)',
      zIndex: 50,
      ...style,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
        <div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.2em', opacity: 0.55, marginBottom: 4 }}>
            {`// filter ${String(window.RARE_FILTERS.findIndex(f => f.id === filter.id) + 1).padStart(2, '0')} · pass rate ×${filter.passRate}`}
          </div>
          <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 20, lineHeight: 1.1, fontWeight: 400, margin: 0 }}>
            {filter.label}
          </h3>
        </div>
        <button onClick={onClose} style={{
          background: 'transparent',
          border: '1px solid rgba(var(--fg-rgb), 0.15)',
          color: 'var(--fg)',
          width: 22, height: 22, borderRadius: 3, cursor: 'pointer', fontSize: 10,
          fontFamily: 'var(--font-mono)', flexShrink: 0, marginLeft: 12,
        }}>✕</button>
      </div>
      <div style={{
        borderLeft: '2px solid var(--accent)', paddingLeft: 10,
        fontFamily: 'var(--font-serif)', fontSize: 13, lineHeight: 1.45, fontStyle: 'italic',
        marginBottom: 14, opacity: 0.95,
      }}>{t.stat}</div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.2em',
        opacity: 0.55, marginBottom: 6,
      }}>{'// sources'}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, marginBottom: 12 }}>
        {t.sources.map((s, i) => (
          <li key={i} style={{ padding: '6px 0', borderTop: '1px solid rgba(var(--fg-rgb), 0.08)' }}>
            <a href={s.url} target="_blank" rel="noopener noreferrer" style={{
              color: 'var(--fg)', textDecoration: 'none', fontSize: 11, fontWeight: 500,
              display: 'block', fontFamily: 'var(--font-mono)',
            }}>
              {s.name} <span style={{ color: 'var(--accent)' }}>↗</span>
            </a>
            <div style={{
              fontSize: 10, opacity: 0.65, marginTop: 1, lineHeight: 1.45,
              fontFamily: 'var(--font-mono)',
            }}>
              {s.stat}
            </div>
          </li>
        ))}
      </ul>
      <div style={{
        padding: '8px 10px',
        background: 'rgba(var(--accent-rgb), 0.06)',
        border: '1px solid rgba(var(--accent-rgb), 0.2)',
        fontFamily: 'var(--font-mono)', fontSize: 10, lineHeight: 1.5,
      }}>
        <div style={{ letterSpacing: '0.2em', fontSize: 8, opacity: 0.7, marginBottom: 3 }}>SKEPTIC'S NOTE</div>
        <div style={{ opacity: 0.88 }}>{t.caveat}</div>
      </div>
    </div>
  );
}

window.InfoPanel = InfoPanel;