/* perla dashboard · Home screen */
const { useState: useSt } = React;

/* ── Fake data ──────────────────────────────────────────────────── */
const TURNOS_HOY = [
  { id: 1, hora: '09:00', cliente: 'María Fernández', servicio: 'Corte + brushing',        profesional: 'Nahue',  status: 'confirmed', telefono: '+54 9 341 555-0142' },
  { id: 2, hora: '10:30', cliente: 'Julia Rossi',     servicio: 'Color · raíz',             profesional: 'Guido',  status: 'confirmed', telefono: '+54 9 341 555-0177' },
  { id: 3, hora: '11:45', cliente: 'Carolina Méndez', servicio: 'Manicura semi',            profesional: 'Tomi',   status: 'pending',   telefono: '+54 9 341 555-0208' },
  { id: 4, hora: '13:00', cliente: 'Lucía Paz',       servicio: 'Corte puntas',             profesional: 'Nahue',  status: 'cancelled', telefono: '+54 9 341 555-0311' },
  { id: 5, hora: '15:00', cliente: 'Rocío Álvarez',   servicio: 'Alisado progresivo',       profesional: 'Guido',  status: 'confirmed', telefono: '+54 9 341 555-0344' },
  { id: 6, hora: '16:30', cliente: 'Sofía Ibarra',    servicio: 'Color fantasía',           profesional: 'Guido',  status: 'pending',   telefono: '+54 9 341 555-0388' },
  { id: 7, hora: '18:00', cliente: 'Valentina Ruiz',  servicio: 'Corte + brushing',         profesional: 'Nahue',  status: 'confirmed', telefono: '+54 9 341 555-0421' },
  { id: 8, hora: '19:15', cliente: 'Clara Montoya',   servicio: 'Manicura tradicional',     profesional: 'Tomi',   status: 'confirmed', telefono: '+54 9 341 555-0499' },
];

const ALERTAS_INIT = [
  { id: 'a1', tipo: 'escal',    titulo: 'Rocío te pidió hablar con vos',   sub: 'Consulta sobre precio · hace 12 min',      cliente: 'Rocío Álvarez' },
  { id: 'a2', tipo: 'pending',  titulo: 'Carolina no confirmó su turno',   sub: 'Manicura semi · hoy 11:45 · sin respuesta', cliente: 'Carolina Méndez' },
  { id: 'a3', tipo: 'conflict', titulo: 'Cancelación deja hueco de 1h',    sub: 'Martes 13:00 · Lucía canceló',             cliente: null },
];

