/* global React */

const ESCUDERIAS = [
  { id: 'ferrari', name: 'Ferrari', tag: 'Tifosi zone', color: '#dc2626', flag: '🏎️' },
  { id: 'redbull', name: 'Red Bull', tag: 'Bull pen', color: '#1e40af', flag: '🐂' },
  { id: 'mclaren', name: 'McLaren', tag: 'Papaya box', color: '#f59e0b', flag: '🧡' },
  { id: 'mercedes', name: 'Mercedes', tag: 'Silver arrows', color: '#10b981', flag: '⭐' }
];

const COMIDAS = [
  { id: 'picada-grande', name: 'Picada Grand Prix', desc: 'Para 4 personas', price: 18000 },
  { id: 'picada-chica', name: 'Picada Box', desc: 'Para 2 personas', price: 11000 },
  { id: 'burger', name: 'Burger Pole', desc: 'Cheddar + bacon', price: 7500 },
  { id: 'pizza', name: 'Pizza Pirelli', desc: 'Mozza, jamón, rúcula', price: 9000 },
  { id: 'empanadas', name: 'Docena empanadas', desc: 'Mix carne + pollo', price: 8500 },
];

const TRAGOS = [
  { id: 'cerveza', name: 'Pinta de cerveza', price: 3500 },
  { id: 'gintonic', name: 'Gin Tonic', price: 5500 },
  { id: 'aperol', name: 'Aperol Spritz', price: 5500 },
  { id: 'fernet', name: 'Fernet con coca', price: 4500 },
  { id: 'whisky', name: 'Whisky on the rocks', price: 6500 },
  { id: 'limonada', name: 'Limonada (sin alcohol)', price: 3000 }
];

const DURACIONES = [
  { mins: 15, label: 'Vuelta rápida', mult: 4500 },
  { mins: 30, label: 'Sprint', mult: 8000 },
  { mins: 60, label: 'GP', mult: 14000 },
  { mins: 120, label: 'Resistencia', mult: 24000 }
];

