// =========================================================
// Cart Drawer, Login Modal, Checkout, Confirmation
// =========================================================

// ===== Cart Drawer =====
function CartDrawer({ open, onClose, navigate }) {
  const [state] = useStore();
  if (!open) return null;
  const items = state.cart;
  const subtotal = cartSubtotal(state);
  const fee = deliveryFee(subtotal);

  return (
    <React.Fragment>
      <div className="drawer-scrim" onClick={onClose} />
      <aside className="drawer">
        <div className="drawer-head">
          <div>
            <h3>Your Cart</h3>
            <div className="h-deva" style={{ color: "var(--ink-3)", fontSize: 13 }}>तपाईंको कार्ट</div>
          </div>
          <button className="close" onClick={onClose}><CloseIcon /></button>
        </div>
        <div className="drawer-body">
          {items.length === 0 ? (
            <div className="cart-empty">
              <div className="ne" style={{ marginBottom: 18 }}>कार्ट खाली छ</div>
              <p style={{ marginBottom: 24 }}>Your cart is empty.</p>
              <button className="btn" onClick={onClose}>Continue shopping</button>
            </div>
          ) : (
            items.map(i => {
              const p = getProductById(i.id);
              if (!p) return null;
              return (
                <div className="cart-item" key={i.id}>
                  <div className="thumb">
                    <Placeholder label="" tone={productPlaceholderTone(p.id)} style={{ height: "100%", padding: 4 }} />
                  </div>
                  <div className="info">
                    <div className="name">{p.name}</div>
                    <div className="ne">{p.ne}</div>
                    <div className="ctl">
                      <button onClick={() => updateQty(i.id, i.qty - 1)}>−</button>
                      <span>{i.qty}</span>
                      <button onClick={() => updateQty(i.id, i.qty + 1)}>+</button>
                      <span style={{ flex: 1 }} />
                      <button onClick={() => removeFromCart(i.id)}>Remove</button>
                    </div>
                  </div>
                  <div className="price">{NPR(p.price * i.qty)}</div>
                </div>
              );
            })
          )}
        </div>
        {items.length > 0 && (
          <div className="drawer-foot">
            <div className="cart-summary">
              <div className="row"><span>Subtotal</span><span>{NPR(subtotal)}</span></div>
              <div className="row"><span>Delivery {subtotal >= 20000 ? "· Free over 20K" : ""}</span><span>{fee === 0 ? "Free" : NPR(fee)}</span></div>
              <div className="row"><span>Payment</span><span>Cash on delivery</span></div>
              <div className="row total"><span>Total</span><span>{NPR(subtotal + fee)}</span></div>
            </div>
            <button
              className="btn accent block"
              style={{ marginTop: 18 }}
              onClick={() => { onClose(); navigate({ name: "checkout" }); }}
            >
              Checkout →
            </button>
            <p className="h-mono" style={{ marginTop: 14, color: "var(--ink-3)", textAlign: "center" }}>
              Sign in with Gmail at checkout
            </p>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

// ===== Login Modal (simulated Gmail) =====
function LoginModal({ open, onClose, onSuccess }) {
  const [stage, setStage] = React.useState("intro"); // intro | choosing | enter
  const [emailInput, setEmailInput] = React.useState("");
  const [nameInput, setNameInput] = React.useState("");
  const [error, setError] = React.useState("");

  React.useEffect(() => { if (open) { setStage("intro"); setEmailInput(""); setNameInput(""); setError(""); } }, [open]);

  if (!open) return null;

  const sampleAccounts = [
    { name: "Aakash Shrestha", email: "aakash.shrestha@gmail.com" },
    { name: "Priya Tamang",    email: "priya.tamang@gmail.com" },
    { name: "Use another account", email: "" }
  ];

  const handlePick = (acct) => {
    if (!acct.email) {
      setStage("enter");
      return;
    }
    const result = simulatedGmailLogin(acct.email, acct.name);
    if (result.ok) onSuccess();
  };

  const handleEnter = () => {
    setError("");
    if (!emailInput) return setError("Please enter your gmail address.");
    const result = simulatedGmailLogin(emailInput, nameInput);
    if (!result.ok) return setError(result.error);
    onSuccess();
  };

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="close-x" onClick={onClose}>×</button>

        {stage === "intro" && (<>
          <h2>Sign in</h2>
          <div className="ne">गुगल खाताबाट साइन इन गर्नुहोस्</div>
          <p className="kicker">We only accept Gmail accounts. This keeps your orders safe and lets our store keeper reach you with delivery updates.</p>
          <button className="gmail-btn" onClick={() => setStage("choosing")}>
            <span className="g" />
            <span>Continue with Google</span>
            <span style={{ marginLeft: "auto", color: "var(--ink-3)", fontSize: 12 }}>→</span>
          </button>
          <p className="fineprint">
            Only <strong>@gmail.com</strong> addresses are accepted at Nepal Musical Store. <span className="deva">अन्य इमेल स्वीकार्य छैन।</span>
          </p>
        </>)}

        {stage === "choosing" && (<>
          <h2>Choose an account</h2>
          <div className="ne">खाता छनोट गर्नुहोस्</div>
          <p className="kicker" style={{ marginBottom: 18 }}>Select a Google account to continue to Nepal Musical Store.</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {sampleAccounts.map((a, i) => (
              <button key={i} className="gmail-btn" onClick={() => handlePick(a)}>
                {a.email ? (
                  <span style={{
                    width: 30, height: 30, borderRadius: "50%", background: "var(--accent)", color: "white",
                    display: "grid", placeItems: "center", fontFamily: "var(--font-display)", fontSize: 14
                  }}>{a.name[0]}</span>
                ) : (
                  <span style={{
                    width: 30, height: 30, borderRadius: "50%", border: "1px dashed var(--rule-strong)", color: "var(--ink-3)",
                    display: "grid", placeItems: "center", fontSize: 18
                  }}>+</span>
                )}
                <span style={{ display: "flex", flexDirection: "column", textAlign: "left" }}>
                  <span style={{ fontSize: 14 }}>{a.name}</span>
                  {a.email && <span style={{ fontSize: 12, color: "var(--ink-3)" }}>{a.email}</span>}
                </span>
              </button>
            ))}
          </div>
          <p className="fineprint">This is a prototype — choosing an account simulates Google sign-in. In production this opens Google's real OAuth screen.</p>
        </>)}

        {stage === "enter" && (<>
          <h2>Use another Gmail</h2>
          <div className="ne">अर्को जीमेल प्रयोग गर्नुहोस्</div>
          <p className="kicker" style={{ marginBottom: 24 }}>Enter your Gmail address to sign in.</p>
          <div className="fld">
            <label>Full Name</label>
            <input type="text" value={nameInput} onChange={e => setNameInput(e.target.value)} placeholder="e.g. Sushma Gurung" />
          </div>
          <div className="fld">
            <label>Gmail Address <span className="req">*</span></label>
            <input type="email" value={emailInput} onChange={e => setEmailInput(e.target.value)} placeholder="yourname@gmail.com" />
            {error && <span className="err">{error}</span>}
            {!error && <span className="hint">Must end with @gmail.com</span>}
          </div>
          <button className="btn block" style={{ marginTop: 14 }} onClick={handleEnter}>Sign in</button>
          <p className="fineprint" style={{ marginTop: 16 }}>
            <button onClick={() => setStage("choosing")} className="link-btn">← Back</button>
          </p>
        </>)}
      </div>
    </div>
  );
}

// =========================================================
// Checkout Page
// =========================================================
function CheckoutPage({ navigate, onLoginNeeded, onPlaced }) {
  const [state] = useStore();
  const subtotal = cartSubtotal(state);
  const fee = deliveryFee(subtotal);
  const items = state.cart;
  const total = subtotal + fee;

  const [step, setStep] = React.useState(state.user ? "shipping" : "signin");

  const [form, setForm] = React.useState(() => ({
    name: state.user?.name || "",
    email: state.user?.email || "",
    phone: state.user?.phone || "",
    secondaryPhone: state.user?.secondaryPhone || "",
    address: state.user?.address || "",
    landmark: state.user?.landmark || "",
    mapLink: state.user?.mapLink || "",
  }));

  React.useEffect(() => {
    if (state.user) {
      setForm(f => ({
        name: state.user.name || f.name,
        email: state.user.email || f.email,
        phone: state.user.phone || f.phone,
        secondaryPhone: state.user.secondaryPhone || f.secondaryPhone,
        address: state.user.address || f.address,
        landmark: state.user.landmark || f.landmark,
        mapLink: state.user.mapLink || f.mapLink,
      }));
      if (step === "signin") setStep("shipping");
    }
  }, [state.user]);

  const [errors, setErrors] = React.useState({});

  // Empty cart guard
  if (items.length === 0 && step !== "done") {
    return (
      <main className="checkout-page">
        <div className="wrap" style={{ display: "block", textAlign: "center", padding: "100px 0" }}>
          <h1>Your cart is empty.</h1>
          <div className="sub" style={{ fontSize: 22, marginTop: 14 }}>तपाईंको कार्ट खाली छ</div>
          <p style={{ color: "var(--ink-2)", maxWidth: 44 + "ch", margin: "24px auto 36px" }}>
            Add some instruments to your cart before checking out.
          </p>
          <button className="btn accent" onClick={() => navigate({ name: "home" })}>Browse the store</button>
        </div>
      </main>
    );
  }

  const validate = () => {
    const e = {};
    if (!form.name?.trim()) e.name = "Required";
    if (!form.phone?.trim()) {
      e.phone = "Required";
    } else if (!/^9[78]\d{8}$/.test(form.phone.replace(/\D/g, ""))) {
      e.phone = "Must be 10 digits, starting with 97 or 98";
    }
    if (form.secondaryPhone?.trim() && !/^9[78]\d{8}$/.test(form.secondaryPhone.replace(/\D/g, ""))) {
      e.secondaryPhone = "Must be 10 digits, starting with 97 or 98";
    }
    if (!form.address?.trim() || form.address.trim().length < 12) e.address = "Please enter your full address";
    if (!form.landmark?.trim()) e.landmark = "Required — helps the delivery person find you";
    return e;
  };

  const onPlace = () => {
    const e = validate();
    setErrors(e);
    if (Object.keys(e).length > 0) return;
    const order = placeOrder(form);
    onPlaced(order);
  };

  return (
    <main className="checkout-page">
      <div className="wrap">
        <div>
          <div className="crumbs">
            <a onClick={() => navigate({ name: "home" })} style={{ cursor: "pointer" }}>Home</a>
            <span className="sep">/</span>
            <span>Checkout</span>
          </div>
          <h1>Checkout</h1>
          <div className="sub">डेलिभरी विवरण</div>

          <div className="steps">
            <div className={"s " + (step === "signin" ? "active" : "done")}><span className="n">1</span><span>Sign in</span></div>
            <div className="bar" />
            <div className={"s " + (step === "shipping" ? "active" : (state.user && form.address && form.landmark && !Object.keys(validate()).length ? "done" : ""))}><span className="n">2</span><span>Shipping</span></div>
            <div className="bar" />
            <div className="s"><span className="n">3</span><span>Confirm</span></div>
          </div>

          {step === "signin" && (
            <div style={{ border: "1px solid var(--rule)", padding: 32, background: "var(--bg-2)" }}>
              <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, margin: "0 0 4px" }}>Sign in to continue</h3>
              <div className="h-deva" style={{ color: "var(--ink-2)", fontSize: 14, marginBottom: 18 }}>जारी राख्न साइन इन गर्नुहोस्</div>
              <p style={{ color: "var(--ink-2)", marginBottom: 24 }}>You'll need a Gmail account to place an order. This lets us reach you when your instrument is ready for delivery.</p>
              <button className="btn block" onClick={onLoginNeeded}>Sign in with Gmail →</button>
            </div>
          )}

          {step === "shipping" && (
            <div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 14px", border: "1px solid var(--rule)", background: "var(--bg-2)", marginBottom: 28 }}>
                <div>
                  <div className="h-mono" style={{ color: "var(--ink-3)" }}>Signed in as</div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 17, marginTop: 2 }}>{state.user?.name}</div>
                  <div className="h-mono" style={{ color: "var(--ink-3)", marginTop: 2 }}>{state.user?.email}</div>
                </div>
                <button className="link-btn" onClick={() => { logout(); setStep("signin"); }}>Sign out</button>
              </div>

              <h3 className="h-display" style={{ fontSize: 22, margin: "0 0 4px" }}>Contact</h3>
              <hr className="h-rule" style={{ marginBottom: 20 }} />

              <div className="fld row2">
                <div className="fld">
                  <label>Full Name <span className="req">*</span></label>
                  <input type="text" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Your full name" />
                  {errors.name && <span className="err">{errors.name}</span>}
                </div>
                <div className="fld">
                  <label>Gmail</label>
                  <input type="email" value={form.email} readOnly style={{ color: "var(--ink-3)" }} />
                  <span className="hint">Verified through Google sign-in</span>
                </div>
              </div>

              <div className="fld">
                <label>Mobile Number · Nepal <span className="req">*</span></label>
                <div className="fld-phone">
                  <div className="prefix">+977</div>
                  <input
                    type="tel"
                    inputMode="numeric"
                    maxLength={10}
                    value={form.phone}
                    onChange={e => setForm({ ...form, phone: e.target.value.replace(/\D/g, "").slice(0, 10) })}
                    placeholder="98XXXXXXXX"
                  />
                </div>
                {errors.phone ? <span className="err">{errors.phone}</span> : <span className="hint">10 digits · must start with 97 or 98</span>}
              </div>

              <div className="fld">
                <label>Secondary Mobile · Optional</label>
                <div className="fld-phone">
                  <div className="prefix">+977</div>
                  <input
                    type="tel"
                    inputMode="numeric"
                    maxLength={10}
                    value={form.secondaryPhone}
                    onChange={e => setForm({ ...form, secondaryPhone: e.target.value.replace(/\D/g, "").slice(0, 10) })}
                    placeholder="Optional backup number"
                  />
                </div>
                {errors.secondaryPhone && <span className="err">{errors.secondaryPhone}</span>}
              </div>

              <h3 className="h-display" style={{ fontSize: 22, margin: "32px 0 4px" }}>Delivery Address</h3>
              <hr className="h-rule" style={{ marginBottom: 20 }} />

              <div className="fld">
                <label>Full Address <span className="req">*</span></label>
                <textarea
                  value={form.address}
                  onChange={e => setForm({ ...form, address: e.target.value })}
                  placeholder="Tole / street, Ward, Municipality, District, Province"
                  rows={3}
                />
                {errors.address ? <span className="err">{errors.address}</span> : <span className="hint">e.g. Naxal, Ward 1, Kathmandu Metro, Bagmati Province</span>}
              </div>

              <div className="fld">
                <label>Nearby Landmark <span className="req">*</span></label>
                <input
                  type="text"
                  value={form.landmark}
                  onChange={e => setForm({ ...form, landmark: e.target.value })}
                  placeholder="e.g. Behind Naxal Bhagwati Temple"
                />
                {errors.landmark ? <span className="err">{errors.landmark}</span> : <span className="hint">A nearby place our delivery person will recognize</span>}
              </div>

              <div className="fld">
                <label>Google Maps Location · Optional</label>
                <input
                  type="url"
                  value={form.mapLink}
                  onChange={e => setForm({ ...form, mapLink: e.target.value })}
                  placeholder="Paste a Google Maps link (optional)"
                />
                <span className="hint">Helps us pin-drop your exact location</span>
              </div>

              <div style={{ display: "flex", gap: 12, marginTop: 32, alignItems: "center" }}>
                <input type="checkbox" checked readOnly style={{ accentColor: "var(--accent)" }} />
                <span style={{ fontSize: 13 }}>
                  <strong>Cash on delivery</strong> · Pay when the store keeper hands over your order.
                  <span className="h-deva" style={{ marginLeft: 6, color: "var(--ink-3)" }}>नगद डेलिभरी</span>
                </span>
              </div>

              <div style={{ display: "flex", gap: 14, marginTop: 36 }}>
                <button className="btn ghost" onClick={() => navigate({ name: "home" })}>← Continue shopping</button>
                <button className="btn accent" style={{ flex: 1 }} onClick={onPlace}>
                  Place Order · {NPR(total)}
                </button>
              </div>
            </div>
          )}
        </div>

        <aside className="checkout-summary">
          <h3>Order Summary</h3>
          <div className="items">
            {items.map(i => {
              const p = getProductById(i.id);
              if (!p) return null;
              return (
                <div className="item-line" key={i.id}>
                  <span className="nm">{p.name} <span className="qty">× {i.qty}</span></span>
                  <span>{NPR(p.price * i.qty)}</span>
                </div>
              );
            })}
          </div>
          <div className="line"><span>Subtotal</span><span>{NPR(subtotal)}</span></div>
          <div className="line"><span>Delivery</span><span>{fee === 0 ? "Free" : NPR(fee)}</span></div>
          <div className="line tot"><span>Total</span><span>{NPR(total)}</span></div>
          <p className="h-mono" style={{ marginTop: 16, color: "var(--ink-3)", letterSpacing: "0.08em" }}>
            Cash on delivery · {toDeva("नगद")}
          </p>
        </aside>
      </div>
    </main>
  );
}

