const { Input, Button, Badge, Kicker, BrandIcon, Card } = window.GrupoHaykDesignSystem_364dc7;
const { useState } = React;

const TRK_CSS = `
.track{ background:var(--surface-subtle); padding:88px 28px; }
.track__in{ max-width:980px; margin:0 auto; }
.track__head{ text-align:center; max-width:560px; margin:0 auto 36px; }
.track__head h2{ font-family:var(--font-display); font-weight:800; font-size:var(--fs-h2);
  letter-spacing:-.02em; color:var(--text-primary); margin:12px 0 12px; }
.track__head p{ font-family:var(--font-body); font-size:var(--fs-body-lg); color:var(--text-secondary); margin:0; }
.track__bar{ display:flex; gap:12px; align-items:flex-end; max-width:560px; margin:0 auto; }
.track__bar > div:first-child{ flex:1; }
.track__result{ margin-top:24px; }
.tr-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.tr-cell{ display:flex; flex-direction:column; gap:8px; }
.tr-cell .ic{ width:48px; height:48px; border-radius:var(--radius-md); background:var(--navy-50);
  display:flex; align-items:center; justify-content:center; }
.tr-cell b{ font-family:var(--font-body); font-weight:800; font-size:18px; color:var(--text-primary); }
.tr-cell span{ font-family:var(--font-body); font-size:12px; color:var(--text-secondary); }
.tr-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.tr-top h3{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h4); margin:0; color:var(--text-primary); }
.kick-center{ display:flex; justify-content:center; }
@media(max-width:680px){ .tr-grid{ grid-template-columns:1fr 1fr; } }
`;
{
  const _p = document.getElementById('track-css'); if (_p) _p.remove();
  const s = document.createElement('style'); s.id = 'track-css'; s.textContent = TRK_CSS; document.head.appendChild(s);
}

function Tracking() {
  const [guia, setGuia] = useState('HK-48217');
  const [shown, setShown] = useState(true);
  const [error, setError] = useState('');

  function lookup() {
    if (!/^HK-\d{3,}/i.test(guia.trim())) { setError('Formato inválido. Ej: HK-48217'); setShown(false); return; }
    setError(''); setShown(true);
    // Abre la página de detalle del servicio
    window.location.href = 'rastreo.html?guia=' + encodeURIComponent(guia.trim().toUpperCase());
  }

  return (
    <section className="track" id="rastreo">
      <div className="track__in">
        <div className="track__head">
          <div className="kick-center"><Kicker>Rastreo en vivo</Kicker></div>
          <h2>¿Dónde está mi carga?</h2>
          <p>Ingresa tu número de guía y conoce ubicación, temperatura y tiempo estimado de entrega.</p>
        </div>
        <div className="track__bar">
          <Input label="Número de guía" value={guia}
            onChange={(e) => setGuia(e.target.value)}
            onKeyDown={(e) => e.key === 'Enter' && lookup()}
            error={error} placeholder="HK-00000" />
          <Button variant="primary" size="md" onClick={lookup} arrow>Rastrear</Button>
        </div>

        {shown && (
          <div className="track__result">
            <Card padding="lg" accent interactive onClick={() => window.location.href = 'rastreo.html?guia=' + encodeURIComponent(guia.trim().toUpperCase())}>
              <div className="tr-top">
                <h3>Guía {guia.toUpperCase()}</h3>
                <div style={{ display: 'flex', gap: 8 }}>
                  <Badge variant="solid-green" dot>En ruta</Badge>
                  <Badge variant="success">Temp. OK</Badge>
                </div>
              </div>
              <div className="tr-grid">
                <div className="tr-cell"><div className="ic"><BrandIcon name="geolocalizacion" size={28} /></div><b>Km 612 · Saltillo</b><span>Ubicación actual</span></div>
                <div className="tr-cell"><div className="ic"><BrandIcon name="temperatura" size={28} /></div><b>3.8 °C</b><span>Refrigerado · estable</span></div>
                <div className="tr-cell"><div className="ic"><BrandIcon name="puntualidad" size={28} /></div><b>ETA 18:40</b><span>Hoy · a tiempo</span></div>
                <div className="tr-cell"><div className="ic"><BrandIcon name="reefer" size={28} /></div><b>Reefer 40'</b><span>CDMX → Monterrey</span></div>
              </div>
            </Card>
          </div>
        )}
      </div>
    </section>
  );
}
window.Tracking = Tracking;