import React, { useState, useEffect, useMemo } from "react";
import {
  ShoppingCart, Heart, Search, X, Plus, Minus, Trash2, Lock,
  CheckCircle2, ChevronRight, ChevronLeft, Package,
  CreditCard, Truck, Pencil, LogOut, Star, MessageCircle, Copy, Landmark,
  User, Mail, KeyRound, Sun, Moon
} from "lucide-react";

/* ---------------------------------------------------------
   SHOP ZONE
   Design tokens:
   bg      #FFFFFF   surface #FFF6EE   chip #FFE4CC
   text    #211A14   textDim #8C7C6D   border #F2DFC9
   accent  #FF6A1A
   Display: Space Grotesk | Body: Inter | Data/mono: IBM Plex Mono
--------------------------------------------------------- */

const FONT_LINK_ID = "sz-fonts";
function useFonts() {
  useEffect(() => {
    if (document.getElementById(FONT_LINK_ID)) return;
    const link = document.createElement("link");
    link.id = FONT_LINK_ID;
    link.rel = "stylesheet";
    link.href =
      "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap";
    document.head.appendChild(link);
  }, []);
}

const ACCENT = "#FF6A1A";
const BANK_DETAILS = {
  whatsapp: "08086061771",
  accountNumber: "2079040532",
  accountName: "Akerele James Ayomide",
  bankName: "Kuda MFB",
};
const ADMIN_PASSWORD = "@ayomidey10";

const LIGHT = {
  bg: "#FFFFFF",
  surface: "#FFF6EE",
  surfaceAlt: "#FFFFFF",
  chip: "#FFE4CC",
  border: "#F2DFC9",
  text: "#211A14",
  textDim: "#8C7C6D",
  solidBg: "#211A14",
  solidText: "#FFFFFF",
  headerBg: "#FFFFFFEE",
  overlayChip: "#FFFFFFCC",
  scrollbar: "#E8D9C8",
};
const DARK = {
  bg: "#0D0D12",
  surface: "#1A1611",
  surfaceAlt: "#221C16",
  chip: "#2E2519",
  border: "#3D3020",
  text: "#F5EFE7",
  textDim: "#B8A996",
  solidBg: "#F5EFE7",
  solidText: "#0D0D12",
  headerBg: "#0D0D12EE",
  overlayChip: "#0D0D12CC",
  scrollbar: "#3D3020",
};
const money = (n) => `$${n.toFixed(2)}`;
const SWATCHES = [
  ["#4C6FFF", "#131A4A"], ["#FF6B5B", "#3E1712"], ["#3DDC97", "#0F3A2A"],
  ["#FFB84C", "#4A2E0A"], ["#B26CFF", "#2A1550"], ["#4CC9FF", "#0E2A3D"],
];

function Swatch({ product, size = "full" }) {
  const colors = product.swatch || SWATCHES[0];
  return (
    <div
      className={size === "full" ? "relative w-full aspect-[4/5] rounded-xl overflow-hidden" : "relative w-16 h-16 rounded-lg overflow-hidden flex-shrink-0"}
      style={{ background: `linear-gradient(155deg, ${colors[0]}, ${colors[1]})` }}
    >
      <Package
        className="absolute opacity-25"
        style={{
          color: "#fff",
          width: size === "full" ? "40%" : "36%",
          height: size === "full" ? "40%" : "36%",
          top: "50%",
          left: "50%",
          transform: "translate(-50%,-50%)",
        }}
      />
    </div>
  );
}

