const STORE_KEY = 'eo_market_pedido_v2';

function loadState() {
  try {
    const raw = localStorage.getItem(STORE_KEY);
    if (raw) return JSON.parse(raw);
  } catch (e) {}
  return null;
}

const BLANK_DATA = { nombre: '', whatsapp: '', direccion: '', marinados: {}, notas: '' };

function App() {
  const { FRUTAS, VERDURAS, PROTEINAS, COMBOS } = window.EO_DATA;
  const saved = React.useRef(loadState()).current;

  const [cart, setCart]   = React.useState(saved?.cart || {});
  const [step, setStep]   = React.useState(saved?.step || 1);
  const [cat, setCat]     = React.useState('todo');
  const [query, setQuery] = React.useState('');
  const [city, setCity]   = React.useState(saved?.city || 'Cali');
  const [data, setData]   = React.useState(saved?.data || BLANK_DATA);
  const [orderNo, setOrderNo] = React.useState(saved?.orderNo || '');
  const [sheetTrigger, setSheetTrigger] = React.useState(0);
  const [config, setConfig] = React.useState(null); // { combo, initial } | null
  const [submitting, setSubmitting] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');

  // persist
  React.useEffect(() => {
    try { localStorage.setItem(STORE_KEY, JSON.stringify({ cart, step, city, data, orderNo })); } catch (e) {}
  }, [cart, step, city, data, orderNo]);

  // scroll to top whenever the flow step changes
  React.useEffect(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, [step]);

  const add = (p) => setCart((c) => ({ ...c, [p.id]: { product: p, qty: (c[p.id]?.qty || 0) + 1 } }));
  const inc = add;
  const dec = (p) => setCart((c) => {
    const q = (c[p.id]?.qty || 0) - 1;
    const n = { ...c };
    if (q <= 0) delete n[p.id]; else n[p.id] = { product: p, qty: q };
    return n;
  });
  const clear = () => setCart({});
  const qtyOf = (p) => cart[p.id]?.qty || 0;

  // combos open the configurator instead of adding directly
  const openConfig = (combo) => setConfig({ combo, initial: cart[combo.id]?.config || null });
  const confirmCombo = (combo, sel) => {
    setCart((c) => ({ ...c, [combo.id]: { product: combo, qty: 1, config: sel } }));
    setConfig(null);
  };
  const removeCombo = (combo) => setCart((c) => { const n = { ...c }; delete n[combo.id]; return n; });
  const count = Object.values(cart).reduce((s, l) => s + l.qty, 0);
  const { total } = window.computeTotals(Object.values(cart));

  const goCheckout = () => { if (count > 0) setStep(2); };

  const confirm = async () => {
    setSubmitting(true);
    setSubmitError('');
    try {
      const lines = Object.values(cart);
      const { subtotal, delivery, total: orderTotal } = window.computeTotals(lines);

      // Construir items para la API
      const items = [];
      for (const line of lines) {
        const p = line.product;
        if (p.combo) {
          // El combo como una línea
          items.push({ product_id: p.id, name: p.name, price: p.price, quantity: 1, marinado: null });
          // Sub-items seleccionados (precio 0, solo referencia)
          if (line.config) {
            for (const [slotId, picks] of Object.entries(line.config)) {
              for (const [prodId, qty] of Object.entries(picks)) {
                if (qty > 0) {
                  const sub = window.EO_DATA.BY_ID[prodId];
                  if (sub) items.push({ product_id: sub.id, name: sub.name, price: 0, quantity: qty, marinado: null });
                }
              }
            }
          }
        } else {
          items.push({
            product_id: p.id,
            name: p.name,
            price: p.price,
            quantity: line.qty,
            marinado: p.aliño ? (data.marinados[p.id] || null) : null,
          });
        }
      }

      const payload = {
        customer_name: data.nombre,
        whatsapp: data.whatsapp,
        city,
        address: data.direccion,
        notes: data.notas || null,
        items,
        subtotal,
        delivery_cost: delivery,
        total: orderTotal,
      };

      const res = await fetch('/api/orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const json = await res.json();
      if (!json.success) throw new Error(json.error || 'Error al guardar el pedido');

      setOrderNo(json.data.order_id);
      setStep(3);
    } catch (err) {
      setSubmitError(err.message || 'No se pudo enviar el pedido. Intenta de nuevo.');
    } finally {
      setSubmitting(false);
    }
  };

  const restart = () => { setCart({}); setData(BLANK_DATA); setOrderNo(''); setCat('todo'); setQuery(''); setSubmitError(''); setStep(1); };
  const updateData = (patch) => setData((d) => ({ ...d, ...patch }));

  // ---- catalog filtering ----
  const match = (p) => !query.trim() || p.name.toLowerCase().includes(query.toLowerCase());
  const combos   = COMBOS.filter(match);
  const frutas   = FRUTAS.filter(match);
  const verduras = VERDURAS.map((v) => ({ ...v, veg: true })).filter(match);
  const proteinas = PROTEINAS.filter(match);

  const show = (id) => cat === 'todo' || cat === id;
  const showCombos = show('combos') && combos.length > 0;
  const showFrutas = show('frutas') && frutas.length > 0;
  const showVerd   = show('verduras') && verduras.length > 0;
  const showProt   = show('proteinas') && proteinas.length > 0;
  const nothing = !showCombos && !showFrutas && !showVerd && !showProt;

  const grid = (arr) => (
    <div className="grid">
      {arr.map((p) => <ProductCard key={p.id} product={p} qty={qtyOf(p)} onAdd={add} onInc={inc} onDec={dec} />)}
    </div>
  );

  const cartProps = { items: cart, city, onInc: inc, onDec: dec, onClear: clear, onCheckout: goCheckout, onEditCombo: openConfig };

  return (
    <div className={'app step-' + step}>
      <Header
        count={count} total={total}
        city={city} onCityChange={setCity}
        query={query} onQuery={setQuery}
        showSearch={step === 1}
        onCartClick={() => { if (step === 1) setSheetTrigger((n) => n + 1); else if (step === 2) window.scrollTo({ top: 0, behavior: 'smooth' }); }}
        step={step}
      />

      <Stepper step={step} onGoto={(n) => setStep(n)} />

      {step === 1 && (
        <React.Fragment>
          <Hero />
          <div className="shell">
            <main className="catalog">
              <CategoryBar active={cat} onChange={setCat} />

              {showCombos && (
                <Section title="Combos Óptimo" subtitle="Mercado completo, listo para la semana. El domicilio va incluido.">
                  <div className="combo-grid">
                    {combos.map((c) => <ComboCard key={c.id} combo={c} inCart={!!cart[c.id]} onConfigure={openConfig} onRemove={removeCombo} />)}
                  </div>
                </Section>
              )}

              {showFrutas && (
                <Section title="Frutas" subtitle="Lavadas, picadas y porcionadas en recipiente. Se conservan ~15 días.">
                  {grid(frutas)}
                </Section>
              )}

              {showVerd && (
                <Section title="Verduras" subtitle="Lavadas y porcionadas, listas para cocinar. Puedes repetir las que más uses.">
                  {grid(verduras)}
                </Section>
              )}

              {showProt && (
                <Section title="Proteínas" subtitle="Filetes y cuadritos porcionados. Pídelos aliñados en el siguiente paso.">
                  {grid(proteinas)}
                </Section>
              )}

              {nothing && (
                <div className="empty"><Icon name="Search" size={30}/><h3>Sin resultados</h3><p>No encontramos "{query}". Prueba con otra fruta, verdura o proteína.</p></div>
              )}
            </main>

            <CartPanel {...cartProps} />
          </div>
          <Footer />
          <MobileCart {...cartProps} forceOpen={sheetTrigger} />
        </React.Fragment>
      )}

      {step === 2 && (
        <DatosForm
          items={cart} city={city} onCityChange={setCity}
          data={data} onChange={updateData}
          onBack={() => setStep(1)} onConfirm={confirm}
          submitting={submitting} submitError={submitError}
        />
      )}

      {step === 3 && (
        <Confirmacion items={cart} city={city} data={data} orderNo={orderNo} onRestart={restart} />
      )}

      {config && (
        <ComboConfig
          combo={config.combo} initial={config.initial}
          onClose={() => setConfig(null)}
          onConfirm={(sel) => confirmCombo(config.combo, sel)}
        />
      )}
    </div>
  );
}

function AppLoader() {
  const [ready, setReady] = React.useState(false);
  const [error, setError] = React.useState(false);

  React.useEffect(() => {
    window.EO_READY
      .then(() => setReady(true))
      .catch(() => { setError(true); setReady(true); });
  }, []);

  if (!ready) return (
    <div className="app-loading">
      <div className="app-loading__spinner" />
      <p className="app-loading__text">Cargando productos…</p>
    </div>
  );

  if (error) return (
    <div className="app-loading">
      <p className="app-loading__text" style={{color:'var(--eo-magenta)'}}>
        No se pudieron cargar los productos. Recarga la página.
      </p>
    </div>
  );

  return <App />;
}

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