// app.jsx — Verduras Frescas RD · router + estado global

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hue": 145,
  "radius": "soft",
  "density": "regular",
  "fontPair": "poppins-inter",
  "gridCols": 4,
  "showImages": true
}/*EDITMODE-END*/;

const FONT_PAIRS = {
  'poppins-inter': {
    display: '"Poppins", ui-sans-serif, system-ui, sans-serif',
    ui: '"Inter", ui-sans-serif, system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  'manrope-manrope': {
    display: '"Manrope", ui-sans-serif, system-ui, sans-serif',
    ui: '"Manrope", ui-sans-serif, system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
  'instrument-manrope': {
    display: '"Instrument Serif", Georgia, serif',
    ui: '"Manrope", ui-sans-serif, system-ui, sans-serif',
    mono: '"JetBrains Mono", ui-monospace, monospace',
  },
};

const HUES = {
  'verde':     145,   // forest / botanical
  'oliva':     115,   // olive
  'lima':      130,   // bright leaf
  'esmeralda': 165,   // emerald / teal-green
};

const CONTACT = {
  wa: '+1 (809) 555 · 0123',
  waRaw: '18095550123',
  email: 'pedidos@casaviva.do',
  address: 'Av. Independencia 245, Naco, Santo Domingo',
  hours: 'Lun–Sáb · 7:00am a 6:00pm',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState('home');           // home | productos | detalle | carrito | contacto | login
  const [productId, setProductId] = useState(null);
  const [filter, setFilter] = useState('todos');
  const [search, setSearch] = useState('');
  const [cart, setCart] = useState([]);
  const [cartOpen, setCartOpen] = useState(false);
  const [emailOpen, setEmailOpen] = useState(false);
  const [justAddedId, setJustAddedId] = useState(null);
  const [user, setUser] = useState(null);

  // Restaurar sesión si hay token guardado
  useEffect(() => {
    const token = window.CV_API?.getAuthToken?.();
    if (!token) return;
    window.authAPI.getProfile()
      .then((res) => { if (res?.user) setUser(res.user); })
      .catch(() => { window.CV_API?.setAuthToken?.(null); });
  }, []);

  const handleLogout = () => {
    window.authAPI?.logout?.();
    setUser(null);
    setRoute('home');
  };

  // Apply tweaks to document
  useEffect(() => {
    const root = document.documentElement;
    const hueVal = typeof t.hue === 'number' ? t.hue : (HUES[t.hue] || 145);
    root.style.setProperty('--hue', hueVal);
    root.dataset.density = t.density;
    root.dataset.radius = t.radius;
    const pair = FONT_PAIRS[t.fontPair] || FONT_PAIRS['instrument-manrope'];
    root.style.setProperty('--font-display', pair.display);
    root.style.setProperty('--font-ui', pair.ui);
    root.style.setProperty('--font-mono', pair.mono);
  }, [t.hue, t.density, t.radius, t.fontPair]);

  const navigate = (r, opts = {}) => {
    setRoute(r);
    if (opts.cat) setFilter(opts.cat);
    if (opts.productId) setProductId(opts.productId);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const onOpenProduct = (id) => {
    setProductId(id);
    navigate('detalle');
  };

  const onAdd = (p, qty = 1, unit = null) => {
    const u = unit || p.unit;
    setCart(prev => {
      const idx = prev.findIndex(i => i.id === p.id && i.unit === u);
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = { ...next[idx], qty: next[idx].qty + qty };
        return next;
      }
      return [...prev, { id: p.id, qty, unit: u }];
    });
    setJustAddedId(p.id);
    setTimeout(() => setJustAddedId(null), 1200);
  };

  const onInc = (id) => setCart(prev => prev.map(i => i.id === id ? { ...i, qty: i.qty + 1 } : i));
  const onDec = (id) => setCart(prev => prev.map(i => i.id === id ? { ...i, qty: Math.max(1, i.qty - 1) } : i));
  const onRemove = (id) => setCart(prev => prev.filter(i => i.id !== id));

  const cartCount = cart.reduce((s, i) => s + i.qty, 0);
  const total = cart.reduce((s, i) => {
    const p = window.PRODUCTS.find(x => x.id === i.id);
    return s + (p ? p.price * i.qty : 0);
  }, 0);

  // ─────────────────── Render ───────────────────
  return (
    <div className="app">
      <PromoBanner />
      <Header
        route={route}
        navigate={navigate}
        cartCount={cartCount}
        openCart={() => setCartOpen(true)}
        searchQuery={search}
        setSearchQuery={setSearch}
        showImages={t.showImages}
        user={user}
        onLogout={handleLogout}
      />

      <main style={{ flex: 1 }}>
        {route === 'home' && (
          <HomePage
            navigate={navigate}
            onAdd={onAdd}
            onOpenProduct={onOpenProduct}
            justAddedId={justAddedId}
            openCart={() => setCartOpen(true)}
            showImages={t.showImages}
            gridCols={t.gridCols}
          />
        )}
        {route === 'productos' && (
          <ProductsPage
            filter={filter}
            setFilter={setFilter}
            search={search}
            setSearch={setSearch}
            onAdd={onAdd}
            onOpenProduct={onOpenProduct}
            justAddedId={justAddedId}
            gridCols={t.gridCols}
            showImages={t.showImages}
          />
        )}
        {route === 'detalle' && productId && (
          <ProductDetailPage
            productId={productId}
            onAdd={onAdd}
            navigate={navigate}
            gridCols={t.gridCols}
            showImages={t.showImages}
            justAddedId={justAddedId}
          />
        )}
        {route === 'carrito' && (
          <CartPage
            cart={cart}
            onInc={onInc}
            onDec={onDec}
            onRemove={onRemove}
            total={total}
            navigate={navigate}
            contact={CONTACT}
            openEmailForm={() => setEmailOpen(true)}
          />
        )}
        {route === 'contacto' && (
          <ContactPage contact={CONTACT} />
        )}
        {route === 'login' && (
          <LoginPage navigate={navigate} onLoggedIn={setUser} />
        )}
      </main>

      <Footer navigate={navigate} contact={CONTACT} />

      <CartDrawer
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        cart={cart}
        onInc={onInc}
        onDec={onDec}
        onRemove={onRemove}
        total={total}
        navigate={navigate}
        contact={CONTACT}
        openEmailForm={() => setEmailOpen(true)}
      />

      <EmailQuoteForm
        open={emailOpen}
        onClose={() => setEmailOpen(false)}
        cart={cart}
        total={total}
      />

      <FloatingWA contact={CONTACT} />

      {/* ─────────── Tweaks panel ─────────── */}
      <TweaksPanel>
        <TweakSection label="Color" />
        <TweakRadio
          label="Hue primaria"
          value={typeof t.hue === 'number' ? Object.keys(HUES).find(k => HUES[k] === t.hue) || 'verde' : t.hue}
          options={['verde', 'oliva', 'lima', 'esmeralda']}
          onChange={(v) => setTweak('hue', HUES[v])}
        />

        <TweakSection label="Forma" />
        <TweakRadio
          label="Radio de bordes"
          value={t.radius}
          options={['soft', 'sharp']}
          onChange={(v) => setTweak('radius', v)}
        />
        <TweakRadio
          label="Densidad"
          value={t.density}
          options={['compact', 'regular', 'amplio']}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Tipografía" />
        <TweakSelect
          label="Par de fuentes"
          value={t.fontPair}
          options={[
            { value: 'poppins-inter', label: 'Poppins · Inter (Casa Viva)' },
            { value: 'manrope-manrope', label: 'Manrope (mono)' },
            { value: 'instrument-manrope', label: 'Instrument Serif · Manrope' },
          ]}
          onChange={(v) => setTweak('fontPair', v)}
        />

        <TweakSection label="Catálogo" />
        <TweakRadio
          label="Columnas en grid"
          value={String(t.gridCols)}
          options={['2', '3', '4']}
          onChange={(v) => setTweak('gridCols', parseInt(v))}
        />
        <TweakToggle
          label="Mostrar fotos en cards"
          value={t.showImages}
          onChange={(v) => setTweak('showImages', v)}
        />

        <TweakSection label="Demo" />
        <TweakButton onClick={() => { setCart([]); setCartOpen(false); }} label="Vaciar carrito" />
        <TweakButton onClick={() => {
          // Demo: agregar 4 productos para ver el carrito lleno
          const seed = ['tomate', 'aguacate', 'platano', 'cilantro'];
          const items = seed.map(id => {
            const p = window.PRODUCTS.find(x => x.id === id);
            return { id, qty: id === 'tomate' ? 3 : id === 'platano' ? 6 : 2, unit: p.unit };
          });
          setCart(items);
        }} label="Llenar con demo" />
      </TweaksPanel>
    </div>
  );
}

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