/* global React, Icons */
const { useState: useStateA } = React;

// ─── LOGIN / ACCOUNT ───────────────────────────────────────
function LoginPage() {
  const { login, user } = useStore();
  const { navigate } = useRouter();
  const [mode, setMode] = useStateA("login");
  const [form, setForm] = useStateA({ email: "", password: "", name: "" });
  const [showPw, setShowPw] = useStateA(false);
  const [err, setErr] = useStateA("");

  const submit = (e) => {
    e.preventDefault();
    if (!/^\S+@\S+\.\S+$/.test(form.email)) { setErr("Please enter a valid email"); return; }
    if (form.password.length < 4) { setErr("Password is too short"); return; }
    login(form.email, form.name || undefined);
    navigate("/account");
  };

  if (user) return React.createElement(AccountPage);

  return React.createElement("div", { className: "container page fade-in", style: { maxWidth: 960 } },
    React.createElement("div", { style: { display: "grid", gap: 32, gridTemplateColumns: "1fr" } },
      React.createElement("div", { className: "card", style: { padding: 36 } },
        React.createElement("div", { style: { display: "flex", gap: 4, background: "var(--graycool-50)", padding: 4, borderRadius: 10, marginBottom: 24 } },
          ["login", "signup"].map((m) =>
            React.createElement("button", {
              key: m, onClick: () => { setMode(m); setErr(""); },
              style: {
                flex: 1, padding: "8px 12px", border: 0, borderRadius: 7, cursor: "pointer",
                background: mode === m ? "#fff" : "transparent",
                boxShadow: mode === m ? "var(--shadow-xs)" : "none",
                fontSize: 14, fontWeight: 500,
                color: mode === m ? "var(--graycool-900)" : "var(--graycool-600)",
              }
            }, m === "login" ? "Sign in" : "Create account")
          )
        ),
        React.createElement("h1", { style: { fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em", margin: "0 0 6px" } },
          mode === "login" ? "Welcome back." : "Join Morpheme Store."
        ),
        React.createElement("p", { style: { color: "var(--graycool-600)", fontSize: 14, marginBottom: 24 } },
          mode === "login" ? "Sign in to track orders and save wishlists." : "Create an account for faster checkout and drop previews."
        ),
        err && React.createElement("div", { style: { padding: 10, background: "var(--error-50)", color: "var(--error-700)", borderRadius: 8, fontSize: 13, marginBottom: 16, display: "flex", gap: 6, alignItems: "center" } },
          React.createElement(Icons.AlertCircle, { size: 14 }), err
        ),
        React.createElement("form", { onSubmit: submit, style: { display: "flex", flexDirection: "column", gap: 14 } },
          mode === "signup" && React.createElement("div", { className: "field" },
            React.createElement("label", null, "Full name"),
            React.createElement("input", { className: "input", value: form.name, onChange: (e) => setForm({ ...form, name: e.target.value }), placeholder: "Adi Putra" })
          ),
          React.createElement("div", { className: "field" },
            React.createElement("label", null, "Email"),
            React.createElement("div", { className: "input-group" },
              React.createElement("span", { className: "addon" }, React.createElement(Icons.Mail, { size: 16 })),
              React.createElement("input", { className: "input", type: "email", value: form.email, onChange: (e) => setForm({ ...form, email: e.target.value }), placeholder: "you@email.com" })
            )
          ),
          React.createElement("div", { className: "field" },
            React.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
              React.createElement("label", null, "Password"),
              mode === "login" && React.createElement("a", { style: { fontSize: 13 } }, "Forgot?")
            ),
            React.createElement("div", { className: "input-group" },
              React.createElement("span", { className: "addon" }, React.createElement(Icons.Lock, { size: 16 })),
              React.createElement("input", { className: "input", type: showPw ? "text" : "password", value: form.password, onChange: (e) => setForm({ ...form, password: e.target.value }), placeholder: "••••••••" }),
              React.createElement("button", { type: "button", className: "addon", onClick: () => setShowPw((v) => !v), style: { border: 0, borderLeft: "1px solid var(--graycool-200)", borderRight: 0, background: "var(--graycool-50)", cursor: "pointer" } },
                React.createElement(showPw ? Icons.EyeOff : Icons.Eye, { size: 16 })
              )
            )
          ),
          mode === "signup" && React.createElement("label", { style: { display: "flex", gap: 8, alignItems: "flex-start", fontSize: 13, color: "var(--graycool-700)", lineHeight: "20px" } },
            React.createElement("input", { type: "checkbox", style: { marginTop: 2 }, defaultChecked: true }),
            "Send me drop previews and a 10% welcome code"
          ),
          React.createElement(Button, { variant: "primary", size: "lg", block: true, type: "submit" }, mode === "login" ? "Sign in" : "Create account"),
          React.createElement("div", { style: { position: "relative", textAlign: "center", margin: "8px 0", color: "var(--graycool-400)", fontSize: 12 } },
            React.createElement("span", { style: { background: "#fff", padding: "0 10px", position: "relative", zIndex: 1 } }, "or continue with"),
            React.createElement("div", { style: { position: "absolute", left: 0, right: 0, top: "50%", height: 1, background: "var(--graycool-100)" } })
          ),
          React.createElement("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 } },
            React.createElement(Button, { variant: "secondary", type: "button", onClick: () => { login("guest@google.com", "Google User"); navigate("/account"); } }, "Google"),
            React.createElement(Button, { variant: "secondary", type: "button", onClick: () => { login("guest@apple.com", "Apple User"); navigate("/account"); } }, "Apple"),
          )
        )
      ),
      React.createElement("div", { style: { padding: 40, background: "var(--graycool-900)", color: "#fff", borderRadius: 16, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 400 } },
        React.createElement("div", null,
          React.createElement("span", { className: "badge badge-dark", style: { background: "rgba(255,255,255,0.08)", color: "#fff", border: "1px solid rgba(255,255,255,0.12)", marginBottom: 20 } }, "Member perks"),
          React.createElement("h2", { className: "display-sm", style: { color: "#fff", marginBottom: 16 } }, "Small crowd, better perks."),
          React.createElement("ul", { style: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 } },
            ["Early access to new drops (48h before public)", "Free alterations at our Bandung atelier", "Members-only monthly letter from our founders", "Extended 60-day returns"].map((t) =>
              React.createElement("li", { key: t, style: { display: "flex", gap: 10, color: "rgba(255,255,255,0.85)", fontSize: 14 } },
                React.createElement(Icons.Check, { size: 18, style: { color: "var(--secondary-300)", flexShrink: 0, marginTop: 2 } }), t
              )
            )
          )
        ),
        React.createElement("p", { style: { fontSize: 12, color: "rgba(255,255,255,0.5)", marginTop: 32 } }, "We never share your data. Read our privacy policy.")
      ),
      React.createElement("style", null, `@media (min-width: 800px) { .container.page > div[style*="grid-template-columns: 1fr"] { grid-template-columns: 1fr 1fr !important; } }`)
    )
  );
}