/* ── HOME ───────────────────────────────────────────────────────── */
const ScreenHome = ({ onOpenTurno, onNav, onConfirmTurno, onCancelTurno }) => {
  const now = new Date();
  const hour = now.getHours();
  const saludo = hour < 12 ? 'Buen día' : hour < 19 ? 'Buenas tardes' : 'Buenas noches';
  const fecha = now.toLocaleDateString('es-AR', { weekday: 'long', day: 'numeric', month: 'long' });
  const fechaCap = fecha.charAt(0).toUpperCase() + fecha.slice(1);

  const activos = TURNOS_HOY.filter(t => t.status !== 'cancelled');
  const confirm = TURNOS_HOY.filter(t => t.status === 'confirmed').length;
  const pend = TURNOS_HOY.filter(t => t.status === 'pending').length;
  const canc = TURNOS_HOY.filter(t => t.status === 'cancelled').length;

  const [alertas, setAlertas] = useSt(ALERTAS_INIT);
  const [agenteEstado, setAgenteEstado] = useSt('active'); // 'active' | 'paused' | 'needs'
  const dismissAlert = (id) => setAlertas(alertas.filter(a => a.id !== id));

  // Weekly comparison (fake data)
  const semanaActual = [8, 11, 9, 14, 10, 16, 0]; // lun-dom, hoy es dia 4 (jue=14)
  const semanaAnterior = [6, 9, 8, 10, 9, 12, 0];
  const totalActual = semanaActual.reduce((a,b)=>a+b,0);
  const totalAnterior = semanaAnterior.reduce((a,b)=>a+b,0);
  const deltaPct = Math.round(((totalActual - totalAnterior) / totalAnterior) * 100);

  const proximos = activos.slice(0, 4);

  const agenteCopy = {
    active: { eyebrow: 'Tu agente', titulo: 'Activo', sub: 'Respondió 14 charlas · nadie esperando', dot: '#2D7A7A' },
    paused: { eyebrow: 'Tu agente', titulo: 'En pausa', sub: 'No está respondiendo WhatsApp', dot: '#8A9BA0' },
    needs:  { eyebrow: 'Tu agente', titulo: '2 charlas te necesitan', sub: 'Escalaron consultas sin resolver', dot: '#5B4B7A' },
  }[agenteEstado];

  return (
    <div className="fade-up">
      {/* Saludo + microcopy */}
      <div className="greeting">
        <div className="greeting-date">{fechaCap}</div>
        <h1>{saludo},<br/><em>Seba</em>.</h1>
        <p className="sub">Hoy tenés <strong>{TURNOS_HOY.length} turnos</strong>. Todo en orden.</p>
      </div>

      {/* Contador turnos del día */}
      <div className="stats-row">
        <div className="stat-tile">
          <div className="stat-val stat-teal">{confirm}</div>
          <div className="stat-lbl">Confirmados</div>
        </div>
        <div className="stat-tile">
          <div className="stat-val stat-arena">{pend}</div>
          <div className="stat-lbl">Pendientes</div>
        </div>
        <div className="stat-tile">
          <div className="stat-val stat-muted">{canc}</div>
          <div className="stat-lbl">Cancelados</div>
        </div>
      </div>

      {/* Estado del agente */}
      <div className={'agente-card glass ' + agenteEstado} onClick={() => onNav('mensajes')} role="button" tabIndex={0}>
        <div className="agente-icon">
          <span className="agente-dot" style={{background: agenteCopy.dot}}></span>
          <span className="agente-dot-pulse" style={{background: agenteCopy.dot}}></span>
        </div>
        <div className="agente-body">
          <div className="agente-eyebrow">{agenteCopy.eyebrow}</div>
          <div className="agente-title">{agenteCopy.titulo}</div>
          <div className="agente-sub">{agenteCopy.sub}</div>
        </div>
        <span className="chev-muted"><Icons.chev/></span>
      </div>

      {/* Alertas activas */}
      {alertas.length > 0 && (
        <>
          <div className="section-label">
            <span>Necesitan tu atención</span>
            <span className="aside-mono">{alertas.length}</span>
          </div>
          <div className="alerts">
            {alertas.map(a => (
              <div key={a.id} className={'alert-card alert-' + a.tipo}>
                <div className="alert-bar"></div>
                <div className="alert-body">
                  <div className="alert-title">{a.titulo}</div>
                  <div className="alert-sub">{a.sub}</div>
                  <div className="alert-actions">
                    {a.cliente && (
                      <button className="link-action" onClick={(e) => { e.stopPropagation(); onNav('mensajes'); }}>
                        Abrir charla →
                      </button>
                    )}
                    <button className="link-action-muted" onClick={(e) => { e.stopPropagation(); dismissAlert(a.id); }}>
                      Descartar
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </>
      )}

      {/* Próximos turnos */}
      <div className="section-label">
        <span>Próximos turnos</span>
        <span className="aside" onClick={() => onNav('agenda')}>Ver agenda →</span>
      </div>
      <div className="glass proximos-list">
        {proximos.map((t, i) => (
          <div key={t.id} className={'prox-row' + (i === proximos.length-1 ? ' last' : '')}>
            <div className="prox-time">
              <div className="prox-hora">{t.hora}</div>
              <div className="prox-dur">45 min</div>
            </div>
            <div className="prox-rail">
              <span className={'prox-dot ' + t.status}></span>
              {i < proximos.length-1 && <span className="prox-line"></span>}
            </div>
            <div className="prox-main" onClick={() => onOpenTurno(t)}>
              <div className="prox-top">
                <span className="prox-name">{t.cliente}</span>
                {t.status === 'pending' && <span className="chip chip-pend">Sin confirmar</span>}
              </div>
              <div className="prox-meta">
                {t.servicio} · <span className="prox-prof">con {t.profesional}</span>
              </div>
              {t.status === 'pending' && (
                <div className="prox-inline-actions">
                  <button className="pill pill-primary" onClick={(e) => { e.stopPropagation(); onConfirmTurno(t); }}>
                    <Icons.check size={12}/> Confirmar
                  </button>
                  <button className="pill pill-ghost" onClick={(e) => { e.stopPropagation(); onCancelTurno(t); }}>
                    Cancelar
                  </button>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* Comparativo semanal */}
      <div className="section-label">
        <span>Esta semana</span>
        <span className="aside-mono">vs. semana anterior</span>
      </div>
      <div className="glass weekly">
        <div className="weekly-head">
          <div>
            <div className="weekly-total">{totalActual}</div>
            <div className="weekly-caption">turnos de lunes a sábado</div>
          </div>
          <div className={'weekly-delta ' + (deltaPct >= 0 ? 'up' : 'down')}>
            {deltaPct >= 0 ? <Icons.arrowUp size={11}/> : <Icons.arrowDown size={11}/>}
            <span>{Math.abs(deltaPct)}%</span>
          </div>
        </div>
        <div className="weekly-bars">
          {semanaActual.map((v, i) => {
            const max = Math.max(...semanaActual, ...semanaAnterior);
            const hCur = (v / max) * 100;
            const hPrev = (semanaAnterior[i] / max) * 100;
            const isToday = i === 3;
            const dayLbl = ['L','M','M','J','V','S','D'][i];
            return (
              <div key={i} className={'weekly-col' + (isToday ? ' today' : '')}>
                <div className="weekly-bar-wrap">
                  <div className="weekly-bar-prev" style={{height: hPrev + '%'}}></div>
                  <div className="weekly-bar-cur" style={{height: hCur + '%'}}></div>
                </div>
                <div className="weekly-lbl">{dayLbl}</div>
              </div>
            );
          })}
        </div>
        <div className="weekly-legend">
          <span><span className="dot-cur"></span>Esta semana</span>
          <span><span className="dot-prev"></span>Semana pasada</span>
        </div>
      </div>

      <div className="footer-mark">
        <span className="eyebrow-italic">Recuperá la calma.</span>
      </div>
    </div>
  );
};

Object.assign(window, { ScreenHome, TURNOS_HOY, ALERTAS_INIT });