// =========================================================
// Account, Admin, About pages
// =========================================================

function statusLabel(s) {
  return ({ placed: "Placed", confirmed: "Confirmed", delivered: "Delivered", cancelled: "Cancelled" })[s] || s;
}

function fmtDate(iso) {
  const d = new Date(iso);
  return d.toLocaleString("en-GB", { day: "2-digit", month: "short", year: "numeric", hour: "2-digit", minute: "2-digit" });
}

// =========================================================
// Account / Order History
// =========================================================
function AccountPage({ navigate, onLoginNeeded }) {
  const [state] = useStore();
  const user = state.user;
  const [tab, setTab] = React.useState("orders");

  if (!user) {
    return (
      <main className="account-page">
        <div className="wrap" style={{ display: "block", textAlign: "center", padding: "100px 0" }}>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(36px, 5vw, 56px)", margin: 0 }}>Sign in to see your orders.</h1>
          <div className="h-deva" style={{ color: "var(--ink-2)", fontSize: 22, marginTop: 14 }}>आफ्ना अर्डरहरू हेर्न साइन इन गर्नुहोस्</div>
          <p style={{ color: "var(--ink-2)", maxWidth: 50 + "ch", margin: "30px auto 36px" }}>
            Your order history, delivery addresses, and contact details all live here once you sign in.
          </p>
          <button className="btn accent" onClick={onLoginNeeded}>Sign in with Gmail</button>
        </div>
      </main>
    );
  }

  const myOrders = state.orders.filter(o => o.user.email?.toLowerCase() === user.email?.toLowerCase());

  return (
    <main className="account-page">
      <div className="wrap">
        <aside>
          <div style={{ marginBottom: 28 }}>
            <div style={{
              width: 56, height: 56, borderRadius: "50%", background: "var(--accent)", color: "white",
              display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontSize: 22, marginBottom: 14
            }}>{user.picture || user.name?.[0]}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22, lineHeight: 1.1 }}>{user.name}</div>
            <div className="h-mono" style={{ color: "var(--ink-3)", marginTop: 6 }}>{user.email}</div>
          </div>
          <nav className="account-nav">
            <button className={tab === "orders" ? "active" : ""} onClick={() => setTab("orders")}>My Orders ({myOrders.length})</button>
            <button className={tab === "profile" ? "active" : ""} onClick={() => setTab("profile")}>Profile & Address</button>
            <button onClick={() => { logout(); navigate({ name: "home" }); }}>Sign out</button>
          </nav>
        </aside>

        <section>
          {tab === "orders" && (
            <div>
              <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 48px)", margin: "0 0 6px" }}>My Orders</h1>
              <div className="h-deva" style={{ color: "var(--ink-2)" }}>मेरा अर्डरहरू</div>

              {myOrders.length === 0 ? (
                <div style={{ marginTop: 60, padding: "60px 40px", border: "1px dashed var(--rule)", textAlign: "center" }}>
                  <p style={{ color: "var(--ink-2)", margin: "0 0 20px" }}>You haven't placed any orders yet.</p>
                  <button className="btn" onClick={() => navigate({ name: "home" })}>Browse the store</button>
                </div>
              ) : (
                <div style={{ marginTop: 32 }}>
                  {myOrders.map(o => (
                    <div className="order-row" key={o.id}>
                      <span className="id">{o.id}</span>
                      <div>
                        <span className="items-line">
                          {o.items[0].name}{o.items.length > 1 ? ` + ${o.items.length - 1} more` : ""}
                          <span className="sub">{fmtDate(o.createdAt)} · {o.items.reduce((s, i) => s + i.qty, 0)} item{o.items.reduce((s, i) => s + i.qty, 0) === 1 ? "" : "s"}</span>
                        </span>
                      </div>
                      <span className="tot">{NPR(o.total)}</span>
                      <span className={"status-pill " + o.status}><span className="dot" />{statusLabel(o.status)}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}

          {tab === "profile" && (
            <div>
              <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 48px)", margin: "0 0 6px" }}>Profile</h1>
              <div className="h-deva" style={{ color: "var(--ink-2)", marginBottom: 32 }}>प्रोफाइल विवरण</div>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 24 }}>
                <div>
                  <h4 className="h-mono" style={{ margin: "0 0 8px" }}>Name</h4>
                  <p style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 20 }}>{user.name}</p>
                </div>
                <div>
                  <h4 className="h-mono" style={{ margin: "0 0 8px" }}>Gmail</h4>
                  <p style={{ margin: 0 }}>{user.email}</p>
                </div>
                <div>
                  <h4 className="h-mono" style={{ margin: "0 0 8px" }}>Mobile · +977</h4>
                  <p style={{ margin: 0, fontFamily: "var(--font-mono)" }}>{user.phone || <span style={{ color: "var(--ink-3)" }}>Not yet set</span>}</p>
                </div>
                <div>
                  <h4 className="h-mono" style={{ margin: "0 0 8px" }}>Secondary Mobile</h4>
                  <p style={{ margin: 0, fontFamily: "var(--font-mono)" }}>{user.secondaryPhone || <span style={{ color: "var(--ink-3)" }}>Not set</span>}</p>
                </div>
                <div style={{ gridColumn: "1 / -1" }}>
                  <h4 className="h-mono" style={{ margin: "0 0 8px" }}>Delivery Address</h4>
                  <p style={{ margin: 0 }}>{user.address || <span style={{ color: "var(--ink-3)" }}>Not yet set</span>}</p>
                </div>
                <div>
                  <h4 className="h-mono" style={{ margin: "0 0 8px" }}>Landmark</h4>
                  <p style={{ margin: 0 }}>{user.landmark || <span style={{ color: "var(--ink-3)" }}>Not set</span>}</p>
                </div>
                <div>
                  <h4 className="h-mono" style={{ margin: "0 0 8px" }}>Map Link</h4>
                  <p style={{ margin: 0, wordBreak: "break-all" }}>{user.mapLink || <span style={{ color: "var(--ink-3)" }}>Not set</span>}</p>
                </div>
              </div>

              <p style={{ marginTop: 40, color: "var(--ink-3)", fontSize: 13 }}>
                Profile details are saved when you place your first order. They auto-fill at checkout next time.
              </p>
            </div>
          )}
        </section>
      </div>
    </main>
  );
}