// =========================================================
// Order Confirmation
// =========================================================
function ConfirmationPage({ order, navigate }) {
  if (!order) {
    return (
      <main className="confirm-page">
        <div className="wrap">
          <p>No order found.</p>
          <button className="btn" onClick={() => navigate({ name: "home" })}>Back to shop</button>
        </div>
      </main>
    );
  }
  return (
    <main className="confirm-page">
      <div className="wrap">
        <div className="check" />
        <h1>Thank you<br />for your order.</h1>
        <div className="ne-hello">तपाईंको अर्डर प्राप्त भयो</div>
        <p className="msg">
          Thank you for placing your order! We will contact you for confirmation within 24 hours before delivery.
        </p>

        <div className="confirm-order-card">
          <h3>Order details</h3>
          <div className="row"><span className="k">Order ID</span><span style={{ fontFamily: "var(--font-mono)" }}>{order.id}</span></div>
          <div className="row"><span className="k">Customer</span><span>{order.user.name}</span></div>
          <div className="row"><span className="k">Mobile</span><span style={{ fontFamily: "var(--font-mono)" }}>+977 {order.user.phone}</span></div>
          <div className="row"><span className="k">Delivery</span><span style={{ textAlign: "right", maxWidth: "65%" }}>{order.user.address}</span></div>
          <div className="row"><span className="k">Landmark</span><span>{order.user.landmark}</span></div>
          <div className="row"><span className="k">Items</span><span>{order.items.length} item{order.items.length === 1 ? "" : "s"}</span></div>
          <div className="row"><span className="k">Total</span><span style={{ fontFamily: "var(--font-display)", fontSize: 20 }}>{NPR(order.total)}</span></div>
          <div className="row"><span className="k">Payment</span><span>Cash on delivery</span></div>
        </div>

        <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 36 }}>
          <button className="btn ghost" onClick={() => navigate({ name: "home" })}>Continue shopping</button>
          <button className="btn" onClick={() => navigate({ name: "account" })}>View my orders</button>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { CartDrawer, LoginModal, CheckoutPage, ConfirmationPage });