// PinScreen — captura PIN de 4 dígitos y llama onPin(pin).
// La validación contra la API la hace App.jsx.

function PinScreen({ onPin, loading, error }) {
  const [pin, setPin] = React.useState('');

  // Limpiar PIN cuando hay error (para reintentar)
  React.useEffect(() => {
    if (error) setPin('');
  }, [error]);

  const press = (d) => {
    if (loading || pin.length >= 4) return;
    const next = pin + d;
    setPin(next);
    if (next.length === 4) {
      setTimeout(() => onPin(next), 100);
    }
  };

  const del = () => { if (!loading) setPin(pin.slice(0, -1)); };

  return (
    <div className="login-screen">
      <a href="../" style={{alignSelf:'flex-start',fontSize:13,color:'var(--muted)',textDecoration:'none'}}>← Inicio</a>
      <div className="login-brand">
        <img className="login-logo" src="../assets/dina-logo-horizontal-white.png" alt="Dinalight" />
        <div className="login-title">Cierre de Turno</div>
      </div>

      <div className="login-prompt">PIN del grupo</div>

      <div className="pin-dots">
        {[0,1,2,3].map((i) => (
          <span key={i} className={'pin-dot' + (pin.length > i ? ' on' : '')}></span>
        ))}
      </div>

      <div className="pin-grid">
        {[1,2,3,4,5,6,7,8,9].map((n) => (
          <button key={n} className="pin-key" onClick={() => press(String(n))} disabled={loading}>{n}</button>
        ))}
        <button className="pin-key pin-key-del" onClick={del} disabled={loading}>⌫</button>
        <button className="pin-key" onClick={() => press('0')} disabled={loading}>0</button>
        <button className="pin-key pin-key-clear" onClick={() => setPin('')} disabled={loading}>×</button>
      </div>

      {loading && <div style={{color:'var(--muted)',fontSize:13,marginTop:8}}>Verificando…</div>}
      <div className="pin-err">{error}</div>
    </div>
  );
}

Object.assign(window, { PinScreen });