squishlab.jsx

import { useState, useEffect } from "react";

const ADMIN_EMAIL = "jonahleonkohen@icloud.com";

const DEFAULT_PRODUCTS = [
  { id: "1", name: "The Chaos Cube", price: 14.99, emoji: "🧊", description: "6 sides of pure fidget bliss. Click, spin, glide, slide.", preorderLimit: 20, preorderCount: 0, category: "Cubes", image: null },
  { id: "2", name: "Bubble Matrix Pro", price: 9.99, emoji: "🫧", description: "48 bubbles of serotonin waiting for your fingers.", preorderLimit: 30, preorderCount: 0, category: "Pop", image: null },
  { id: "3", name: "Infinity Vortex", price: 19.99, emoji: "🌀", description: "Flip it forever. Fold it back. It never ends.", preorderLimit: 15, preorderCount: 0, category: "Flip", image: null },
  { id: "4", name: "Mesh Marble XL", price: 7.99, emoji: "🔮", description: "Squeeze it through the mesh. Satisfying every time.", preorderLimit: 25, preorderCount: 0, category: "Squeeze", image: null },
  { id: "5", name: "Zen Ring Set", price: 12.99, emoji: "🌿", description: "5 textured rings. Spin, stack, click. Pure sensory joy.", preorderLimit: 20, preorderCount: 0, category: "Rings", image: null },
];

const C = {
  yellow: "#FFE000", orange: "#FF5C00", pink: "#FF2D87",
  blue: "#00C2FF", green: "#00E47C", purple: "#9B5FFF",
  dark: "#0D0D0D", white: "#FFFDF5",
  card: "rgba(255,255,255,0.05)", border: "rgba(255,255,255,0.1)",
};

const gradients = [
  `linear-gradient(135deg, ${C.pink}, ${C.orange})`,
  `linear-gradient(135deg, ${C.purple}, ${C.blue})`,
  `linear-gradient(135deg, ${C.yellow}, ${C.green})`,
  `linear-gradient(135deg, ${C.blue}, ${C.purple})`,
  `linear-gradient(135deg, ${C.green}, ${C.yellow})`,
  `linear-gradient(135deg, ${C.orange}, ${C.pink})`,
];