function Configurator() {
  const [esc, setEsc] = React.useState('redbull');
  const [comidas, setComidas] = React.useState([]);
  const [tragos, setTragos] = React.useState([]);
  const [duration, setDuration] = React.useState(30);
  const [people, setPeople] = React.useState(2);

  const toggle = (arr, setArr, id) => {
    setArr(arr.includes(id) ? arr.filter(x => x !== id) : [...arr, id]);
  };

  const totals = React.useMemo(() => {
    const dur = DURACIONES.find(d => d.mins === duration);
    const simCost = (dur?.mult || 0);
    const comidaCost = comidas.reduce((s, id) => s + (COMIDAS.find(c => c.id === id)?.price || 0), 0);
    const tragoCost = tragos.reduce((s, id) => s + (TRAGOS.find(t => t.id === id)?.price || 0), 0) * people;
    return { simCost, comidaCost, tragoCost, total: simCost + comidaCost + tragoCost };
  }, [duration, comidas, tragos, people]);

  const escObj = ESCUDERIAS.find(e => e.id === esc);
  const fmt = (n) => '$' + n.toLocaleString('es-AR');

  const buildWspMessage = () => {
    const lines = [
      `*¡Hola! Quiero reservar en Vamo' Nene 🏁*`,
      ``,
      `🏎 Escudería: ${escObj.name}`,
      `⏱ Simulador: ${duration} min — ${DURACIONES.find(d=>d.mins===duration).label}`,
      `👥 Personas: ${people}`,
      ``,
      `🍴 Comida: ${comidas.length ? comidas.map(id => COMIDAS.find(c=>c.id===id).name).join(', ') : 'A elegir en el lugar'}`,
      `🍹 Tragos: ${tragos.length ? tragos.map(id => TRAGOS.find(t=>t.id===id).name).join(', ') : 'A elegir en el lugar'}`,
      ``,
      `💰 Total estimado: ${fmt(totals.total)}`,
      ``,
      `¿Cuándo me podrían dar mesa?`
    ];
    return encodeURIComponent(lines.join('\n'));
  };

  return (
    <section className="configurator" id="configurador">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Tu Noche</span>
          <h2 className="display">Armá tu <span className="accent">noche</span>, dale</h2>
          <p>
            Cuatro pasos. Elegís escudería, picás algo, te servís lo tuyo y le ponés tiempo al simulador.
            Te tiramos el total y arreglás por WhatsApp en dos clicks.
          </p>
        </div>

        <div className="config-grid">
          <div className="config-steps">
            {/* Step 1 — Escudería */}
            <div className={`step ${esc ? 'done' : 'active'}`}>
              <div className="step-head">
                <div className="step-num">{esc ? '✓' : '1'}</div>
                <div>
                  <div className="label">Paso 01</div>
                  <h3>Tu escudería</h3>
                </div>
              </div>
              <div className="escuderias">
                {ESCUDERIAS.map(e => (
                  <div
                    key={e.id}
                    className={`esc-card ${esc === e.id ? 'selected' : ''}`}
                    style={{ '--esc-color': e.color }}
                    onClick={() => setEsc(e.id)}
                  >
                    <div className="esc-flag">{e.flag}</div>
                    <div className="esc-name">{e.name}</div>
                    <div className="esc-tag">{e.tag}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Step 2 — Comida */}
            <div className="step">
              <div className="step-head">
                <div className="step-num">{comidas.length ? '✓' : '2'}</div>
                <div>
                  <div className="label">Paso 02 · Opcional</div>
                  <h3>Para picar</h3>
                </div>
              </div>
              <div className="pills">
                {COMIDAS.map(c => (
                  <div
                    key={c.id}
                    className={`pill ${comidas.includes(c.id) ? 'selected' : ''}`}
                    onClick={() => toggle(comidas, setComidas, c.id)}
                  >
                    <span>{c.name}</span>
                    <span className="price">{fmt(c.price)}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Step 3 — Tragos */}
            <div className="step">
              <div className="step-head">
                <div className="step-num">{tragos.length ? '✓' : '3'}</div>
                <div>
                  <div className="label">Paso 03 · Opcional</div>
                  <h3>Para tomar</h3>
                </div>
              </div>
              <div className="pills">
                {TRAGOS.map(t => (
                  <div
                    key={t.id}
                    className={`pill ${tragos.includes(t.id) ? 'selected' : ''}`}
                    onClick={() => toggle(tragos, setTragos, t.id)}
                  >
                    <span>{t.name}</span>
                    <span className="price">{fmt(t.price)} c/u</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-dim)', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
                <span>Personas:</span>
                <button onClick={() => setPeople(Math.max(1, people - 1))} style={{ width: 32, height: 32, border: '1px solid var(--line-2)', borderRadius: 8, color: 'var(--ink)' }}>−</button>
                <span style={{ color: 'var(--primary)', fontSize: 18 }}>{people}</span>
                <button onClick={() => setPeople(Math.min(20, people + 1))} style={{ width: 32, height: 32, border: '1px solid var(--line-2)', borderRadius: 8, color: 'var(--ink)' }}>+</button>
              </div>
            </div>

            {/* Step 4 — Duration */}
            <div className="step active">
              <div className="step-head">
                <div className="step-num">4</div>
                <div>
                  <div className="label">Paso 04</div>
                  <h3>Tiempo en simulador</h3>
                </div>
              </div>
              <div className="duration-track">
                {DURACIONES.map(d => (
                  <div
                    key={d.mins}
                    className={`duration-opt ${duration === d.mins ? 'selected' : ''}`}
                    onClick={() => setDuration(d.mins)}
                  >
                    <div className="min">{d.mins}<span style={{ fontSize: 14 }}>m</span></div>
                    <div className="lbl">{d.label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Receipt */}
          <div className="receipt">
            <div className="receipt-head">
              <h4>Tu vuelta</h4>
              <div className="num">#VN-{Math.floor(Math.random() * 9000 + 1000)}</div>
            </div>
            <div className="receipt-body">
              <div className="receipt-row">
                <div>
                  <span className="lbl">Escudería</span>
                  <span className="val">{escObj.name}</span>
                </div>
                <span className="price" style={{ color: escObj.color }}>●</span>
              </div>
              <div className="receipt-row">
                <div>
                  <span className="lbl">Simulador</span>
                  <span className="val">{duration} min · {DURACIONES.find(d=>d.mins===duration).label}</span>
                </div>
                <span className="price">{fmt(totals.simCost)}</span>
              </div>
              <div className="receipt-row">
                <div>
                  <span className="lbl">Comida ({comidas.length})</span>
                  {comidas.length === 0
                    ? <span className="empty">— elegís en el bar —</span>
                    : <span className="val" style={{ fontSize: 13 }}>{comidas.map(id => COMIDAS.find(c=>c.id===id).name).join(', ')}</span>
                  }
                </div>
                <span className="price">{fmt(totals.comidaCost)}</span>
              </div>
              <div className="receipt-row">
                <div>
                  <span className="lbl">Tragos ({tragos.length} × {people})</span>
                  {tragos.length === 0
                    ? <span className="empty">— elegís en el bar —</span>
                    : <span className="val" style={{ fontSize: 13 }}>{tragos.map(id => TRAGOS.find(t=>t.id===id).name).join(', ')}</span>
                  }
                </div>
                <span className="price">{fmt(totals.tragoCost)}</span>
              </div>

              <div className="receipt-total">
                <span className="lbl">Total</span>
                <span className="val">{fmt(totals.total)}</span>
              </div>
            </div>
            <div className="receipt-foot">
              <a
                href={`https://wa.me/5491100000000?text=${buildWspMessage()}`}
                target="_blank"
                rel="noopener"
                className="btn btn-wsp"
              >
                Reservar por WhatsApp
              </a>
              <small>Confirmamos disponibilidad en menos de 10 min</small>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Configurator = Configurator;