/* perla dashboard · Home · app shell */
const { useState: uSt } = React;

const App = () => {
  const [active, setActive] = uSt('home');
  const [sheet, setSheet] = uSt(null);
  const [newTurnOpen, setNewTurnOpen] = uSt(false);
  const [toast, setToast] = uSt(null);

  const showToast = (msg) => {
    setToast(msg);
    clearTimeout(window.__toastTimer);
    window.__toastTimer = setTimeout(() => setToast(null), 2400);
  };

  const handleConfirm = (t) => {
    showToast('Turno de ' + t.cliente.split(' ')[0] + ' confirmado');
  };
  const handleCancel = (t) => {
    showToast('Turno de ' + t.cliente.split(' ')[0] + ' cancelado');
  };

  return (
    <>
      <StatusBar/>
      <TopBar onNewTurn={() => setNewTurnOpen(true)}/>
      <div className="content" id="scroll">
        {active === 'home' && <ScreenHome onOpenTurno={setSheet} onNav={setActive} onConfirmTurno={handleConfirm} onCancelTurno={handleCancel}/>}
        {active !== 'home' && (
          <div className="placeholder fade-up">
            <span className="eyebrow-italic">Sección</span>
            <h2>{NAV.find(n => n.id === active).label}</h2>
            <p>Pantalla fuera de alcance de este entregable. Volvé al <button className="link-inline" onClick={() => setActive('home')}>Home</button>.</p>
          </div>
        )}
      </div>
      <BottomNav active={active} onSelect={setActive}/>

      {/* Turno sheet */}
      <div className={'modal-overlay' + (sheet ? ' on' : '')} onClick={() => setSheet(null)}></div>
      <div className={'sheet' + (sheet ? ' on' : '')} role="dialog" aria-modal="true">
        <div className="sheet-handle"></div>
        {sheet && (
          <>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:4}}>
              <div>
                <div className="sheet-eyebrow">{sheet.hora} · con {sheet.profesional}</div>
                <h2>{sheet.cliente}</h2>
                <div className="sub">{sheet.servicio}</div>
              </div>
              <button onClick={() => setSheet(null)} aria-label="Cerrar" className="sheet-close"><Icons.x/></button>
            </div>
            <div className="sheet-row">
              <div className="sheet-ico"><Icons.clock/></div>
              <div className="sheet-field"><div className="sheet-field-lbl">Horario</div><div className="sheet-field-val">{sheet.hora} — {(parseInt(sheet.hora)+1).toString().padStart(2,'0')}:00 hs</div></div>
            </div>
            <div className="sheet-row">
              <div className="sheet-ico"><Icons.phone size={15}/></div>
              <div className="sheet-field"><div className="sheet-field-lbl">Contacto</div><div className="sheet-field-val mono">{sheet.telefono}</div></div>
            </div>
            <div className="sheet-row">
              <div className="sheet-ico"><Icons.checkCircle/></div>
              <div className="sheet-field"><div className="sheet-field-lbl">Estado</div><div className="sheet-field-val">{statusLabel[sheet.status]}</div></div>
            </div>
            <div className="sheet-actions">
              <button className="btn-p" onClick={() => { window.location.href = 'Mensajes.html'; }}><Icons.message size={14}/> Abrir charla</button>
              {sheet.status === 'pending' && (
                <button className="btn-p" onClick={() => { handleConfirm(sheet); setSheet(null); }}><Icons.check size={14}/> Confirmar</button>
              )}
              <button className="btn-g" onClick={() => { handleCancel(sheet); setSheet(null); }}>Cancelar turno</button>
            </div>
          </>
        )}
      </div>

      {/* Nuevo turno sheet */}
      <div className={'modal-overlay' + (newTurnOpen ? ' on' : '')} onClick={() => setNewTurnOpen(false)}></div>
      <div className={'sheet' + (newTurnOpen ? ' on' : '')} role="dialog" aria-modal="true">
        <div className="sheet-handle"></div>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:10}}>
          <div>
            <div className="sheet-eyebrow">Crear turno</div>
            <h2>Nuevo turno</h2>
            <div className="sub">El agente va a confirmarlo por WhatsApp.</div>
          </div>
          <button onClick={() => setNewTurnOpen(false)} aria-label="Cerrar" className="sheet-close"><Icons.x/></button>
        </div>
        <div className="form-field">
          <label>Cliente</label>
          <div className="input-like"><Icons.search size={14}/><span>Buscar por nombre o teléfono…</span></div>
        </div>
        <div className="form-field">
          <label>Servicio</label>
          <div className="input-like"><span className="placeholder">Elegí un servicio</span><Icons.chevDown/></div>
        </div>
        <div className="form-row-2">
          <div className="form-field">
            <label>Fecha</label>
            <div className="input-like"><span>Hoy · 22 abr</span><Icons.chevDown/></div>
          </div>
          <div className="form-field">
            <label>Hora</label>
            <div className="input-like"><span className="placeholder">— : —</span><Icons.chevDown/></div>
          </div>
        </div>
        <div className="form-field">
          <label>Profesional</label>
          <div className="prof-chips">
            <span className="prof-chip active">Nahue</span>
            <span className="prof-chip">Guido</span>
            <span className="prof-chip">Tomi</span>
          </div>
        </div>
        <div className="sheet-actions">
          <button className="btn-p" onClick={() => { setNewTurnOpen(false); showToast('Turno creado · el agente va a confirmarlo'); }}><Icons.check size={14}/> Crear turno</button>
          <button className="btn-g" onClick={() => setNewTurnOpen(false)}>Cancelar</button>
        </div>
      </div>

      {/* Toast */}
      <div className={'toast' + (toast ? ' on' : '')}>
        <span className="toast-dot"></span>{toast}
      </div>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('app')).render(<App/>);