// =========================================================
// Admin Login Modal
// =========================================================
function AdminLoginGate({ children }) {
  const [state] = useStore();
  const [pass, setPass] = React.useState("");
  const [error, setError] = React.useState("");

  if (state.adminAuthed) return children;

  const submit = (e) => {
    e?.preventDefault();
    const r = adminLogin(pass);
    if (!r.ok) setError(r.error);
  };

  return (
    <main className="admin-page">
      <div className="wrap" style={{ display: "grid", placeItems: "center", minHeight: "70vh" }}>
        <div style={{ background: "var(--bg)", border: "1px solid var(--rule)", padding: 44, width: "min(440px, 100%)" }}>
          <span className="h-eyebrow">Restricted · store keeper only</span>
          <h1 style={{ fontFamily: "var(--font-display)", fontSize: 38, margin: "12px 0 6px", lineHeight: 1.05 }}>Admin sign-in</h1>
          <div className="h-deva" style={{ color: "var(--ink-2)", marginBottom: 26 }}>स्टोर किपर लग-इन</div>
          <p style={{ color: "var(--ink-2)", fontSize: 14, marginBottom: 28 }}>
            Enter the store passcode to manage orders and products.
          </p>
          <form onSubmit={submit}>
            <div className="fld">
              <label>Passcode <span className="req">*</span></label>
              <input
                type="password"
                value={pass}
                onChange={e => { setPass(e.target.value); setError(""); }}
                placeholder="••••••••"
                autoFocus
              />
              {error && <span className="err">{error}</span>}
            </div>
            <button className="btn block" type="submit" style={{ marginTop: 14 }}>Sign in →</button>
          </form>
          <p className="fineprint" style={{ marginTop: 22, lineHeight: 1.6 }}>
            <strong>Demo passcode:</strong> <code style={{ fontFamily: "var(--font-mono)", background: "var(--bg-2)", padding: "2px 6px" }}>nepal2026</code><br />
            In production, this becomes a secure server-side check.
          </p>
        </div>
      </div>
    </main>
  );
}