export default function ShopZoneStore() {
  useFonts();

  const [products, setProducts] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [view, setView] = useState("shop"); // shop | wishlist | admin | account
  const [darkMode, setDarkMode] = useState(false);
  const t = (darkMode || view === "admin") ? DARK : LIGHT; // admin is always dark
  const [search, setSearch] = useState("");
  const [cart, setCart] = useState({});
  const [wishlist, setWishlist] = useState({});
  const [cartOpen, setCartOpen] = useState(false);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [checkoutStep, setCheckoutStep] = useState(0); // 0 closed,1 shipping,2 payment,3 done
  const [orderNum, setOrderNum] = useState(null);
  const [orders, setOrders] = useState([]);
  const [processing, setProcessing] = useState(false);
  const [paymentMethod, setPaymentMethod] = useState("card");
  const [showBankModal, setShowBankModal] = useState(false);
  const [shipForm, setShipForm] = useState({ fullName: "", email: "", phone: "", address: "" });
  const [shipFormError, setShipFormError] = useState(null);

  const [adminAuthed, setAdminAuthed] = useState(false);
  const [pwInput, setPwInput] = useState("");
  const [pwError, setPwError] = useState(false);
  const [editingProduct, setEditingProduct] = useState(null);

  const [accounts, setAccounts] = useState([]);
  const [session, setSession] = useState(null); // logged-in email
  const [toast, setToast] = useState(null);

  const showToast = (msg) => {
    setToast(msg);
    setTimeout(() => setToast(null), 1800);
  };
  const copyText = (text, label) => {
    if (navigator.clipboard) navigator.clipboard.writeText(text).catch(() => {});
    showToast(`${label} copied`);
  };

  // Load persisted state
  useEffect(() => {
    (async () => {
      try {
        const [p, c, w, acc, sess, ord, dm] = await Promise.allSettled([
          window.storage.get("shopzone:products"),
          window.storage.get("shopzone:cart"),
          window.storage.get("shopzone:wishlist"),
          window.storage.get("shopzone:accounts", true),
          window.storage.get("shopzone:session"),
          window.storage.get("shopzone:orders", true),
          window.storage.get("shopzone:darkmode"),
        ]);
        if (p.status === "fulfilled" && p.value) setProducts(JSON.parse(p.value.value));
        if (c.status === "fulfilled" && c.value) setCart(JSON.parse(c.value.value));
        if (w.status === "fulfilled" && w.value) setWishlist(JSON.parse(w.value.value));
        if (acc.status === "fulfilled" && acc.value) setAccounts(JSON.parse(acc.value.value));
        if (sess.status === "fulfilled" && sess.value) setSession(JSON.parse(sess.value.value));
        if (ord.status === "fulfilled" && ord.value) setOrders(JSON.parse(ord.value.value));
        if (dm.status === "fulfilled" && dm.value) setDarkMode(JSON.parse(dm.value.value));
      } catch (e) {
        console.log("No prior data yet", e);
      }
      setLoaded(true);
    })();
  }, []);

  useEffect(() => { if (loaded) window.storage.set("shopzone:products", JSON.stringify(products)).catch(() => {}); }, [products, loaded]);
  useEffect(() => { if (loaded) window.storage.set("shopzone:cart", JSON.stringify(cart)).catch(() => {}); }, [cart, loaded]);
  useEffect(() => { if (loaded) window.storage.set("shopzone:wishlist", JSON.stringify(wishlist)).catch(() => {}); }, [wishlist, loaded]);
  useEffect(() => { if (loaded) window.storage.set("shopzone:session", JSON.stringify(session)).catch(() => {}); }, [session, loaded]);
  useEffect(() => { if (loaded) window.storage.set("shopzone:darkmode", JSON.stringify(darkMode)).catch(() => {}); }, [darkMode, loaded]);

  const productMap = useMemo(() => Object.fromEntries(products.map((p) => [p.id, p])), [products]);

  const filtered = useMemo(() => {
    return products.filter((p) => {
      if (search.trim() && !p.name.toLowerCase().includes(search.trim().toLowerCase())) return false;
      return true;
    });
  }, [products, search]);

  const cartItems = Object.entries(cart)
    .filter(([, qty]) => qty > 0)
    .map(([id, qty]) => ({ ...productMap[id], qty }))
    .filter((i) => i.id);
  const cartCount = cartItems.reduce((s, i) => s + i.qty, 0);
  const subtotal = cartItems.reduce((s, i) => s + i.price * i.qty, 0);
  const shipping = subtotal > 0 && subtotal < 100 ? 8 : 0;
  const total = subtotal + shipping;

  const wishlistItems = Object.keys(wishlist).filter((id) => wishlist[id] && productMap[id]).map((id) => productMap[id]);

  const addToCart = (id, qty = 1) => {
    setCart((c) => ({ ...c, [id]: (c[id] || 0) + qty }));
    showToast("Added to cart");
  };
  const setQty = (id, qty) => {
    setCart((c) => {
      const next = { ...c };
      if (qty <= 0) delete next[id];
      else next[id] = qty;
      return next;
    });
  };
  const toggleWishlist = (id) => setWishlist((w) => ({ ...w, [id]: !w[id] }));

  const startCheckout = () => {
    if (!session) { setCartOpen(false); setView("account"); showToast("Sign in to check out"); return; }
    setCartOpen(false);
    setShipForm((f) => ({ ...f, email: f.email || session, fullName: f.fullName || currentAccount?.name || "" }));
    setCheckoutStep(1);
  };
  const proceedToPayment = () => {
    if (!shipForm.fullName.trim() || !shipForm.address.trim() || !shipForm.phone.trim() || !shipForm.email.trim()) {
      setShipFormError("Please fill in your name, address, phone number, and Gmail address.");
      return;
    }
    if (!/^\S+@gmail\.com$/i.test(shipForm.email.trim())) {
      setShipFormError("Please enter a valid Gmail address.");
      return;
    }
    setShipFormError(null);
    setCheckoutStep(2);
  };
  const saveOrders = (next) => {
    setOrders(next);
    window.storage.set("shopzone:orders", JSON.stringify(next), true).catch(() => {});
  };
  const notifyBuyer = (email, message) => {
    showToast(`🔔 ${message}`);
  };

  const completeOrder = () => {
    setProcessing(true);
    setTimeout(() => {
      setProcessing(false);
      const id = `SZ-${Math.floor(100000 + Math.random() * 900000)}`;
      const newOrder = {
        id,
        email: shipForm.email,
        buyerName: shipForm.fullName || currentAccount?.name || "Guest",
        phone: shipForm.phone,
        address: shipForm.address,
        items: cartItems.map((i) => ({ name: i.name, qty: i.qty, price: i.price })),
        total,
        status: "placed",
        createdAt: new Date().toISOString(),
      };
      saveOrders([newOrder, ...orders]);
      notifyBuyer(shipForm.email, `your order ${id} has been placed.`, { orderId: id, status: "placed", buyerName: newOrder.buyerName, total });
      setOrderNum(id);
      setCheckoutStep(3);
      setCart({});
    }, 1300);
  };

  const advanceOrderStatus = (orderId, status) => {
    const next = orders.map((o) => (o.id === orderId ? { ...o, status } : o));
    saveOrders(next);
    const order = orders.find((o) => o.id === orderId);
    if (order) {
      const msg = status === "shipped" ? `your order ${orderId} has shipped.` : `your order ${orderId} was delivered.`;
      notifyBuyer(order.email, msg, { orderId, status, buyerName: order.buyerName, total: order.total });
    }
  };

  const saveProduct = (prod) => {
    setProducts((prev) => {
      const exists = prev.some((p) => p.id === prod.id);
      return exists ? prev.map((p) => (p.id === prod.id ? prod : p)) : [prod, ...prev];
    });
    setEditingProduct(null);
    showToast(prod._isNew ? "Product added" : "Product updated");
  };
  const deleteProduct = (id) => {
    setProducts((prev) => prev.filter((p) => p.id !== id));
    showToast("Product removed");
  };

  const signUp = ({ name, email, password }) => {
    if (!name.trim() || !email.trim() || !password) return "Fill in every field.";
    if (accounts.some((a) => a.email.toLowerCase() === email.toLowerCase())) return "An account with that email already exists.";
    const next = [...accounts, { name, email, password }];
    setAccounts(next);
    window.storage.set("shopzone:accounts", JSON.stringify(next), true).catch(() => {});
    setSession(email);
    showToast(`Welcome, ${name}`);
    return null;
  };
  const logIn = ({ email, password }) => {
    const acc = accounts.find((a) => a.email.toLowerCase() === email.toLowerCase());
    if (!acc || acc.password !== password) return "Incorrect email or password.";
    setSession(email);
    showToast(`Welcome back, ${acc.name}`);
    return null;
  };
  const logOut = () => { setSession(null); showToast("Signed out"); };
  const currentAccount = accounts.find((a) => a.email === session);

  return (
    <div className="min-h-screen w-full" style={{ background: t.bg, color: t.text, fontFamily: "Inter, sans-serif" }}>
      <style>{`
        .sz-display { font-family: 'Space Grotesk', sans-serif; }
        .sz-mono { font-family: 'IBM Plex Mono', monospace; }
        .sz-scroll::-webkit-scrollbar { width: 6px; }
        .sz-scroll::-webkit-scrollbar-thumb { background: ${t.scrollbar}; border-radius: 3px; }
      `}</style>

      {/* Header */}
      <header className="sticky top-0 z-30 backdrop-blur border-b" style={{ background: t.headerBg, borderColor: t.chip }}>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 py-3 flex items-center gap-3">
          <button onClick={() => setView("shop")} className="sz-display text-xl font-bold tracking-tight shrink-0">
            SHOP ZONE
          </button>

          <div className="flex-1 flex justify-end sm:justify-center max-w-md ml-auto">
            <div className="relative w-full max-w-xs">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2" size={15} style={{ color: t.textDim }} />
              <input
                value={search}
                onChange={(e) => { setSearch(e.target.value); setView("shop"); }}
                placeholder="Search products"
                className="w-full pl-9 pr-3 py-1.5 rounded-full text-sm outline-none"
                style={{ background: t.surface, border: `1px solid ${t.border}`, color: t.text }}
              />
            </div>
          </div>

          <button onClick={() => setView("wishlist")} className="relative p-2 rounded-full hover:bg-white/5 shrink-0">
            <Heart size={19} style={{ color: view === "wishlist" ? ACCENT : t.text }} fill={view === "wishlist" ? ACCENT : "none"} />
            {wishlistItems.length > 0 && (
              <span className="absolute -top-0.5 -right-0.5 sz-mono text-[10px] rounded-full w-4 h-4 flex items-center justify-center" style={{ background: ACCENT, color: "#0D0D12" }}>
                {wishlistItems.length}
              </span>
            )}
          </button>
          <button onClick={() => setCartOpen(true)} className="relative p-2 rounded-full hover:bg-white/5 shrink-0">
            <ShoppingCart size={19} />
            {cartCount > 0 && (
              <span className="absolute -top-0.5 -right-0.5 sz-mono text-[10px] rounded-full w-4 h-4 flex items-center justify-center" style={{ background: ACCENT, color: "#0D0D12" }}>
                {cartCount}
              </span>
            )}
          </button>
          <button onClick={() => setView("account")} className="p-2 rounded-full hover:bg-white/5 shrink-0" title="Account">
            <User size={18} style={{ color: view === "account" ? ACCENT : t.text }} />
          </button>
          <button
            onClick={() => setDarkMode((d) => !d)}
            className="p-2 rounded-full hover:bg-white/5 shrink-0"
            title={darkMode ? "Switch to light mode" : "Switch to dark mode"}
            disabled={view === "admin"}
          >
            {darkMode ? <Sun size={18} style={{ color: t.text }} /> : <Moon size={18} style={{ color: t.text }} />}
          </button>
          <button onClick={() => setView("admin")} className="p-2 rounded-full hover:bg-white/5 shrink-0" title="Admin">
            <Lock size={17} style={{ color: view === "admin" ? ACCENT : t.textDim }} />
          </button>
        </div>
      </header>

      <main className="max-w-6xl mx-auto px-4 sm:px-6 py-8">
        {view === "shop" && (
          <>
            <div className="mb-6">
              <h1 className="sz-display text-2xl sm:text-3xl font-semibold">Shop</h1>
              <p className="text-sm mt-1" style={{ color: t.textDim }}>{filtered.length} {filtered.length === 1 ? "item" : "items"}</p>
            </div>
            {filtered.length === 0 ? (
              <div className="text-center py-24" style={{ color: t.textDim }}>
                <Package className="mx-auto mb-3" size={28} />
                {products.length === 0 ? "No products yet — check back soon." : "Nothing matches that search."}
              </div>
            ) : (
              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5">
                {filtered.map((p) => (
                  <div key={p.id} className="group rounded-xl p-2.5" style={{ background: t.surface }}>
                    <div className="relative cursor-pointer" onClick={() => setSelectedProduct(p)}>
                      <Swatch product={p} />
                      <button onClick={(e) => { e.stopPropagation(); toggleWishlist(p.id); }} className="absolute top-2 right-2 p-1.5 rounded-full" style={{ background: t.overlayChip }}>
                        <Heart size={14} fill={wishlist[p.id] ? ACCENT : "none"} style={{ color: wishlist[p.id] ? ACCENT : t.text }} />
                      </button>
                    </div>
                    <div className="pt-3 px-0.5">
                      <div className="text-sm font-medium leading-snug line-clamp-2">{p.name}</div>
                      <div className="flex items-center justify-between mt-2">
                        <span className="sz-mono text-sm">{money(p.price)}</span>
                        <button onClick={() => addToCart(p.id)} className="text-xs font-medium px-2.5 py-1.5 rounded-lg" style={{ background: ACCENT, color: "#0D0D12" }}>Add</button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </>
        )}

        {view === "wishlist" && (
          <>
            <h1 className="sz-display text-2xl sm:text-3xl font-semibold mb-6">Wishlist</h1>
            {wishlistItems.length === 0 ? (
              <div className="text-center py-24" style={{ color: t.textDim }}>
                <Heart className="mx-auto mb-3" size={28} />
                Save items you like and they'll show up here.
              </div>
            ) : (
              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-5">
                {wishlistItems.map((p) => (
                  <div key={p.id} className="rounded-xl p-2.5" style={{ background: t.surface }}>
                    <div className="relative cursor-pointer" onClick={() => setSelectedProduct(p)}><Swatch product={p} /></div>
                    <div className="pt-3 px-0.5">
                      <div className="text-sm font-medium leading-snug line-clamp-2">{p.name}</div>
                      <div className="flex items-center justify-between mt-2">
                        <span className="sz-mono text-sm">{money(p.price)}</span>
                        <div className="flex gap-1.5">
                          <button onClick={() => toggleWishlist(p.id)} className="p-1.5 rounded-lg" style={{ background: t.chip }}><Trash2 size={13} style={{ color: t.textDim }} /></button>
                          <button onClick={() => addToCart(p.id)} className="text-xs font-medium px-2.5 py-1.5 rounded-lg" style={{ background: ACCENT, color: "#0D0D12" }}>Add</button>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </>
        )}

        {view === "account" && (
          <AccountPage t={t} session={session} account={currentAccount} orders={orders.filter((o) => o.email === session)} onLogout={logOut} onSignUp={signUp} onLogIn={logIn} />
        )}

        {view === "admin" && (
          <AdminPanel
            t={t}
            authed={adminAuthed}
            pwInput={pwInput}
            setPwInput={setPwInput}
            pwError={pwError}
            onLogin={() => { if (pwInput === ADMIN_PASSWORD) { setAdminAuthed(true); setPwError(false); } else setPwError(true); }}
            onLogout={() => { setAdminAuthed(false); setPwInput(""); }}
            products={products}
            editingProduct={editingProduct}
            setEditingProduct={setEditingProduct}
            saveProduct={saveProduct}
            deleteProduct={deleteProduct}
            orders={orders}
            advanceOrderStatus={advanceOrderStatus}
          />
        )}
      </main>

      {/* Product detail modal */}
      {selectedProduct && (
        <div className="fixed inset-0 z-40 flex items-end sm:items-center justify-center p-0 sm:p-4" style={{ background: "#000000AA" }} onClick={() => setSelectedProduct(null)}>
          <div className="w-full sm:max-w-lg rounded-t-2xl sm:rounded-2xl p-5 sm:p-6 max-h-[90vh] overflow-y-auto sz-scroll" style={{ background: t.surface }} onClick={(e) => e.stopPropagation()}>
            <div className="flex justify-end"><button onClick={() => setSelectedProduct(null)}><X size={18} style={{ color: t.textDim }} /></button></div>
            <div className="max-w-xs mx-auto"><Swatch product={selectedProduct} /></div>
            <div className="mt-4">
              <h2 className="sz-display text-xl font-semibold mt-2">{selectedProduct.name}</h2>
              {selectedProduct.rating && (
                <div className="flex items-center gap-1 mt-1" style={{ color: t.textDim }}>
                  <Star size={13} fill={t.text} style={{ color: t.text }} />
                  <span className="text-sm">{selectedProduct.rating}</span>
                </div>
              )}
              <div className="sz-mono text-2xl mt-3">{money(selectedProduct.price)}</div>
              <div className="flex gap-2 mt-5">
                <button onClick={() => { addToCart(selectedProduct.id); setSelectedProduct(null); }} className="flex-1 py-3 rounded-xl font-medium" style={{ background: ACCENT, color: "#0D0D12" }}>Add to cart</button>
                <button onClick={() => toggleWishlist(selectedProduct.id)} className="p-3 rounded-xl" style={{ background: t.chip }}>
                  <Heart size={18} fill={wishlist[selectedProduct.id] ? ACCENT : "none"} style={{ color: wishlist[selectedProduct.id] ? ACCENT : t.text }} />
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Cart drawer */}
      {cartOpen && (
        <div className="fixed inset-0 z-40 flex justify-end" style={{ background: "#000000AA" }} onClick={() => setCartOpen(false)}>
          <div className="w-full max-w-sm h-full p-5 flex flex-col" style={{ background: t.surface }} onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-4">
              <h2 className="sz-display text-lg font-semibold">Your cart</h2>
              <button onClick={() => setCartOpen(false)}><X size={18} style={{ color: t.textDim }} /></button>
            </div>
            {cartItems.length === 0 ? (
              <div className="flex-1 flex flex-col items-center justify-center text-center" style={{ color: t.textDim }}>
                <ShoppingCart size={26} className="mb-2" />Your cart is empty.
              </div>
            ) : (
              <div className="flex-1 overflow-y-auto sz-scroll -mx-1 px-1 space-y-3">
                {cartItems.map((item) => (
                  <div key={item.id} className="flex gap-3">
                    <Swatch product={item} size="thumb" />
                    <div className="flex-1 min-w-0">
                      <div className="text-sm font-medium truncate">{item.name}</div>
                      <div className="sz-mono text-xs mt-0.5" style={{ color: t.textDim }}>{money(item.price)}</div>
                      <div className="flex items-center gap-2 mt-1.5">
                        <button onClick={() => setQty(item.id, item.qty - 1)} className="p-1 rounded" style={{ background: t.chip }}><Minus size={12} /></button>
                        <span className="sz-mono text-xs w-4 text-center">{item.qty}</span>
                        <button onClick={() => setQty(item.id, item.qty + 1)} className="p-1 rounded" style={{ background: t.chip }}><Plus size={12} /></button>
                        <button onClick={() => setQty(item.id, 0)} className="ml-auto p-1"><Trash2 size={13} style={{ color: t.textDim }} /></button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            )}
            {cartItems.length > 0 && (
              <div className="pt-4 mt-2 border-t" style={{ borderColor: t.border }}>
                <div className="flex justify-between text-sm mb-1" style={{ color: t.textDim }}><span>Subtotal</span><span className="sz-mono">{money(subtotal)}</span></div>
                <div className="flex justify-between text-sm mb-3" style={{ color: t.textDim }}><span>Shipping</span><span className="sz-mono">{shipping === 0 ? "Free" : money(shipping)}</span></div>
                <div className="flex justify-between text-base font-medium mb-4"><span>Total</span><span className="sz-mono">{money(total)}</span></div>
                <button onClick={startCheckout} className="w-full py-3 rounded-xl font-medium" style={{ background: ACCENT, color: "#FFFFFF" }}>Checkout</button>
                {!session && <p className="text-xs text-center mt-2" style={{ color: t.textDim }}>You'll be asked to sign in first.</p>}
              </div>
            )}
          </div>
        </div>
      )}

      {/* Checkout flow */}
      {checkoutStep > 0 && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: "#000000CC" }}>
          <div className="w-full max-w-md rounded-2xl p-6 max-h-[90vh] overflow-y-auto sz-scroll" style={{ background: t.surface }}>
            {checkoutStep !== 3 && (
              <div className="flex items-center gap-2 mb-5">
                {[1, 2].map((s) => (<div key={s} className="h-1 flex-1 rounded-full" style={{ background: checkoutStep >= s ? ACCENT : t.border }} />))}
              </div>
            )}
            {checkoutStep === 1 && (
              <div>
                <div className="flex items-center gap-2 mb-4"><Truck size={17} /><h2 className="sz-display font-semibold text-lg">Shipping</h2></div>
                <div className="space-y-2.5">
                  <input
                    value={shipForm.fullName}
                    onChange={(e) => setShipForm({ ...shipForm, fullName: e.target.value })}
                    placeholder="Full name"
                    className="w-full px-3 py-2.5 rounded-lg text-sm outline-none"
                    style={{ background: t.surfaceAlt, border: `1px solid ${t.border}` }}
                  />
                  <input
                    value={shipForm.email}
                    onChange={(e) => setShipForm({ ...shipForm, email: e.target.value })}
                    placeholder="Gmail address"
                    type="email"
                    className="w-full px-3 py-2.5 rounded-lg text-sm outline-none"
                    style={{ background: t.surfaceAlt, border: `1px solid ${t.border}` }}
                  />
                  <input
                    value={shipForm.phone}
                    onChange={(e) => setShipForm({ ...shipForm, phone: e.target.value })}
                    placeholder="Phone number"
                    type="tel"
                    className="w-full px-3 py-2.5 rounded-lg text-sm outline-none"
                    style={{ background: t.surfaceAlt, border: `1px solid ${t.border}` }}
                  />
                  <input
                    value={shipForm.address}
                    onChange={(e) => setShipForm({ ...shipForm, address: e.target.value })}
                    placeholder="Delivery address"
                    className="w-full px-3 py-2.5 rounded-lg text-sm outline-none"
                    style={{ background: t.surfaceAlt, border: `1px solid ${t.border}` }}
                  />
                </div>
                {shipFormError && <p className="text-xs mt-2.5" style={{ color: "#E4572E" }}>{shipFormError}</p>}
                <div className="flex gap-2 mt-5">
                  <button onClick={() => setCheckoutStep(0)} className="px-4 py-2.5 rounded-xl text-sm" style={{ background: t.chip }}><ChevronLeft size={14} className="inline mr-1" />Cancel</button>
                  <button onClick={proceedToPayment} className="flex-1 py-2.5 rounded-xl text-sm font-medium" style={{ background: ACCENT, color: "#FFFFFF" }}>Continue <ChevronRight size={14} className="inline ml-1" /></button>
                </div>
              </div>
            )}
            {checkoutStep === 2 && (
              <div>
                <div className="flex items-center gap-2 mb-4"><CreditCard size={17} /><h2 className="sz-display font-semibold text-lg">Payment</h2></div>
                <div className="flex gap-2 mb-4">
                  <button onClick={() => setPaymentMethod("card")} className="flex-1 py-2 rounded-lg text-xs font-medium flex items-center justify-center gap-1.5" style={{ background: paymentMethod === "card" ? t.solidBg : t.chip, color: paymentMethod === "card" ? t.solidText : t.textDim }}><CreditCard size={13} /> Card</button>
                  <button onClick={() => setPaymentMethod("transfer")} className="flex-1 py-2 rounded-lg text-xs font-medium flex items-center justify-center gap-1.5" style={{ background: paymentMethod === "transfer" ? t.solidBg : t.chip, color: paymentMethod === "transfer" ? t.solidText : t.textDim }}><Landmark size={13} /> Bank transfer</button>
                </div>
                {paymentMethod === "card" ? (
                  <>
                    <p className="text-xs mb-3" style={{ color: t.textDim }}>Demo checkout — no real payment is processed.</p>
                    <div className="space-y-2.5">
                      <input placeholder="Card number" defaultValue="4242 4242 4242 4242" className="w-full px-3 py-2.5 rounded-lg text-sm sz-mono outline-none" style={{ background: t.surface, border: `1px solid ${t.border}` }} />
                      <div className="flex gap-2.5">
                        <input placeholder="MM/YY" defaultValue="12/29" className="w-full px-3 py-2.5 rounded-lg text-sm sz-mono outline-none" style={{ background: t.surface, border: `1px solid ${t.border}` }} />
                        <input placeholder="CVC" defaultValue="123" className="w-24 px-3 py-2.5 rounded-lg text-sm sz-mono outline-none" style={{ background: t.surface, border: `1px solid ${t.border}` }} />
                      </div>
                    </div>
                  </>
                ) : (
                  <div className="rounded-xl p-4" style={{ background: t.surface, border: `1px solid ${t.border}` }}>
                    <p className="text-xs mb-3" style={{ color: t.textDim }}>Pay by bank transfer — tap below to see the account to pay into.</p>
                    <button
                      onClick={() => setShowBankModal(true)}
                      className="w-full flex items-center justify-center gap-2 py-2.5 rounded-lg text-sm font-medium"
                      style={{ background: t.solidBg, color: t.solidText }}
                    >
                      <Landmark size={15} /> Show account details to pay
                    </button>
                  </div>
                )}
                <div className="flex justify-between text-sm mt-4 pt-4 border-t" style={{ borderColor: t.border, color: t.textDim }}><span>Total due</span><span className="sz-mono" style={{ color: t.text }}>{money(total)}</span></div>
                <div className="flex gap-2 mt-5">
                  <button onClick={() => setCheckoutStep(1)} className="px-4 py-2.5 rounded-xl text-sm" style={{ background: t.chip }}><ChevronLeft size={14} className="inline mr-1" />Back</button>
                  <button disabled={processing} onClick={completeOrder} className="flex-1 py-2.5 rounded-xl text-sm font-medium disabled:opacity-60" style={{ background: ACCENT, color: "#0D0D12" }}>{processing ? "Processing…" : paymentMethod === "card" ? `Pay ${money(total)}` : "I've sent the transfer"}</button>
                </div>
              </div>
            )}
            {checkoutStep === 3 && (
              <div className="text-center py-4">
                <CheckCircle2 size={40} className="mx-auto mb-3" style={{ color: ACCENT }} />
                <h2 className="sz-display font-semibold text-lg">Order confirmed</h2>
                <p className="text-sm mt-1" style={{ color: t.textDim }}>Order <span className="sz-mono">{orderNum}</span> is on its way.</p>
                <button onClick={() => setCheckoutStep(0)} className="mt-5 w-full py-2.5 rounded-xl text-sm font-medium" style={{ background: ACCENT, color: "#FFFFFF" }}>Continue shopping</button>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Bank transfer account details pop-up */}
      {showBankModal && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4" style={{ background: "#000000CC" }} onClick={() => setShowBankModal(false)}>
          <div className="w-full max-w-sm rounded-2xl p-6" style={{ background: t.surfaceAlt }} onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-1">
              <div className="flex items-center gap-2"><Landmark size={17} style={{ color: ACCENT }} /><h2 className="sz-display font-semibold text-lg">Pay by transfer</h2></div>
              <button onClick={() => setShowBankModal(false)}><X size={18} style={{ color: t.textDim }} /></button>
            </div>
            <p className="text-xs mb-4" style={{ color: t.textDim }}>Transfer <span className="sz-mono">{money(total)}</span> to the account below, then confirm in the app.</p>
            <div className="rounded-xl p-4 space-y-3" style={{ background: t.surface, border: `1px solid ${t.border}` }}>
              {[
                { label: "Bank", value: BANK_DETAILS.bankName },
                { label: "Account name", value: BANK_DETAILS.accountName },
                { label: "Account number", value: BANK_DETAILS.accountNumber },
              ].map((row) => (
                <div key={row.label} className="flex items-center justify-between">
                  <div><div className="text-[11px]" style={{ color: t.textDim }}>{row.label}</div><div className="sz-mono text-base">{row.value}</div></div>
                  <button onClick={() => copyText(row.value, row.label)} className="p-2 rounded-lg" style={{ background: t.chip }}><Copy size={14} style={{ color: t.textDim }} /></button>
                </div>
              ))}
            </div>
            <a
              href={`https://wa.me/234${BANK_DETAILS.whatsapp.slice(1)}?text=${encodeURIComponent(`Hi, I just paid ${money(total)} for my Shop Zone order.`)}`}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center gap-2 mt-4 py-2.5 rounded-lg text-sm font-medium"
              style={{ background: "#25D366", color: "#0D0D12" }}
            >
              <MessageCircle size={15} /> Send payment proof on WhatsApp
            </a>
            <button onClick={() => setShowBankModal(false)} className="w-full mt-2.5 py-2.5 rounded-lg text-sm font-medium" style={{ background: t.chip, color: t.text }}>
              Done
            </button>
          </div>
        </div>
      )}

      {toast && (
        <div className="fixed bottom-5 left-1/2 -translate-x-1/2 z-50 px-4 py-2.5 rounded-full text-sm sz-mono" style={{ background: t.solidBg, color: t.solidText }}>{toast}</div>
      )}
    </div>
  );
}

const STATUS_META = {
  placed: { label: "Placed", color: "#8C7C6D" },
  shipped: { label: "Shipped", color: "#FFB84C" },
  delivered: { label: "Delivered", color: "#3DDC97" },
};

function AccountPage({ t, session, account, orders, onLogout, onSignUp, onLogIn }) {
  const [mode, setMode] = useState("login"); // login | signup
  const [form, setForm] = useState({ name: "", email: "", password: "" });
  const [error, setError] = useState(null);

  if (session && account) {
    return (
      <div className="max-w-md mx-auto py-12">
        <div className="text-center mb-8">
          <div className="w-14 h-14 rounded-full mx-auto mb-4 flex items-center justify-center" style={{ background: `${ACCENT}22` }}>
            <User size={22} style={{ color: ACCENT }} />
          </div>
          <h1 className="sz-display text-xl font-semibold">{account.name}</h1>
          <p className="text-sm mt-1" style={{ color: t.textDim }}>{account.email}</p>
          <p className="text-xs mt-1" style={{ color: "#A4907C" }}>Order emails are sent to this address.</p>
          <button onClick={onLogout} className="mt-4 flex items-center gap-1.5 mx-auto text-sm px-4 py-2 rounded-lg" style={{ background: t.chip, color: t.textDim }}>
            <LogOut size={13} /> Sign out
          </button>
        </div>

        <h2 className="text-sm font-medium mb-3" style={{ color: t.textDim }}>My orders</h2>
        {orders.length === 0 ? (
          <p className="text-sm text-center py-8" style={{ color: "#A4907C" }}>No orders yet.</p>
        ) : (
          <div className="space-y-3">
            {orders.map((o) => (
              <div key={o.id} className="rounded-xl p-4" style={{ background: t.surface }}>
                <div className="flex items-center justify-between mb-2">
                  <span className="sz-mono text-sm">{o.id}</span>
                  <span className="text-xs font-medium px-2 py-0.5 rounded-full" style={{ color: STATUS_META[o.status].color, background: `${STATUS_META[o.status].color}22` }}>
                    {STATUS_META[o.status].label}
                  </span>
                </div>
                <p className="text-xs mb-2" style={{ color: t.textDim }}>{o.items.map((i) => `${i.qty}× ${i.name}`).join(", ")}</p>
                <div className="flex justify-between text-sm"><span style={{ color: t.textDim }}>Total</span><span className="sz-mono">{money(o.total)}</span></div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

  const submit = () => {
    setError(null);
    const err = mode === "signup" ? onSignUp(form) : onLogIn(form);
    if (err) setError(err);
  };

  return (
    <div className="max-w-sm mx-auto py-10">
      <div className="flex gap-2 mb-6 p-1 rounded-full" style={{ background: t.surface }}>
        <button onClick={() => { setMode("login"); setError(null); }} className="flex-1 py-2 rounded-full text-sm font-medium" style={{ background: mode === "login" ? t.solidBg : "transparent", color: mode === "login" ? t.solidText : t.textDim }}>Log in</button>
        <button onClick={() => { setMode("signup"); setError(null); }} className="flex-1 py-2 rounded-full text-sm font-medium" style={{ background: mode === "signup" ? t.solidBg : "transparent", color: mode === "signup" ? t.solidText : t.textDim }}>Sign up</button>
      </div>

      <h1 className="sz-display text-xl font-semibold mb-1">{mode === "login" ? "Welcome back" : "Create your account"}</h1>
      <p className="text-sm mb-5" style={{ color: t.textDim }}>{mode === "login" ? "Log in to check out and track orders." : "Sign up to start shopping at Shop Zone."}</p>

      <div className="space-y-2.5">
        {mode === "signup" && (
          <div className="relative">
            <User className="absolute left-3 top-1/2 -translate-y-1/2" size={15} style={{ color: t.textDim }} />
            <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Full name" className="w-full pl-9 pr-3 py-2.5 rounded-lg text-sm outline-none" style={{ background: t.surface, border: `1px solid ${t.border}` }} />
          </div>
        )}
        <div className="relative">
          <Mail className="absolute left-3 top-1/2 -translate-y-1/2" size={15} style={{ color: t.textDim }} />
          <input value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="Email" type="email" className="w-full pl-9 pr-3 py-2.5 rounded-lg text-sm outline-none" style={{ background: t.surface, border: `1px solid ${t.border}` }} />
        </div>
        <div className="relative">
          <KeyRound className="absolute left-3 top-1/2 -translate-y-1/2" size={15} style={{ color: t.textDim }} />
          <input value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} onKeyDown={(e) => e.key === "Enter" && submit()} placeholder="Password" type="password" className="w-full pl-9 pr-3 py-2.5 rounded-lg text-sm outline-none" style={{ background: t.surface, border: `1px solid ${t.border}` }} />
        </div>
      </div>

      {error && <p className="text-xs mt-2.5" style={{ color: "#FF6B5B" }}>{error}</p>}

      <button onClick={submit} className="w-full mt-4 py-2.5 rounded-xl text-sm font-medium" style={{ background: ACCENT, color: "#0D0D12" }}>
        {mode === "login" ? "Log in" : "Create account"}
      </button>
    </div>
  );
}

function AdminPanel({ t, authed, pwInput, setPwInput, pwError, onLogin, onLogout, products, editingProduct, setEditingProduct, saveProduct, deleteProduct, orders, advanceOrderStatus }) {
  const blank = { id: "", name: "", price: "", rating: "", swatch: SWATCHES[Math.floor(Math.random() * SWATCHES.length)], _isNew: true };
  const [form, setForm] = useState(editingProduct || blank);
  const [tab, setTab] = useState("products"); // products | orders

  useEffect(() => { setForm(editingProduct || blank); }, [editingProduct]);

  if (!authed) {
    return (
      <div className="max-w-xs mx-auto py-16 text-center">
        <Lock size={22} className="mx-auto mb-3" style={{ color: ACCENT }} />
        <h1 className="sz-display text-xl font-semibold mb-1">Admin sign-in</h1>
        <p className="text-sm mb-5" style={{ color: t.textDim }}>Only admins can add products.</p>
        <input type="password" value={pwInput} onChange={(e) => setPwInput(e.target.value)} onKeyDown={(e) => e.key === "Enter" && onLogin()} placeholder="Password" className="w-full px-3 py-2.5 rounded-lg text-sm outline-none text-center" style={{ background: t.surface, border: `1px solid ${pwError ? "#FF6B5B" : t.border}` }} />
        {pwError && <p className="text-xs mt-2" style={{ color: "#FF6B5B" }}>Incorrect password.</p>}
        <button onClick={onLogin} className="w-full mt-3 py-2.5 rounded-xl text-sm font-medium" style={{ background: ACCENT, color: "#0D0D12" }}>Sign in</button>
      </div>
    );
  }

  const submit = () => {
    if (!form.name.trim() || !form.price) return;
    const id = form.id || `p${Date.now()}`;
    saveProduct({ ...form, id, price: parseFloat(form.price), _isNew: !form.id });
    setForm(blank);
  };

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="sz-display text-2xl font-semibold">Admin</h1>
        <button onClick={onLogout} className="flex items-center gap-1.5 text-sm px-3 py-1.5 rounded-lg" style={{ background: t.chip, color: t.textDim }}><LogOut size={13} /> Sign out</button>
      </div>

      <div className="flex gap-2 mb-6 p-1 rounded-full w-fit" style={{ background: t.surface }}>
        <button onClick={() => setTab("products")} className="px-4 py-1.5 rounded-full text-sm font-medium" style={{ background: tab === "products" ? t.solidBg : "transparent", color: tab === "products" ? t.solidText : t.textDim }}>Catalog</button>
        <button onClick={() => setTab("orders")} className="px-4 py-1.5 rounded-full text-sm font-medium" style={{ background: tab === "orders" ? t.solidBg : "transparent", color: tab === "orders" ? t.solidText : t.textDim }}>Orders</button>
      </div>

      {tab === "products" ? (
      <div className="grid lg:grid-cols-[320px_1fr] gap-6">
        <div className="rounded-xl p-4 h-fit" style={{ background: t.surface }}>
          <h2 className="text-sm font-medium mb-3">{form.id ? "Edit product" : "Add product"}</h2>
          <div className="space-y-2.5">
            <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Product name" className="w-full px-3 py-2 rounded-lg text-sm outline-none" style={{ background: t.surface, border: `1px solid ${t.border}` }} />
            <input value={form.price} onChange={(e) => setForm({ ...form, price: e.target.value })} placeholder="Price" type="number" step="0.01" className="w-full px-3 py-2 rounded-lg text-sm sz-mono outline-none" style={{ background: t.surface, border: `1px solid ${t.border}` }} />
            <div className="flex gap-2">
              <button onClick={submit} className="flex-1 py-2 rounded-lg text-sm font-medium" style={{ background: ACCENT, color: "#FFFFFF" }}>{form.id ? "Save changes" : "Add product"}</button>
              {form.id && <button onClick={() => setForm(blank)} className="px-3 py-2 rounded-lg text-sm" style={{ background: t.chip }}>Cancel</button>}
            </div>
          </div>
        </div>
        <div className="space-y-2">
          {products.length === 0 && <p className="text-sm" style={{ color: t.textDim }}>No products yet. Add your first one on the left.</p>}
          {products.map((p) => (
            <div key={p.id} className="flex items-center gap-3 rounded-xl p-2.5" style={{ background: t.surface }}>
              <Swatch product={p} size="thumb" />
              <div className="flex-1 min-w-0">
                <div className="text-sm font-medium truncate">{p.name}</div>
                <span className="sz-mono text-xs" style={{ color: t.textDim }}>{money(p.price)}</span>
              </div>
              <button onClick={() => setForm(p)} className="p-2 rounded-lg" style={{ background: t.chip }}><Pencil size={13} /></button>
              <button onClick={() => deleteProduct(p.id)} className="p-2 rounded-lg" style={{ background: t.chip }}><Trash2 size={13} style={{ color: "#FF6B5B" }} /></button>
            </div>
          ))}
        </div>
      </div>
      ) : (
        <div className="space-y-3">
          {orders.length === 0 ? (
            <p className="text-sm" style={{ color: t.textDim }}>No orders yet.</p>
          ) : orders.map((o) => (
            <div key={o.id} className="rounded-xl p-4" style={{ background: t.surface }}>
              <div className="flex items-center justify-between mb-2 flex-wrap gap-2">
                <div>
                  <span className="sz-mono text-sm">{o.id}</span>
                  <span className="text-xs ml-2" style={{ color: t.textDim }}>{o.buyerName} · {o.email}</span>
                </div>
                <span className="text-xs font-medium px-2 py-0.5 rounded-full" style={{ color: STATUS_META[o.status].color, background: `${STATUS_META[o.status].color}22` }}>
                  {STATUS_META[o.status].label}
                </span>
              </div>
              <p className="text-xs mb-3" style={{ color: t.textDim }}>{o.items.map((i) => `${i.qty}× ${i.name}`).join(", ")} — <span className="sz-mono">{money(o.total)}</span></p>
              <div className="flex gap-2">
                <button
                  disabled={o.status !== "placed"}
                  onClick={() => advanceOrderStatus(o.id, "shipped")}
                  className="px-3 py-1.5 rounded-lg text-xs font-medium disabled:opacity-30"
                  style={{ background: t.chip, color: t.text }}
                >
                  Mark shipped
                </button>
                <button
                  disabled={o.status !== "shipped"}
                  onClick={() => advanceOrderStatus(o.id, "delivered")}
                  className="px-3 py-1.5 rounded-lg text-xs font-medium disabled:opacity-30"
                  style={{ background: t.chip, color: t.text }}
                >
                  Mark delivered
                </button>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}