const S = {
  app: { minHeight: "100vh", background: C.dark, color: C.white, fontFamily: "'Nunito', sans-serif" },
  nav: { position: "sticky", top: 0, zIndex: 50, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 32px", background: "rgba(13,13,13,0.95)", backdropFilter: "blur(12px)", borderBottom: `2px solid ${C.border}`, flexWrap: "wrap", gap: 12 },
  logo: { fontFamily: "'Boogaloo', cursive", fontSize: "1.8rem", color: C.yellow, textShadow: `2px 2px 0 ${C.orange}`, cursor: "pointer", userSelect: "none" },
  btn: (bg, col, shadow) => ({ background: bg, color: col || C.dark, fontFamily: "'Boogaloo', cursive", fontSize: "1rem", padding: "10px 22px", borderRadius: "100px", border: `2px solid rgba(0,0,0,0.2)`, boxShadow: shadow ? `4px 4px 0 ${shadow}` : "none", cursor: "pointer", letterSpacing: "1px", transition: "all 0.15s", outline: "none" }),
  input: { background: "rgba(255,255,255,0.07)", border: `2px solid ${C.border}`, borderRadius: "12px", padding: "12px 16px", color: C.white, fontFamily: "'Nunito', sans-serif", fontSize: "1rem", fontWeight: 600, outline: "none", width: "100%", transition: "border-color 0.2s" },
  card: { background: C.card, border: `2px solid ${C.border}`, borderRadius: "20px", padding: "24px" },
  label: { fontSize: "0.72rem", fontWeight: 800, letterSpacing: "3px", textTransform: "uppercase", color: C.pink, marginBottom: 6, display: "block" },
  sectionTitle: { fontFamily: "'Boogaloo', cursive", fontSize: "2.4rem", lineHeight: 1.1 },
};

export default function SquishLab() {
  const [view, setView] = useState("home");
  const [currentUser, setCurrentUser] = useState(null);
  const [products, setProducts] = useState([]);
  const [preorders, setPreorders] = useState([]);
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [adminTab, setAdminTab] = useState("preorders");
  const [toast, setToast] = useState(null);
  const [showProductForm, setShowProductForm] = useState(false);
  const [editingProduct, setEditingProduct] = useState(null);

  const [loginForm, setLoginForm] = useState({ email: "", password: "" });
  const [signupForm, setSignupForm] = useState({ name: "", email: "", password: "" });
  const [preorderForm, setPreorderForm] = useState({ name: "", email: "", location: "", date: "", time: "", quantity: 1 });
  const [productForm, setProductForm] = useState({ name: "", price: "", emoji: "", description: "", preorderLimit: 20, category: "", image: null });

  useEffect(() => { loadAll(); }, []);

  const loadAll = async () => {
    setLoading(true);
    try {
      // Products
      try {
        const r = await window.storage.get("sl-products");
        setProducts(r ? JSON.parse(r.value) : DEFAULT_PRODUCTS);
        if (!r) await window.storage.set("sl-products", JSON.stringify(DEFAULT_PRODUCTS));
      } catch { setProducts(DEFAULT_PRODUCTS); }

      // Preorders
      try {
        const r = await window.storage.get("sl-preorders");
        setPreorders(r ? JSON.parse(r.value) : []);
      } catch { setPreorders([]); }

      // Users
      try {
        const r = await window.storage.get("sl-users");
        if (r) {
          setUsers(JSON.parse(r.value));
        } else {
          const defaults = [{ id: "u-admin", name: "Jonah", email: ADMIN_EMAIL, password: "squishlab2025", isAdmin: true }];
          setUsers(defaults);
          await window.storage.set("sl-users", JSON.stringify(defaults));
        }
      } catch { setUsers([]); }

      // Session
      try {
        const r = await window.storage.get("sl-session");
        if (r) setCurrentUser(JSON.parse(r.value));
      } catch {}
    } catch (e) { console.error(e); }
    setLoading(false);
  };

  const showToast = (msg, type = "success") => {
    setToast({ msg, type });
    setTimeout(() => setToast(null), 3000);
  };

  const saveProducts = async (p) => { setProducts(p); await window.storage.set("sl-products", JSON.stringify(p)); };
  const savePreorders = async (p) => { setPreorders(p); await window.storage.set("sl-preorders", JSON.stringify(p)); };
  const saveUsers = async (u) => { setUsers(u); await window.storage.set("sl-users", JSON.stringify(u)); };

  const handleLogin = async () => {
    const u = users.find(u => u.email.toLowerCase() === loginForm.email.toLowerCase() && u.password === loginForm.password);
    if (!u) { showToast("Wrong email or password ❌", "error"); return; }
    setCurrentUser(u);
    await window.storage.set("sl-session", JSON.stringify(u));
    showToast(`Welcome back, ${u.name}! 👋`);
    setLoginForm({ email: "", password: "" });
    setView("home");
  };

  const handleSignup = async () => {
    if (!signupForm.name || !signupForm.email || !signupForm.password) { showToast("Fill everything out!", "error"); return; }
    if (signupForm.password.length < 6) { showToast("Password needs 6+ chars", "error"); return; }
    if (users.find(u => u.email.toLowerCase() === signupForm.email.toLowerCase())) { showToast("Email already in use", "error"); return; }
    const newUser = { id: `u-${Date.now()}`, name: signupForm.name, email: signupForm.email, password: signupForm.password, isAdmin: signupForm.email.toLowerCase() === ADMIN_EMAIL.toLowerCase() };
    const updated = [...users, newUser];
    await saveUsers(updated);
    setCurrentUser(newUser);
    await window.storage.set("sl-session", JSON.stringify(newUser));
    showToast(`Welcome to SQUISHLAB, ${newUser.name}! 🎉`);
    setSignupForm({ name: "", email: "", password: "" });
    setView("home");
  };

  const handleLogout = async () => {
    setCurrentUser(null);
    try { await window.storage.delete("sl-session"); } catch {}
    setView("home");
    showToast("Logged out 👋");
  };

  const handlePreorder = async () => {
    if (!preorderForm.name || !preorderForm.location || !preorderForm.date || !preorderForm.time) { showToast("Fill out all fields!", "error"); return; }
    const product = products.find(p => p.id === selectedProduct.id);
    const remaining = product.preorderLimit - product.preorderCount;
    if (remaining < preorderForm.quantity) { showToast(`Only ${remaining} slots left!`, "error"); return; }
    const newOrder = {
      id: `o-${Date.now()}`,
      productId: product.id,
      productName: product.name,
      productEmoji: product.emoji,
      productPrice: product.price,
      name: preorderForm.name,
      email: currentUser?.email || preorderForm.email,
      location: preorderForm.location,
      date: preorderForm.date,
      time: preorderForm.time,
      quantity: Number(preorderForm.quantity),
      status: "pending",
      createdAt: new Date().toISOString(),
    };
    const updatedProducts = products.map(p => p.id === product.id ? { ...p, preorderCount: p.preorderCount + Number(preorderForm.quantity) } : p);
    await saveProducts(updatedProducts);
    await savePreorders([...preorders, newOrder]);
    showToast("Preorder confirmed! 🎉 See you at pickup!");
    setPreorderForm({ name: "", email: "", location: "", date: "", time: "", quantity: 1 });
    setView("home");
  };

  const handleDeletePreorder = async (id) => {
    const order = preorders.find(p => p.id === id);
    if (order) {
      const updatedProducts = products.map(p => p.id === order.productId ? { ...p, preorderCount: Math.max(0, p.preorderCount - order.quantity) } : p);
      await saveProducts(updatedProducts);
    }
    await savePreorders(preorders.filter(p => p.id !== id));
    showToast("Preorder removed");
  };

  const handleUpdateStatus = async (id, status) => {
    await savePreorders(preorders.map(p => p.id === id ? { ...p, status } : p));
  };

  const handleSaveProduct = async () => {
    if (!productForm.name || !productForm.price) { showToast("Name and price required!", "error"); return; }
    if (editingProduct) {
      await saveProducts(products.map(p => p.id === editingProduct.id ? { ...p, ...productForm, price: parseFloat(productForm.price), preorderLimit: parseInt(productForm.preorderLimit) } : p));
      showToast("Product updated! ✅");
    } else {
      const np = { id: `p-${Date.now()}`, ...productForm, price: parseFloat(productForm.price), preorderLimit: parseInt(productForm.preorderLimit), preorderCount: 0 };
      await saveProducts([...products, np]);
      showToast("Product added! 🛍");
    }
    setShowProductForm(false);
    setEditingProduct(null);
    setProductForm({ name: "", price: "", emoji: "", description: "", preorderLimit: 20, category: "", image: null });
  };

  const handleDeleteProduct = async (id) => {
    if (!window.confirm("Delete this product?")) return;
    await saveProducts(products.filter(p => p.id !== id));
    showToast("Product deleted");
  };

  const handleToggleAdmin = async (userId) => {
    const target = users.find(u => u.id === userId);
    if (!target || target.email.toLowerCase() === ADMIN_EMAIL.toLowerCase()) return;
    const updated = users.map(u => u.id === userId ? { ...u, isAdmin: !u.isAdmin } : u);
    await saveUsers(updated);
    if (currentUser?.id === userId) {
      const updatedUser = updated.find(u => u.id === userId);
      setCurrentUser(updatedUser);
      await window.storage.set("sl-session", JSON.stringify(updatedUser));
    }
    showToast(`Admin status updated for ${target.name}`);
  };

  const handleUpdateLimit = async (productId, val) => {
    await saveProducts(products.map(p => p.id === productId ? { ...p, preorderLimit: Math.max(p.preorderCount, parseInt(val) || 0) } : p));
  };

  const handleImageUpload = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    if (file.size > 1500000) { showToast("Image too large! Use <1.5MB", "error"); return; }
    const reader = new FileReader();
    reader.onload = ev => setProductForm(f => ({ ...f, image: ev.target.result }));
    reader.readAsDataURL(file);
  };

  const openProductForm = (product = null) => {
    setEditingProduct(product);
    setProductForm(product ? { name: product.name, price: product.price, emoji: product.emoji || "", description: product.description, preorderLimit: product.preorderLimit, category: product.category || "", image: product.image || null } : { name: "", price: "", emoji: "", description: "", preorderLimit: 20, category: "", image: null });
    setShowProductForm(true);
  };

  const isAdmin = currentUser?.isAdmin;

  // ─── VIEWS ──────────────────────────────────────────────────────

  const Nav = () => (
    <nav style={S.nav}>
      <div style={S.logo} onClick={() => setView("home")}>SQUISHLAB 🌀</div>
      <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap" }}>
        {currentUser ? (
          <>
            <span style={{ fontSize: "0.9rem", color: "rgba(255,255,255,0.55)", fontWeight: 700 }}>
              {currentUser.isAdmin ? "👑" : "👤"} {currentUser.name}
            </span>
            {isAdmin && (
              <button style={S.btn(C.purple, C.white)} onClick={() => setView("admin")}>Dashboard</button>
            )}
            <button style={S.btn("rgba(255,255,255,0.08)", C.white)} onClick={handleLogout}>Logout</button>
          </>
        ) : (
          <>
            <button style={S.btn("rgba(255,255,255,0.08)", C.white)} onClick={() => setView("login")}>Login</button>
            <button style={S.btn(C.yellow, C.dark, C.orange)} onClick={() => setView("signup")}>Sign Up</button>
          </>
        )}
      </div>
    </nav>
  );

  const Home = () => (
    <div>
      {/* Hero */}
      <div style={{ minHeight: "75vh", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", padding: "80px 24px 60px", background: `radial-gradient(ellipse at 25% 60%, rgba(255,92,0,0.14) 0%, transparent 55%), radial-gradient(ellipse at 75% 35%, rgba(0,194,255,0.12) 0%, transparent 55%), radial-gradient(ellipse at 55% 85%, rgba(155,95,255,0.1) 0%, transparent 50%)` }}>
        <div style={{ fontSize: "0.75rem", fontWeight: 800, letterSpacing: "5px", textTransform: "uppercase", color: C.green, marginBottom: 20 }}>✦ The Ultimate Fidget Experience ✦</div>
        <h1 style={{ fontFamily: "'Boogaloo', cursive", fontSize: "clamp(3.5rem,11vw,8rem)", lineHeight: 0.93, marginBottom: 28 }}>
          STOP<br /><span style={{ color: C.yellow }}>DOOM</span><br /><span style={{ color: C.pink }}>SCROLL</span><span style={{ color: C.blue }}>ING.</span>
        </h1>
        <p style={{ fontSize: "1.1rem", color: "rgba(255,253,245,0.6)", maxWidth: 520, margin: "0 auto 36px", fontWeight: 600, lineHeight: 1.65 }}>
          Fidget toys so satisfying your hands will thank you. Preorder and pick up at school — it's that easy.
        </p>
        <button style={{ ...S.btn(C.yellow, C.dark, C.orange), fontSize: "1.3rem", padding: "14px 40px" }}
          onClick={() => document.getElementById("shop").scrollIntoView({ behavior: "smooth" })}>
          🛒 Shop & Preorder
        </button>
      </div>

      {/* Products */}
      <div id="shop" style={{ maxWidth: 1200, margin: "0 auto", padding: "80px 24px" }}>
        <div style={S.label}>✦ Available Now</div>
        <h2 style={{ ...S.sectionTitle, marginBottom: 48 }}>Pick Your <span style={{ color: C.pink }}>Fidget</span> 🔥</h2>
        {products.length === 0 && (
          <div style={{ textAlign: "center", color: "rgba(255,255,255,0.4)", fontWeight: 600, padding: "60px 0" }}>No products yet — check back soon!</div>
        )}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(270px,1fr))", gap: 24 }}>
          {products.map((product, i) => {
            const remaining = product.preorderLimit - product.preorderCount;
            const pct = Math.min(100, (product.preorderCount / product.preorderLimit) * 100);
            return (
              <div key={product.id} style={{ ...S.card, overflow: "hidden", transition: "transform 0.2s, box-shadow 0.2s" }}
                onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-7px)"; e.currentTarget.style.boxShadow = "0 20px 50px rgba(0,0,0,0.5)"; }}
                onMouseLeave={e => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = ""; }}>
                <div style={{ height: 200, background: gradients[i % gradients.length], borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center", fontSize: "5.5rem", marginBottom: 18, position: "relative", overflow: "hidden" }}>
                  {product.image
                    ? <img src={product.image} alt={product.name} style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 12 }} />
                    : <span style={{ display: "block", animation: "floatEmoji 3s ease-in-out infinite" }}>{product.emoji || "🎯"}</span>
                  }
                  {remaining <= 5 && remaining > 0 && (
                    <div style={{ position: "absolute", top: 10, right: 10, background: C.orange, color: C.dark, fontFamily: "'Boogaloo', cursive", padding: "4px 12px", borderRadius: 100, fontSize: "0.78rem", fontWeight: 800 }}>Only {remaining} left!</div>
                  )}
                  {remaining <= 0 && (
                    <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.6)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                      <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "2rem", color: "rgba(255,255,255,0.7)" }}>SOLD OUT</div>
                    </div>
                  )}
                </div>
                {product.category && <div style={{ fontSize: "0.72rem", fontWeight: 800, letterSpacing: "2px", textTransform: "uppercase", color: C.purple, marginBottom: 4 }}>{product.category}</div>}
                <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.5rem", marginBottom: 6 }}>{product.name}</div>
                <div style={{ fontSize: "0.88rem", color: "rgba(255,255,255,0.5)", marginBottom: 18, fontWeight: 600, lineHeight: 1.5 }}>{product.description}</div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                  <span style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.8rem", color: C.yellow }}>${product.price}</span>
                  <button
                    style={S.btn(remaining > 0 ? C.yellow : "rgba(255,255,255,0.08)", remaining > 0 ? C.dark : "rgba(255,255,255,0.25)")}
                    disabled={remaining <= 0}
                    onClick={() => {
                      if (!currentUser) { showToast("Log in to preorder! 🔒", "error"); setView("login"); return; }
                      setSelectedProduct(product);
                      setPreorderForm(f => ({ ...f, name: currentUser.name, email: currentUser.email, quantity: 1, location: "", date: "", time: "" }));
                      setView("preorder");
                    }}>
                    {remaining > 0 ? "Preorder 📅" : "Sold Out"}
                  </button>
                </div>
                <div style={{ fontSize: "0.78rem", color: "rgba(255,255,255,0.3)", fontWeight: 700, marginBottom: 6 }}>{remaining} / {product.preorderLimit} slots left</div>
                <div style={{ height: 5, background: "rgba(255,255,255,0.08)", borderRadius: 100, overflow: "hidden" }}>
                  <div style={{ height: "100%", width: `${pct}%`, background: remaining > 10 ? C.green : remaining > 3 ? C.yellow : C.orange, borderRadius: 100, transition: "width 0.4s" }} />
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );

  const Login = () => (
    <div style={{ minHeight: "80vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div style={{ ...S.card, width: "100%", maxWidth: 440 }}>
        <h2 style={{ ...S.sectionTitle, marginBottom: 8 }}>Welcome back 👋</h2>
        <p style={{ color: "rgba(255,255,255,0.45)", marginBottom: 32, fontWeight: 600 }}>Sign in to your account</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div>
            <label style={S.label}>Email</label>
            <input style={S.input} type="email" placeholder="you@email.com" value={loginForm.email} onChange={e => setLoginForm(f => ({ ...f, email: e.target.value }))} />
          </div>
          <div>
            <label style={S.label}>Password</label>
            <input style={S.input} type="password" placeholder="••••••••" value={loginForm.password}
              onChange={e => setLoginForm(f => ({ ...f, password: e.target.value }))}
              onKeyDown={e => e.key === "Enter" && handleLogin()} />
          </div>
          <button style={{ ...S.btn(C.yellow, C.dark, C.orange), width: "100%", marginTop: 8, padding: "14px" }} onClick={handleLogin}>Login</button>
          <button style={{ ...S.btn("transparent", "rgba(255,255,255,0.45)"), border: `2px solid ${C.border}` }} onClick={() => setView("signup")}>No account? Sign up →</button>
        </div>
      </div>
    </div>
  );

  const Signup = () => (
    <div style={{ minHeight: "80vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
      <div style={{ ...S.card, width: "100%", maxWidth: 440 }}>
        <h2 style={{ ...S.sectionTitle, marginBottom: 8 }}>Join SQUISHLAB 🌀</h2>
        <p style={{ color: "rgba(255,255,255,0.45)", marginBottom: 32, fontWeight: 600 }}>Create your account to preorder</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {[
            { key: "name", label: "Your Name", type: "text", placeholder: "Your name" },
            { key: "email", label: "Email", type: "email", placeholder: "you@email.com" },
            { key: "password", label: "Password", type: "password", placeholder: "Min 6 characters" },
          ].map(f => (
            <div key={f.key}>
              <label style={S.label}>{f.label}</label>
              <input style={S.input} type={f.type} placeholder={f.placeholder} value={signupForm[f.key]}
                onChange={e => setSignupForm(sf => ({ ...sf, [f.key]: e.target.value }))}
                onKeyDown={e => e.key === "Enter" && handleSignup()} />
            </div>
          ))}
          <button style={{ ...S.btn(C.yellow, C.dark, C.orange), width: "100%", marginTop: 8, padding: "14px" }} onClick={handleSignup}>Create Account 🎉</button>
          <button style={{ ...S.btn("transparent", "rgba(255,255,255,0.45)"), border: `2px solid ${C.border}` }} onClick={() => setView("login")}>Already have an account? Login →</button>
        </div>
      </div>
    </div>
  );

  const Preorder = () => {
    if (!selectedProduct) return null;
    const product = products.find(p => p.id === selectedProduct.id);
    const remaining = product.preorderLimit - product.preorderCount;
    return (
      <div style={{ minHeight: "80vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 24 }}>
        <div style={{ ...S.card, width: "100%", maxWidth: 520 }}>
          <button onClick={() => setView("home")} style={{ background: "none", border: "none", color: "rgba(255,255,255,0.4)", cursor: "pointer", fontSize: "0.9rem", fontWeight: 800, marginBottom: 24, padding: 0, letterSpacing: "1px" }}>← Back to shop</button>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28, padding: 16, background: "rgba(255,255,255,0.04)", borderRadius: 14 }}>
            <span style={{ fontSize: "3rem" }}>{product.image ? <img src={product.image} style={{ width: 56, height: 56, borderRadius: 8, objectFit: "cover" }} /> : product.emoji}</span>
            <div>
              <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.4rem" }}>{product.name}</div>
              <div style={{ color: C.yellow, fontFamily: "'Boogaloo', cursive", fontSize: "1.2rem" }}>${product.price}</div>
              <div style={{ fontSize: "0.78rem", color: "rgba(255,255,255,0.35)", fontWeight: 700 }}>{remaining} slots available</div>
            </div>
          </div>
          <h2 style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.8rem", marginBottom: 24 }}>Reserve Your Slot 📅</h2>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div>
              <label style={S.label}>Your Name</label>
              <input style={S.input} placeholder="Full name" value={preorderForm.name} onChange={e => setPreorderForm(f => ({ ...f, name: e.target.value }))} />
            </div>
            {!currentUser?.email && (
              <div>
                <label style={S.label}>Email</label>
                <input style={S.input} type="email" placeholder="you@email.com" value={preorderForm.email} onChange={e => setPreorderForm(f => ({ ...f, email: e.target.value }))} />
              </div>
            )}
            <div>
              <label style={S.label}>Pickup Spot at School</label>
              <input style={S.input} placeholder="e.g. Main hallway, near locker 204, gym entrance..." value={preorderForm.location} onChange={e => setPreorderForm(f => ({ ...f, location: e.target.value }))} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div>
                <label style={S.label}>Pickup Date</label>
                <input style={S.input} type="date" value={preorderForm.date} onChange={e => setPreorderForm(f => ({ ...f, date: e.target.value }))} />
              </div>
              <div>
                <label style={S.label}>Pickup Time</label>
                <input style={S.input} type="time" value={preorderForm.time} onChange={e => setPreorderForm(f => ({ ...f, time: e.target.value }))} />
              </div>
            </div>
            <div>
              <label style={S.label}>Quantity</label>
              <select style={{ ...S.input, cursor: "pointer" }} value={preorderForm.quantity} onChange={e => setPreorderForm(f => ({ ...f, quantity: parseInt(e.target.value) }))}>
                {[1,2,3,4,5].filter(n => n <= remaining).map(n => (
                  <option key={n} value={n} style={{ background: "#1a1a1a" }}>{n}</option>
                ))}
              </select>
            </div>
            <div style={{ background: "rgba(255,224,0,0.07)", border: `1px solid ${C.yellow}30`, borderRadius: 12, padding: 14, fontSize: "0.85rem", color: "rgba(255,253,245,0.55)", fontWeight: 600, lineHeight: 1.5 }}>
              💰 Total: <span style={{ color: C.yellow, fontFamily: "'Boogaloo', cursive", fontSize: "1.1rem" }}>${(product.price * preorderForm.quantity).toFixed(2)}</span> — pay on pickup!
            </div>
            <button style={{ ...S.btn(C.yellow, C.dark, C.orange), width: "100%", padding: "14px", fontSize: "1.2rem", marginTop: 4 }} onClick={handlePreorder}>
              Confirm Preorder 🎉
            </button>
          </div>
        </div>
      </div>
    );
  };

  const ProductFormModal = () => (
    <div style={{ ...S.card, marginBottom: 28, border: `2px solid ${C.yellow}50`, background: "rgba(255,224,0,0.04)" }}>
      <h4 style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.4rem", marginBottom: 20, color: C.yellow }}>{editingProduct ? "✏️ Edit Product" : "➕ New Product"}</h4>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {[
          { key: "name", label: "Product Name", placeholder: "e.g. Chaos Cube" },
          { key: "price", label: "Price ($)", placeholder: "14.99", type: "number" },
          { key: "emoji", label: "Emoji", placeholder: "🧊" },
          { key: "category", label: "Category", placeholder: "Cubes" },
          { key: "preorderLimit", label: "Preorder Slot Limit", placeholder: "20", type: "number" },
        ].map(f => (
          <div key={f.key}>
            <label style={S.label}>{f.label}</label>
            <input style={S.input} type={f.type || "text"} placeholder={f.placeholder} value={productForm[f.key]}
              onChange={e => setProductForm(pf => ({ ...pf, [f.key]: e.target.value }))} />
          </div>
        ))}
        <div style={{ gridColumn: "1 / -1" }}>
          <label style={S.label}>Description</label>
          <textarea style={{ ...S.input, resize: "vertical", minHeight: 80 }} placeholder="Describe this toy..."
            value={productForm.description} onChange={e => setProductForm(pf => ({ ...pf, description: e.target.value }))} />
        </div>
        <div style={{ gridColumn: "1 / -1" }}>
          <label style={S.label}>Product Image (max 1.5MB)</label>
          <input type="file" accept="image/*" onChange={handleImageUpload} style={{ color: C.white, fontSize: "0.9rem", cursor: "pointer" }} />
          {productForm.image && (
            <div style={{ marginTop: 12, display: "flex", gap: 12, alignItems: "center" }}>
              <img src={productForm.image} alt="preview" style={{ height: 80, borderRadius: 10, objectFit: "cover" }} />
              <button onClick={() => setProductForm(pf => ({ ...pf, image: null }))} style={{ ...S.btn(C.pink, C.white), fontSize: "0.85rem", padding: "6px 14px" }}>Remove</button>
            </div>
          )}
        </div>
      </div>
      <div style={{ display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap" }}>
        <button style={S.btn(C.yellow, C.dark, C.orange)} onClick={handleSaveProduct}>{editingProduct ? "Save Changes ✅" : "Add Product 🛍"}</button>
        <button style={{ ...S.btn("rgba(255,255,255,0.07)", C.white) }} onClick={() => { setShowProductForm(false); setEditingProduct(null); }}>Cancel</button>
      </div>
    </div>
  );

  const Admin = () => {
    if (!isAdmin) return (
      <div style={{ textAlign: "center", padding: "100px 24px" }}>
        <div style={{ fontSize: "4rem", marginBottom: 16 }}>🚫</div>
        <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "2rem" }}>Access denied</div>
      </div>
    );

    const tabs = [
      { key: "preorders", label: "📦 Preorders", count: preorders.length },
      { key: "products", label: "🛍 Products", count: products.length },
      { key: "users", label: "👥 Users", count: users.length },
    ];

    const statusColors = { pending: C.blue, fulfilled: C.green, cancelled: C.orange };

    return (
      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "40px 24px" }}>
        <div style={S.label}>✦ Admin Panel</div>
        <h2 style={{ ...S.sectionTitle, marginBottom: 32 }}>Dashboard <span style={{ color: C.yellow }}>👑</span></h2>

        {/* Summary Cards */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(200px,1fr))", gap: 16, marginBottom: 36 }}>
          {[
            { label: "Total Preorders", val: preorders.length, color: C.blue },
            { label: "Pending Pickups", val: preorders.filter(p => p.status === "pending").length, color: C.yellow },
            { label: "Fulfilled", val: preorders.filter(p => p.status === "fulfilled").length, color: C.green },
            { label: "Products Live", val: products.length, color: C.pink },
          ].map(s => (
            <div key={s.label} style={{ ...S.card, textAlign: "center", padding: "20px 16px" }}>
              <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "2.5rem", color: s.color }}>{s.val}</div>
              <div style={{ fontSize: "0.78rem", fontWeight: 800, letterSpacing: "2px", textTransform: "uppercase", color: "rgba(255,255,255,0.4)" }}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* Tabs */}
        <div style={{ display: "flex", gap: 8, marginBottom: 28, flexWrap: "wrap" }}>
          {tabs.map(t => (
            <button key={t.key} onClick={() => setAdminTab(t.key)}
              style={{ ...S.btn(adminTab === t.key ? C.yellow : "rgba(255,255,255,0.07)", adminTab === t.key ? C.dark : C.white) }}>
              {t.label} <span style={{ marginLeft: 4, fontSize: "0.8rem", background: "rgba(0,0,0,0.2)", padding: "2px 8px", borderRadius: 100 }}>{t.count}</span>
            </button>
          ))}
        </div>

        {/* PREORDERS */}
        {adminTab === "preorders" && (
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20, flexWrap: "wrap", gap: 10 }}>
              <h3 style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.5rem", color: C.blue }}>All Preorders</h3>
              <div style={{ fontSize: "0.85rem", color: "rgba(255,255,255,0.35)", fontWeight: 600 }}>
                ${preorders.reduce((sum, o) => sum + o.productPrice * o.quantity, 0).toFixed(2)} total revenue
              </div>
            </div>
            {preorders.length === 0 ? (
              <div style={{ ...S.card, textAlign: "center", color: "rgba(255,255,255,0.35)", fontWeight: 600, padding: 60 }}>No preorders yet 🕸</div>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {[...preorders].reverse().map(order => (
                  <div key={order.id} style={{ ...S.card, display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 16, alignItems: "center" }}>
                    <span style={{ fontSize: "2.2rem" }}>{order.productEmoji || "📦"}</span>
                    <div>
                      <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.15rem" }}>
                        {order.name} → {order.productName} (×{order.quantity})
                      </div>
                      <div style={{ fontSize: "0.82rem", color: "rgba(255,255,255,0.45)", fontWeight: 600, lineHeight: 1.7, marginTop: 2 }}>
                        📍 {order.location}<br />
                        📅 {order.date} at {order.time}<br />
                        📧 {order.email} · 💰 ${(order.productPrice * order.quantity).toFixed(2)}
                      </div>
                    </div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 8, alignItems: "flex-end", minWidth: 110 }}>
                      <div style={{ padding: "4px 14px", borderRadius: 100, fontSize: "0.75rem", fontWeight: 800, letterSpacing: "1px", textTransform: "uppercase", background: statusColors[order.status] || C.blue, color: C.dark }}>{order.status}</div>
                      <select style={{ ...S.input, padding: "6px 10px", fontSize: "0.82rem", cursor: "pointer", width: "auto" }}
                        value={order.status} onChange={e => handleUpdateStatus(order.id, e.target.value)}>
                        <option value="pending" style={{ background: "#1a1a1a" }}>Pending</option>
                        <option value="fulfilled" style={{ background: "#1a1a1a" }}>Fulfilled</option>
                        <option value="cancelled" style={{ background: "#1a1a1a" }}>Cancelled</option>
                      </select>
                      <button onClick={() => handleDeletePreorder(order.id)} style={{ ...S.btn(C.pink, C.white), fontSize: "0.8rem", padding: "6px 14px" }}>Delete</button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {/* PRODUCTS */}
        {adminTab === "products" && (
          <div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
              <h3 style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.5rem", color: C.pink }}>Manage Products</h3>
              <button style={S.btn(C.yellow, C.dark, C.orange)} onClick={() => openProductForm()}>+ Add Product</button>
            </div>
            {showProductForm && <ProductFormModal />}
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {products.map(product => {
                const remaining = product.preorderLimit - product.preorderCount;
                return (
                  <div key={product.id} style={{ ...S.card, display: "grid", gridTemplateColumns: "auto 1fr auto auto", gap: 16, alignItems: "center" }}>
                    <div style={{ width: 54, height: 54, borderRadius: 12, overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "2.5rem", background: "rgba(255,255,255,0.06)", flexShrink: 0 }}>
                      {product.image ? <img src={product.image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : product.emoji || "📦"}
                    </div>
                    <div>
                      <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.2rem" }}>{product.name}</div>
                      <div style={{ fontSize: "0.82rem", color: "rgba(255,255,255,0.4)", fontWeight: 600 }}>
                        ${product.price} · {product.preorderCount}/{product.preorderLimit} preorders · {remaining} left
                      </div>
                    </div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <label style={{ ...S.label, marginBottom: 0, whiteSpace: "nowrap" }}>SLOTS</label>
                      <input type="number" min={product.preorderCount} style={{ ...S.input, width: 80, textAlign: "center", padding: "8px 10px" }}
                        value={product.preorderLimit} onChange={e => handleUpdateLimit(product.id, e.target.value)} />
                    </div>
                    <div style={{ display: "flex", gap: 8 }}>
                      <button style={{ ...S.btn(C.blue, C.dark), fontSize: "0.82rem", padding: "8px 16px" }} onClick={() => openProductForm(product)}>Edit</button>
                      <button style={{ ...S.btn(C.pink, C.white), fontSize: "0.82rem", padding: "8px 16px" }} onClick={() => handleDeleteProduct(product.id)}>Delete</button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* USERS */}
        {adminTab === "users" && (
          <div>
            <h3 style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.5rem", marginBottom: 20, color: C.green }}>Manage Users</h3>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {users.map(user => (
                <div key={user.id} style={{ ...S.card, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
                  <div>
                    <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.2rem" }}>{user.name} {user.isAdmin ? "👑" : ""}</div>
                    <div style={{ fontSize: "0.82rem", color: "rgba(255,255,255,0.35)", fontWeight: 600 }}>{user.email}</div>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <div style={{ padding: "4px 16px", borderRadius: 100, fontSize: "0.78rem", fontWeight: 800, letterSpacing: "1px", textTransform: "uppercase", background: user.isAdmin ? C.yellow : "rgba(255,255,255,0.08)", color: user.isAdmin ? C.dark : "rgba(255,255,255,0.4)" }}>
                      {user.isAdmin ? "Admin" : "User"}
                    </div>
                    {user.email.toLowerCase() === ADMIN_EMAIL.toLowerCase()
                      ? <span style={{ fontSize: "0.78rem", color: "rgba(255,255,255,0.25)", fontWeight: 700 }}>Super Admin</span>
                      : <button style={{ ...S.btn(user.isAdmin ? C.orange : C.green, C.dark), fontSize: "0.82rem", padding: "8px 16px" }} onClick={() => handleToggleAdmin(user.id)}>
                          {user.isAdmin ? "Remove Admin" : "Make Admin"}
                        </button>
                    }
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  };

  // ─── ROOT ────────────────────────────────────────────────────────
  if (loading) return (
    <div style={{ ...S.app, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "100vh", gap: 16 }}>
      <style>{`@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Nunito:wght@400;600;700;900&display=swap');`}</style>
      <div style={{ fontSize: "4rem", animation: "spin 1s linear infinite" }}>🌀</div>
      <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.5rem", color: C.yellow }}>Loading SQUISHLAB...</div>
    </div>
  );

  return (
    <div style={S.app}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Nunito:wght@400;600;700;900&display=swap');
        * { box-sizing: border-box; margin: 0; padding: 0; }
        input[type="date"]::-webkit-calendar-picker-indicator,
        input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: #0d0d0d; }
        ::-webkit-scrollbar-thumb { background: #333; border-radius: 100px; }
        textarea, select { font-family: 'Nunito', sans-serif; font-weight: 600; }
        select option { background: #1a1a1a; }
        button:active { transform: scale(0.97); }
        @keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
        @keyframes floatEmoji { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-14px) rotate(4deg)} }
        @keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
      `}</style>

      {/* Toast notification */}
      {toast && (
        <div style={{ position: "fixed", bottom: 28, right: 28, zIndex: 9999, background: toast.type === "error" ? C.pink : C.green, color: C.dark, fontFamily: "'Boogaloo', cursive", fontSize: "1.05rem", padding: "14px 24px", borderRadius: 16, boxShadow: "0 10px 40px rgba(0,0,0,0.5)", animation: "slideUp 0.3s ease", maxWidth: 340 }}>
          {toast.msg}
        </div>
      )}

      <Nav />
      {view === "home" && <Home />}
      {view === "login" && <Login />}
      {view === "signup" && <Signup />}
      {view === "preorder" && <Preorder />}
      {view === "admin" && <Admin />}

      <footer style={{ borderTop: `2px solid ${C.border}`, padding: "40px 32px", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16, marginTop: 40 }}>
        <div style={{ fontFamily: "'Boogaloo', cursive", fontSize: "1.4rem", color: C.yellow, textShadow: `2px 2px 0 ${C.orange}` }}>SQUISHLAB</div>
        <div style={{ fontSize: "0.8rem", color: "rgba(255,255,255,0.2)", fontWeight: 600 }}>© 2025 SQUISHLAB. All rights squished.</div>
      </footer>
    </div>
  );
}