// =========================================================
// Admin (Store Keeper)
// =========================================================
function AdminPage({ navigate }) {
  const [state] = useStore();
  const orders = state.orders;
  const [tab, setTab] = React.useState("orders"); // orders | products
  const [selectedId, setSelectedId] = React.useState(null);
  const [statusFilter, setStatusFilter] = React.useState("all");

  React.useEffect(() => {
    seedDemoOrdersIfEmpty();
  }, []);

  if (!state.adminAuthed) return <AdminLoginGate><AdminPage navigate={navigate} /></AdminLoginGate>;

  const filtered = orders.filter(o => statusFilter === "all" ? true : o.status === statusFilter);
  const selected = orders.find(o => o.id === selectedId);

  const totalRev = orders.reduce((s, o) => s + o.total, 0);
  const placed = orders.filter(o => o.status === "placed").length;
  const delivered = orders.filter(o => o.status === "delivered").length;

  return (
    <main className="admin-page">
      <div className="wrap">
        <div className="admin-head">
          <div>
            <span className="h-eyebrow">Store keeper view · प्रोटोटाइप</span>
            <h1>Order Desk</h1>
            <div className="ne">अर्डर डेस्क</div>
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
            {tab === "orders" && (<>
              <span className="h-mono" style={{ color: "var(--ink-3)" }}>Filter:</span>
              <select className="select-bare" value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
                <option value="all">All ({orders.length})</option>
                <option value="placed">Placed ({orders.filter(o => o.status === "placed").length})</option>
                <option value="confirmed">Confirmed ({orders.filter(o => o.status === "confirmed").length})</option>
                <option value="delivered">Delivered ({orders.filter(o => o.status === "delivered").length})</option>
                <option value="cancelled">Cancelled ({orders.filter(o => o.status === "cancelled").length})</option>
              </select>
            </>)}
            <button className="link-btn" style={{ marginLeft: 14 }} onClick={() => { adminLogout(); navigate({ name: "home" }); }}>Sign out</button>
          </div>
        </div>

        <div style={{ display: "flex", gap: 0, borderBottom: "1px solid var(--rule)", marginBottom: 32 }}>
          <button
            className="chip"
            aria-pressed={tab === "orders"}
            onClick={() => setTab("orders")}
            style={{ borderRadius: 0, border: 0, borderBottom: tab === "orders" ? "2px solid var(--ink)" : "2px solid transparent", padding: "12px 18px" }}
          >Orders ({orders.length})</button>
          <button
            className="chip"
            aria-pressed={tab === "products"}
            onClick={() => setTab("products")}
            style={{ borderRadius: 0, border: 0, borderBottom: tab === "products" ? "2px solid var(--ink)" : "2px solid transparent", padding: "12px 18px" }}
          >Products ({getProducts().length})</button>
        </div>

        {tab === "orders" && (<>
        <div className="admin-stats">
          <div className="stat">
            <div className="k">Total Orders</div>
            <div className="v">{orders.length}</div>
            <div className="v-sub">{toDeva(orders.length)} अर्डर</div>
          </div>
          <div className="stat">
            <div className="k">Awaiting Call</div>
            <div className="v" style={{ color: "var(--accent)" }}>{placed}</div>
            <div className="v-sub">Within 24h</div>
          </div>
          <div className="stat">
            <div className="k">Delivered</div>
            <div className="v">{delivered}</div>
            <div className="v-sub">{toDeva(delivered)} पठाइयो</div>
          </div>
          <div className="stat">
            <div className="k">Revenue</div>
            <div className="v" style={{ fontSize: 30 }}>{NPR(totalRev)}</div>
            <div className="v-sub">Lifetime · COD</div>
          </div>
        </div>

        <div className="admin-table">
          <div className="hd">
            <span>Order ID</span>
            <span>Customer</span>
            <span>Delivery Address</span>
            <span>Phone</span>
            <span>Items</span>
            <span>Total</span>
            <span>Status</span>
          </div>
          {filtered.map(o => (
            <div className="tr" key={o.id} onClick={() => setSelectedId(o.id)}>
              <span className="id">
                {o.id}
                <span style={{ display: "block", fontSize: 10, color: "var(--ink-3)", marginTop: 2, fontFamily: "var(--font-body)" }}>
                  {fmtDate(o.createdAt)}
                </span>
              </span>
              <span className="cust">
                {o.user.name}
                <span className="e">{o.user.email}</span>
              </span>
              <span className="addr">
                {o.user.address}
                <span style={{ display: "block", color: "var(--ink-3)", fontSize: 11, marginTop: 2 }}>↳ {o.user.landmark}</span>
              </span>
              <span className="phone">
                +977 {o.user.phone}
                {o.user.secondaryPhone && <span style={{ display: "block", color: "var(--ink-3)", fontSize: 10 }}>+977 {o.user.secondaryPhone}</span>}
              </span>
              <span className="h-mono" style={{ fontSize: 12 }}>{o.items.length} × {o.items.reduce((s, i) => s + i.qty, 0)}</span>
              <span className="tot">{NPR(o.total)}</span>
              <span className={"status-pill " + o.status}><span className="dot" />{statusLabel(o.status)}</span>
            </div>
          ))}
          {filtered.length === 0 && (
            <div style={{ padding: 40, textAlign: "center", color: "var(--ink-3)" }}>No orders match this filter.</div>
          )}
        </div>
        </>)}

        {tab === "products" && <ProductsAdmin />}

        {selected && (
          <div className="modal-scrim" onClick={() => setSelectedId(null)}>
            <div className="modal" onClick={e => e.stopPropagation()} style={{ width: "min(640px, 100%)", padding: 36 }}>
              <button className="close-x" onClick={() => setSelectedId(null)}>×</button>
              <span className="h-eyebrow">Order {selected.id}</span>
              <h2 style={{ marginTop: 8 }}>{selected.user.name}</h2>
              <div className="h-mono" style={{ color: "var(--ink-3)", marginBottom: 22 }}>{fmtDate(selected.createdAt)}</div>

              <div className="admin-detail" style={{ padding: 24 }}>
                <div className="row2">
                  <div>
                    <div className="block">
                      <h4>Gmail</h4>
                      <p>{selected.user.email}</p>
                    </div>
                    <div className="block">
                      <h4>Mobile (Primary)</h4>
                      <p style={{ fontFamily: "var(--font-mono)" }}>+977 {selected.user.phone}</p>
                    </div>
                    {selected.user.secondaryPhone && (
                      <div className="block">
                        <h4>Mobile (Secondary)</h4>
                        <p style={{ fontFamily: "var(--font-mono)" }}>+977 {selected.user.secondaryPhone}</p>
                      </div>
                    )}
                  </div>
                  <div>
                    <div className="block">
                      <h4>Delivery Address</h4>
                      <p>{selected.user.address}</p>
                    </div>
                    <div className="block">
                      <h4>Landmark</h4>
                      <p>{selected.user.landmark}</p>
                    </div>
                    {selected.user.mapLink && (
                      <div className="block">
                        <h4>Map Link</h4>
                        <p style={{ fontSize: 12, wordBreak: "break-all" }}>{selected.user.mapLink}</p>
                      </div>
                    )}
                  </div>
                </div>

                <div className="block" style={{ marginTop: 20 }}>
                  <h4>Items</h4>
                  {selected.items.map(i => (
                    <div key={i.id} style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px dashed var(--rule)", fontSize: 14 }}>
                      <span>{i.name} <span style={{ color: "var(--ink-3)" }}>× {i.qty}</span></span>
                      <span style={{ fontFamily: "var(--font-mono)" }}>{NPR(i.price * i.qty)}</span>
                    </div>
                  ))}
                  <div style={{ display: "flex", justifyContent: "space-between", padding: "10px 0 0", fontFamily: "var(--font-display)", fontSize: 22 }}>
                    <span>Total</span>
                    <span>{NPR(selected.total)}</span>
                  </div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 4 }}>
                    Subtotal {NPR(selected.subtotal)} + Delivery {selected.deliveryFee === 0 ? "Free" : NPR(selected.deliveryFee)} · Cash on delivery
                  </div>
                </div>
              </div>

              <div style={{ marginTop: 22 }}>
                <div className="h-mono" style={{ marginBottom: 10, color: "var(--ink-3)" }}>Update status</div>
                <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                  {["placed", "confirmed", "delivered", "cancelled"].map(s => (
                    <button
                      key={s}
                      className="chip"
                      aria-pressed={selected.status === s}
                      onClick={() => updateOrderStatus(selected.id, s)}
                    >
                      {statusLabel(s)}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </main>
  );
}

// =========================================================
// About / Contact
// =========================================================
function AboutPage({ navigate }) {
  return (
    <main className="about-page">
      <div className="wrap">
        <span className="h-eyebrow">About · हाम्रो बारेमा</span>
        <h1>A storefront for<br />Nepal's musical lineage.</h1>
        <div className="ne-h1">परम्परा, मञ्च र विद्यालयका लागि</div>
        <p className="lead">
          Nepal Musical Store began in 2018 as a small shop in Putalisadak, selling guitars to weekend players. Eight years later, we stock everything from hand-carved sarangis sourced directly from Bhojpur to stage-ready amplifiers — and we deliver, cash on the doorstep, across Nepal.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "stretch", marginBottom: 56 }}>
          <div style={{ aspectRatio: "4/3" }}>
            <Placeholder label="store · putalisadak storefront" tone="dark" style={{ height: "100%" }} />
          </div>
          <div style={{ aspectRatio: "4/3" }}>
            <Placeholder label="store keeper · ramesh dai" tone="saffron" style={{ height: "100%" }} />
          </div>
        </div>

        <div className="columns">
          <div>
            <span className="meta">01 — Visit</span>
            <h3>Putalisadak, Kathmandu</h3>
            <p style={{ color: "var(--ink-2)", marginTop: 8 }}>
              Putalisadak Marg, opposite Padmodaya School. <span className="h-deva">पुतलीसडक</span>
            </p>
            <p className="h-mono" style={{ color: "var(--ink-3)", marginTop: 12, fontSize: 11 }}>
              Sun – Fri · 10:00 – 20:00<br />
              Saturday · Closed
            </p>
          </div>
          <div>
            <span className="meta">02 — Call</span>
            <h3>+977 1-4242424</h3>
            <p style={{ color: "var(--ink-2)", marginTop: 8 }}>
              Call our store keeper directly. We answer between 10 AM and 8 PM, every day except Saturday.
            </p>
            <p className="h-mono" style={{ color: "var(--ink-3)", marginTop: 12, fontSize: 11 }}>
              Mobile: +977 98-41-23-45-67
            </p>
          </div>
          <div>
            <span className="meta">03 — Promise</span>
            <h3>Cash on delivery,<br />Nepal-wide.</h3>
            <p style={{ color: "var(--ink-2)", marginTop: 8 }}>
              You pay only when the instrument arrives at your door. Inside the valley, free over Rs. 20,000. Outside the valley, two to seven days.
            </p>
          </div>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { AccountPage, AdminPage, AboutPage, AdminLoginGate });