/* ============================================================
   FRUTA FRESCA — App shell: routing, cart, context
   ============================================================ */
const SCREENS = {
  home: "HomeScreen", shop: "ShopScreen", pdp: "PdpScreen", cart: "CartScreen",
  checkout: "CheckoutScreen", hampers: "HamperScreen", subs: "SubsScreen",
  gifting: "GiftingScreen", account: "AccountScreen", tracking: "TrackingScreen",
  about: "AboutScreen", contact: "ContactScreen",
};

function parseHash() {
  const raw = (location.hash || "#/home").replace(/^#\//, "");
  const [route, q] = raw.split("?");
  const params = {};
  if (q) q.split("&").forEach((kv) => { const [k, v] = kv.split("="); params[k] = decodeURIComponent(v || ""); });
  return { route: SCREENS[route] ? route : "home", params };
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "cinematic",
  "accent": "#F4A52E",
  "primary": "#235138",
  "radius": 12,
  "cardStyle": "soft"
}/*EDITMODE-END*/;

function App() {
  const [{ route, params }, setNav] = useState(parseHash());
  const [cart, setCart] = useState(() => ["alphonso", "kiwi", "avocado"].map((id, i) => {
    const p = FF.byId(id);
    return { key: id, id, name: p.name, img: p.img, price: p.price, unit: p.unit, qty: i === 1 ? 2 : 1, subscribe: false };
  }));
  const [wish, setWish] = useState([]);
  const [toasts, setToasts] = useState([]);
  const [pincode, setPincode] = useState("");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const onHash = () => { setNav(parseHash()); window.scrollTo(0, 0); };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Reflect tweaks into CSS custom properties
  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--citrus", tweaks.accent);
    r.setProperty("--green", tweaks.primary);
    r.setProperty("--r", tweaks.radius + "px");
    r.setProperty("--r-lg", (tweaks.radius + 6) + "px");
    document.documentElement.setAttribute("data-card", tweaks.cardStyle);
  }, [tweaks.accent, tweaks.primary, tweaks.radius, tweaks.cardStyle]);

  const go = (route, p = {}) => {
    const q = Object.keys(p).length ? "?" + Object.entries(p).map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join("&") : "";
    location.hash = `#/${route}${q}`;
  };

  const toast = (msg) => {
    const id = Date.now() + Math.random();
    setToasts((t) => [...t, { id, msg }]);
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 2600);
  };

  const addToCart = (p, qty = 1, subscribe = false) => {
    const key = p.id + (subscribe ? "-sub" : "");
    setCart((c) => {
      const ex = c.find((x) => x.key === key);
      if (ex) return c.map((x) => x.key === key ? { ...x, qty: x.qty + qty } : x);
      return [...c, { key, id: p.id, name: p.name, img: p.img, price: p.price, unit: p.unit, qty, subscribe }];
    });
    toast(`${p.name} added to cart`);
  };
  const updateQty = (key, qty) => setCart((c) => c.map((x) => x.key === key ? { ...x, qty: Math.max(1, qty) } : x));
  const removeFromCart = (key) => setCart((c) => c.filter((x) => x.key !== key));
  const clearCart = () => setCart([]);
  const toggleWish = (id) => setWish((w) => w.includes(id) ? w.filter((x) => x !== id) : [...w, id]);

  const cartCount = cart.reduce((s, x) => s + x.qty, 0);
  const cartTotal = cart.reduce((s, x) => s + (x.subscribe ? Math.round(x.price * 0.9) : x.price) * x.qty, 0);

  const ctx = {
    route, routeParams: params, go, cart, addToCart, updateQty, removeFromCart, clearCart,
    cartCount, cartTotal, toast, wish, toggleWish, pincode, setPincode, tweaks,
  };

  const ScreenComp = window[SCREENS[route]] || window.HomeScreen;

  return (
    <window.AppContext.Provider value={ctx}>
      <div className="screen">
        <Header />
        <main className="screen-body" key={route} style={{ animation: "fadeUp .4s ease" }}>
          <ScreenComp />
        </main>
        <Footer />
        <WhatsAppFab />
        <div className="toast-wrap">
          {toasts.map((t) => (
            <div key={t.id} className="toast"><Icon name="check" size={16} style={{ color: "var(--leaf)" }} stroke={3} /> {t.msg}</div>
          ))}
        </div>
        <TweaksPanel>
          <TweakSection label="Homepage hero" />
          <TweakRadio label="Direction" value={tweaks.hero}
            options={["cinematic", "split", "editorial"]}
            onChange={(v) => setTweak("hero", v)} />
          <TweakSection label="Palette" />
          <TweakColor label="Brand primary" value={tweaks.primary}
            options={["#235138", "#1F5E5B", "#2E4374", "#5A3E2B"]}
            onChange={(v) => setTweak("primary", v)} />
          <TweakColor label="Accent" value={tweaks.accent}
            options={["#F4A52E", "#C0436B", "#4CA45C", "#E0702B"]}
            onChange={(v) => setTweak("accent", v)} />
          <TweakSection label="Components" />
          <TweakSlider label="Corner radius" value={tweaks.radius} min={0} max={20} unit="px"
            onChange={(v) => setTweak("radius", v)} />
          <TweakRadio label="Card style" value={tweaks.cardStyle}
            options={["flat", "soft", "raised"]}
            onChange={(v) => setTweak("cardStyle", v)} />
        </TweaksPanel>
      </div>
    </window.AppContext.Provider>
  );
}

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