const { useState, useEffect, useMemo, useRef } = React;

function App() {
  // Tweakable defaults
  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "theme": "sakura",
    "bgPattern": "confetti",
    "confetti": true
  }/*EDITMODE-END*/;

  const [tweaks, setTweaks] = useState(() => {
    try { return { ...TWEAK_DEFAULTS, ...JSON.parse(localStorage.getItem('tweaks') || '{}') }; }
    catch { return TWEAK_DEFAULTS; }
  });
  const [tweaksOpen, setTweaksOpen] = useState(false);

  const [stage, setStage] = useState(() => localStorage.getItem('stage') || 'catalog');
  const [cart, setCart] = useState(() => {
    try { return JSON.parse(localStorage.getItem('cart') || '[]'); } catch { return []; }
  });
  const [cartOpen, setCartOpen] = useState(false);
  const [info, setInfo] = useState(() => {
    try { return JSON.parse(localStorage.getItem('info') || '{}'); }
    catch { return {}; }
  });
  const [orderId, setOrderId] = useState(null);
  const [submitting, setSubmitting] = useState(false);

  // Confetti triggers
  const [cartBurst, setCartBurst] = useState(0);
  const [cartBurstOrigin, setCartBurstOrigin] = useState(null);
  const [successBurst, setSuccessBurst] = useState(0);

  useEffect(() => { localStorage.setItem('cart', JSON.stringify(cart)); }, [cart]);
  useEffect(() => { localStorage.setItem('info', JSON.stringify(info)); }, [info]);
  useEffect(() => { localStorage.setItem('stage', stage); }, [stage]);
  useEffect(() => { localStorage.setItem('tweaks', JSON.stringify(tweaks)); }, [tweaks]);

  useEffect(() => {
    document.body.dataset.theme = tweaks.theme;
    document.body.className = `bg-pattern-${tweaks.bgPattern}`;
  }, [tweaks]);

  // Tweaks edit-mode listener
  useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const persistTweaks = (patch) => {
    const next = { ...tweaks, ...patch };
    setTweaks(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
  };

  const addToCart = (item, origin) => {
    setCart(prev => {
      // Merge if same product+variant+size+color
      const key = (it) => `${it.productId}|${it.variant}|${it.size}|${it.color || ''}`;
      const idx = prev.findIndex(x => key(x) === key(item));
      if (idx >= 0) {
        const next = [...prev];
        next[idx] = { ...next[idx], qty: Math.min(9, next[idx].qty + item.qty) };
        return next;
      }
      return [...prev, item];
    });
    if (tweaks.confetti) {
      setCartBurstOrigin(origin);
      setCartBurst(Date.now());
    }
    // Brief visual: flash cart button
    setTimeout(() => {
      const btn = document.querySelector('.cart-btn');
      if (btn) { btn.classList.add('flash'); setTimeout(() => btn.classList.remove('flash'), 500); }
    }, 50);
  };

  const goCheckout = () => {
    setCartOpen(false);
    setStage('checkout');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const submit = async () => {
    setSubmitting(true);
    try {
      const enrichedCart = cart.map(it => {
        const p = window.PRODUCTS.find(x => x.id === it.productId);
        return {
          ...it,
          code: p?.code,
          name: p?.name,
          variantLabel: window.VARIANT_LABELS[it.variant],
          colorLabel: it.color ? window.VARIANT_LABELS[it.color] : null,
        };
      });
      const res = await fetch('/api/orders', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...info, cart: enrichedCart }),
      });
      const data = await res.json();
      if (!data.ok) throw new Error(data.error || '送信に失敗しました');
      setOrderId(data.orderId);
      setStage('complete');
      if (tweaks.confetti) setSuccessBurst(Date.now());
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } catch (e) {
      alert('送信に失敗しました。しばらくしてから再度お試しください。\n\n' + e.message);
    } finally {
      setSubmitting(false);
    }
  };

  const reset = () => {
    setCart([]);
    setInfo({});
    setOrderId(null);
    setStage('catalog');
    window.scrollTo({ top: 0 });
  };

  const cartCount = cart.reduce((s, it) => s + it.qty, 0);

  return (
    <div className="app-shell">
      <nav className="top-nav">
        <div className="nav-inner">
          <div className="nav-brand" onClick={() => setStage('catalog')} style={{ cursor: 'pointer' }}>
            <div className="nav-brand-mark">70</div>
            <div className="nav-brand-text">
              <div className="nav-brand-title">
                <span className="only-desktop">等々力小学校</span>
                <span className="only-mobile">等々力小 70th STORE</span>
              </div>
              <div className="nav-brand-sub">70th Anniversary Store</div>
            </div>
          </div>
          {stage === 'catalog' && (
            <button className="cart-btn" onClick={() => setCartOpen(true)}>
              <span className="cart-icon">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8">
                  <path d="M6 7 L18 7 L16 19 L8 19 Z"/>
                  <path d="M9 7 Q9 3 12 3 Q15 3 15 7"/>
                </svg>
              </span>
              カート{cartCount > 0 && <span className="badge">{cartCount}</span>}
            </button>
          )}
        </div>
      </nav>

      {stage === 'catalog' && (
        <Catalog theme={tweaks.theme} onAddToCart={addToCart} cart={cart} onOpenCart={() => setCartOpen(true)} />
      )}
      {stage === 'checkout' && (
        <CheckoutInfo
          cart={cart}
          info={info}
          setInfo={setInfo}
          onBack={() => { setStage('catalog'); setCartOpen(true); }}
          onNext={() => { setStage('confirm'); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
        />
      )}
      {stage === 'confirm' && (
        <Confirm
          cart={cart}
          info={info}
          onBack={() => setStage('checkout')}
          onSubmit={submit}
          submitting={submitting}
        />
      )}
      {stage === 'complete' && orderId && (
        <Complete cart={cart} info={info} orderId={orderId} onReset={reset} />
      )}

      {stage === 'catalog' && (
        <CartDrawer
          open={cartOpen}
          onClose={() => setCartOpen(false)}
          cart={cart}
          setCart={setCart}
          onCheckout={goCheckout}
        />
      )}

      {tweaks.confetti && <Confetti trigger={cartBurst} origin={cartBurstOrigin} burst={30} palette={getPalette(tweaks.theme)} />}
      {tweaks.confetti && <Confetti trigger={successBurst} burst={120} palette={getPalette(tweaks.theme)} />}

      {tweaksOpen && <TweaksPanel tweaks={tweaks} setTweaks={persistTweaks} />}

      <footer className="app-footer">
        <div className="footer-inner">
          <div>©️等々力小学校PTA —開校７０周年実行委員会</div>
          <div className="muted-small">受注データは暗号化し、PTAにて保管します</div>
        </div>
      </footer>
    </div>
  );
}

function getPalette(theme) {
  const palettes = {
    sakura: ['#F4D1D8', '#FBF6EE', '#F6EFD9', '#E8C5CE', '#C7DDEF'],
    mint: ['#CFE8D7', '#E8F5EA', '#B8D4B8', '#F0F7E8', '#DCEBC8'],
    sky: ['#C7DDEF', '#E1ECF5', '#B8CEE4', '#F0F5FA', '#D5E3F0'],
  };
  return palettes[theme] || palettes.sakura;
}

function TweaksPanel({ tweaks, setTweaks }) {
  const themes = [
    { id: 'sakura', color: '#F4D1D8', label: '桜' },
    { id: 'mint', color: '#CFE8D7', label: 'ミント' },
    { id: 'sky', color: '#C7DDEF', label: '空' },
  ];
  return (
    <div className="tweaks-panel">
      <h4>Tweaks</h4>
      <div className="tweaks-group">
        <div className="tweaks-label">カラーテーマ</div>
        <div className="tweaks-swatches">
          {themes.map(t => (
            <button
              key={t.id}
              className={`tweaks-swatch ${tweaks.theme === t.id ? 'active' : ''}`}
              style={{ background: t.color }}
              onClick={() => setTweaks({ theme: t.id })}
              title={t.label}
            />
          ))}
        </div>
      </div>
      <div className="tweaks-group">
        <div className="tweaks-label">背景パターン</div>
        <div className="tweaks-row">
          {[
            { id: 'dots', label: 'ドット' },
            { id: 'confetti', label: '紙吹雪' },
            { id: 'none', label: 'なし' },
          ].map(p => (
            <button
              key={p.id}
              className={tweaks.bgPattern === p.id ? 'active' : ''}
              onClick={() => setTweaks({ bgPattern: p.id })}
            >{p.label}</button>
          ))}
        </div>
      </div>
      <div className="tweaks-toggle">
        <span>祝祭エフェクト</span>
        <div
          className={`switch ${tweaks.confetti ? 'on' : ''}`}
          onClick={() => setTweaks({ confetti: !tweaks.confetti })}
        />
      </div>
    </div>
  );
}

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