/* GestiFalla — App raíz: router + montaje */

function TraspasoSheet({ open, onClose, toast }) {
  const [amount, setAmount] = useState('15');
  const [to, setTo] = useState('M. Sanchis');
  const destinatarios = ['M. Sanchis Roig', 'Carmen Bellver', 'Joan Esteve', 'Tesorería falla'];
  return (
    <Sheet open={open} onClose={onClose} title="Traspasar Brustengos">
      <div className="gf-label" style={{ marginTop: 4 }}>Importe</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '10px 0 16px' }}>
        <input value={amount} onChange={e => setAmount(e.target.value.replace(/[^0-9]/g,''))} inputMode="numeric"
          style={{ width: 120, textAlign: 'right', border: 'none', outline: 'none', fontSize: 44, fontWeight: 800, color: 'var(--gf-text)', fontFamily: 'inherit', background: 'transparent' }} />
        <span style={{ fontSize: 30, fontWeight: 800, color: 'var(--gf-gold)', WebkitTextStroke: '0.5px #E0A93D' }}>{DATA.falla.moneda.simbolo}</span>
      </div>
      <div style={{ display: 'flex', gap: 8, justifyContent: 'center', marginBottom: 18 }}>
        {['5','10','15','25'].map(v => (
          <button key={v} onClick={() => setAmount(v)} style={{ padding: '7px 16px', borderRadius: 20, fontSize: 13, fontWeight: 800, background: amount === v ? 'var(--gf-primary)' : 'var(--gf-bg)', color: amount === v ? '#fff' : 'var(--gf-text)' }}>{v} ₿</button>
        ))}
      </div>
      <div className="gf-label">Destinatario</div>
      <div className="gf-list" style={{ marginBottom: 18 }}>
        {destinatarios.map((d, i) => (
          <button key={i} className="gf-row" style={{ width: '100%', textAlign: 'left' }} onClick={() => setTo(d.split(' ').slice(0,2).join(' '))}>
            <Avatar name={d} size={34} />
            <div className="gf-row__body"><div className="gf-row__title">{d}</div></div>
            <div style={{ width: 20, height: 20, borderRadius: '50%', border: `2px solid ${to === d.split(' ').slice(0,2).join(' ') ? 'var(--gf-primary)' : 'var(--gf-border)'}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              {to === d.split(' ').slice(0,2).join(' ') && <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--gf-primary)' }} />}
            </div>
          </button>
        ))}
      </div>
      <button className="gf-btn gf-btn--primary" onClick={() => { onClose(); toast(`${amount} ₿ enviados a ${to}`); }}>
        <I.transfer width="18" height="18" /> Enviar {amount} ₿
      </button>
    </Sheet>
  );
}

function App({ onStatusChange }) {
  const [logged, setLogged] = useState(false);
  const [screen, setScreen] = useState('home');
  const [evento, setEvento] = useState(null);
  const [sheet, setSheet] = useState(false);
  const [toast, fireToast] = useToast();

  const go = (s) => { setScreen(s); };
  const openEvento = (ev) => { setEvento(ev); setScreen('evento-detalle'); };

  // status bar: dark text only on login (gray bg). Everywhere else white over blue header.
  useEffect(() => { onStatusChange && onStatusChange(!logged); }, [logged]);

  let content;
  if (!logged) {
    content = <LoginScreen onLogin={() => { setLogged(true); setScreen('home'); }} />;
  } else if (screen === 'home') {
    content = <HomeScreen onNav={go} toast={fireToast} />;
  } else if (screen === 'ficha') {
    content = <FichaScreen onNav={go} onCarnet={() => go('carnet')} toast={fireToast} />;
  } else if (screen === 'carnet') {
    content = <TarjetaScreen onBack={() => go('ficha')} toast={fireToast} />;
  } else if (screen === 'monedero') {
    content = <MonederoScreen onNav={go} onTraspaso={() => setSheet(true)} toast={fireToast} />;
  } else if (screen === 'eventos') {
    content = <EventosScreen onNav={go} onEvento={openEvento} />;
  } else if (screen === 'evento-detalle') {
    content = <EventoDetalle ev={evento} onBack={() => go('eventos')} onTraspaso={() => fireToast('Traspaso de evento iniciado')} toast={fireToast} />;
  } else if (screen === 'perfil') {
    content = <PerfilScreen onNav={go} onLogout={() => { setLogged(false); }} toast={fireToast} />;
  }

  return (
    <div className="gf-app" data-screen-label={logged ? screen : 'login'}>
      {content}
      <TraspasoSheet open={sheet} onClose={() => setSheet(false)} toast={fireToast} />
      <Toast msg={toast} show={!!toast} />
    </div>
  );
}

/* Stateful bridge: status bar color updates per screen */
function Bridge() {
  const [dark, setDark] = useState(true);
  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, background: 'radial-gradient(circle at 50% -10%, #eef3f8, #d6dde6)' }}>
      <IOSDevice statusDark={dark}>
        <App onStatusChange={setDark} />
      </IOSDevice>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Bridge />);