function AccountPage() {
  const { user, logout, orders, wishlist, products, formatIDR } = useStore();
  const { navigate } = useRouter();
  const wished = products.filter((p) => wishlist.includes(p.id));

  return React.createElement("div", { className: "container page fade-in" },
    React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 24, flexWrap: "wrap", gap: 12 } },
      React.createElement("div", null,
        React.createElement("h1", { className: "section-title" }, "Hello, ", user?.name || "there"),
        React.createElement("p", { style: { color: "var(--graycool-600)", marginTop: 4 } }, user?.email)
      ),
      React.createElement(Button, { variant: "secondary", onClick: () => { logout(); navigate("/"); } }, "Sign out")
    ),
    React.createElement("div", { style: { display: "grid", gap: 16, gridTemplateColumns: "repeat(3, 1fr)", marginBottom: 32 } },
      [
        { label: "Orders", value: orders.length, I: Icons.Package },
        { label: "Wishlist", value: wishlist.length, I: Icons.Heart },
        { label: "Rewards points", value: "240", I: Icons.Sparkles },
      ].map((s) =>
        React.createElement("div", { key: s.label, className: "card", style: { padding: 20 } },
          React.createElement(s.I, { size: 18, style: { color: "var(--brand-500)", marginBottom: 10 } }),
          React.createElement("div", { style: { fontSize: 24, fontWeight: 600 } }, s.value),
          React.createElement("div", { style: { fontSize: 13, color: "var(--graycool-600)" } }, s.label)
        )
      )
    ),
    React.createElement("h2", { style: { fontSize: 20, fontWeight: 600, margin: "0 0 16px" } }, "Recent orders"),
    orders.length === 0
      ? React.createElement("div", { className: "card", style: { padding: 32, textAlign: "center", color: "var(--graycool-500)" } },
          React.createElement(Icons.Package, { size: 32, style: { color: "var(--graycool-300)", marginBottom: 8 } }),
          React.createElement("p", null, "No orders yet — ", React.createElement("a", { onClick: () => navigate("/shop"), style: { cursor: "pointer" } }, "start shopping"))
        )
      : React.createElement("div", { className: "card", style: { padding: 0, overflow: "hidden" } },
          orders.map((o, i) =>
            React.createElement("div", { key: o.id, style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: 20, borderTop: i === 0 ? "none" : "1px solid var(--graycool-100)", gap: 12, flexWrap: "wrap" } },
              React.createElement("div", null,
                React.createElement("div", { style: { fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600 } }, o.id),
                React.createElement("div", { style: { fontSize: 13, color: "var(--graycool-500)", marginTop: 2 } },
                  new Date(o.createdAt).toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }),
                  " · ", o.items.reduce((s, l) => s + l.qty, 0), " items"
                )
              ),
              React.createElement("div", { style: { display: "flex", alignItems: "center", gap: 14 } },
                React.createElement("span", { className: "badge badge-success" }, "Processing"),
                React.createElement("span", { style: { fontWeight: 600 } }, formatIDR(o.total)),
                React.createElement(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`/confirmation/${o.id}`), iconRight: React.createElement(Icons.ChevronRight, { size: 14 }) }, "View")
              )
            )
          )
        ),
    wished.length > 0 && React.createElement("section", { style: { marginTop: 40 } },
      React.createElement("h2", { style: { fontSize: 20, fontWeight: 600, margin: "0 0 16px" } }, "Your wishlist"),
      React.createElement("div", { className: "product-grid" },
        wished.map((p) => React.createElement(ProductCard, { key: p.id, product: p }))
      )
    )
  );
}

Object.assign(window, { LoginPage, AccountPage });