// cart.jsx — slide-out cart drawer + multi-step checkout + success.
const { Icon: CIcon } = window;

function computeTotals(items) {
  const subtotal = items.reduce((s, it) => s + it.product.price * it.qty, 0);
  return { subtotal, vat: 0, shipping: 0, total: subtotal };
}

function CartLine({ it, lang, t, onQty, onRemove, onView }) {
  const { fmtMoney, CatMedallion } = window;
  const open = onView ? () => onView(it.product.id) : undefined;
  const clickable = onView ? { onClick: open, style: { cursor: "pointer" } } : {};
  return (
    <div className="lineitem">
      <div className="lineitem__media" {...clickable}><CatMedallion catId={it.product.cat} size={30} /></div>
      <div className="lineitem__main">
        <div className="lineitem__name" {...clickable}>{it.product.name[lang]}</div>
        <div className="lineitem__sku">{it.product.sku}</div>
        <div className="lineitem__row">
          <window.QtyStepper value={it.qty} onChange={(v) => onQty(it.product.id, v)} small max={it.product.stock || 99} />
          <span className="lineitem__price num-tabular">{fmtMoney(it.product.price * it.qty, lang)}</span>
        </div>
        <button className="linkbtn" onClick={() => onRemove(it.product.id)} style={{ marginTop: 6 }}>
          <CIcon name="trash" size={14} />{t.remove}
        </button>
      </div>
    </div>
  );
}

function CartDrawer({ open, onClose, items, lang, t, onQty, onRemove, onCheckout, onBrowse, onView }) {
  const { fmtMoney } = window;
  const totals = computeTotals(items);
  const count = items.reduce((s, it) => s + it.qty, 0);
  return (
    <>
      <div className={"scrim" + (open ? " is-open" : "")} style={{ display: open ? "block" : "none" }} onClick={onClose} />
      <aside className={"drawer" + (open ? " is-open" : "")} aria-hidden={!open}>
        <div className="drawer__head">
          <CIcon name="cart" size={22} />
          <h3>{t.cartTitle}</h3>
          {count > 0 && <span className="count num-tabular">{count} {count === 1 ? t.item : t.items}</span>}
          <button className="iconbtn" style={{ marginInlineStart: "auto" }} onClick={onClose} aria-label="Close"><CIcon name="x" size={22} /></button>
        </div>
        {items.length === 0 ? (
          <div className="emptycart">
            <div className="ic"><CIcon name="cart" size={32} /></div>
            <h4>{t.cartEmpty}</h4>
            <p>{t.cartEmptySub}</p>
            <button className="btn btn--primary" onClick={() => { onClose(); onBrowse(); }}>{t.startShopping}</button>
          </div>
        ) : (
          <>
            <div className="drawer__body">
              {items.map((it) => <CartLine key={it.product.id} it={it} lang={lang} t={t} onQty={onQty} onRemove={onRemove} onView={onView} />)}
            </div>
            <div className="drawer__foot">
              <div className="summary">
                <div className="summary__row"><span>{t.subtotal}</span><span className="num-tabular">{fmtMoney(totals.subtotal, lang)}</span></div>
                <div className="summary__row summary__row--total"><span>{t.total}</span><span className="num-tabular">{fmtMoney(totals.total, lang)}</span></div>
              </div>
              <button className="btn btn--primary btn--lg btn--block" onClick={onCheckout}>
                {t.proceed}<CIcon name="arrow-right" size={20} className="flip-x" />
              </button>
            </div>
          </>
        )}
      </aside>
    </>
  );
}

// All 27 governorates of Egypt. The en[] and ar[] arrays are index-aligned —
// the stored value is the English name, the label shows the current language.
const GOVERNORATES = {
  en: ["Cairo", "Giza", "Alexandria", "Dakahlia", "Red Sea", "Beheira", "Fayoum", "Gharbia", "Ismailia", "Menofia", "Minya", "Qalyubia", "New Valley", "Suez", "Aswan", "Assiut", "Beni Suef", "Port Said", "Damietta", "Sharqia", "South Sinai", "Kafr El Sheikh", "Matrouh", "Luxor", "Qena", "North Sinai", "Sohag"],
  ar: ["القاهرة", "الجيزة", "الإسكندرية", "الدقهلية", "البحر الأحمر", "البحيرة", "الفيوم", "الغربية", "الإسماعيلية", "المنوفية", "المنيا", "القليوبية", "الوادي الجديد", "السويس", "أسوان", "أسيوط", "بني سويف", "بورسعيد", "دمياط", "الشرقية", "جنوب سيناء", "كفر الشيخ", "مطروح", "الأقصر", "قنا", "شمال سيناء", "سوهاج"],
};

function Field({ label, req, error, hint, children }) {
  return (
    <div className="field">
      <label className="field__label">{label}{req && <span className="req">*</span>}</label>
      {children}
      {error ? <span className="field__error">{error}</span> : hint ? <span className="field__hint">{hint}</span> : null}
    </div>
  );
}

function OrderSummaryCard({ items, lang, t }) {
  const { fmtMoney, CatMedallion } = window;
  const totals = computeTotals(items);
  return (
    <aside className="ordercard">
      <h4>{t.orderSummary}</h4>
      <div className="ordercard__items">
        {items.map((it) => (
          <div className="ocitem" key={it.product.id}>
            <div className="ocitem__media"><CatMedallion catId={it.product.cat} size={22} /><span className="ocitem__qty num-tabular">{it.qty}</span></div>
            <div className="ocitem__name">{it.product.name[lang]}</div>
            <div className="ocitem__price num-tabular">{fmtMoney(it.product.price * it.qty, lang)}</div>
          </div>
        ))}
      </div>
      <div className="summary">
        <div className="summary__row"><span>{t.subtotal}</span><span className="num-tabular">{fmtMoney(totals.subtotal, lang)}</span></div>
        <div className="summary__row summary__row--total"><span>{t.total}</span><span className="num-tabular">{fmtMoney(totals.total, lang)}</span></div>
      </div>
    </aside>
  );
}

function Checkout({ items, lang, t, onBack, onPlaced }) {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({ business: "", name: "", email: "", phone: "", address: "", city: "", gov: "", notes: "" });
  const [errors, setErrors] = React.useState({});
  const [placing, setPlacing] = React.useState(false);
  const [submitErr, setSubmitErr] = React.useState("");
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const steps = [t.contactInfo, t.shippingInfo, t.review];

  function validateStep(s) {
    const e = {};
    if (s === 0) {
      if (!form.business.trim()) e.business = t.required;
      if (!form.name.trim()) e.name = t.required;
      if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = lang === "en" ? "Enter a valid email" : "أدخل بريداً صحيحاً";
      if (!/[0-9]{7,}/.test(form.phone.replace(/\D/g, ""))) e.phone = lang === "en" ? "Enter a valid phone" : "أدخل رقماً صحيحاً";
    }
    if (s === 1) {
      if (!form.address.trim()) e.address = t.required;
      if (!form.city.trim()) e.city = t.required;
      if (!form.gov) e.gov = t.required;
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  async function next() {
    if (!validateStep(step)) return;
    if (step < 2) { setStep(step + 1); return; }
    setSubmitErr("");
    setPlacing(true);
    try {
      const order = await window.api.createOrder({
        items: items.map((it) => ({ productId: it.product.id, qty: it.qty })),
        contact: { business: form.business, name: form.name, email: form.email, phone: form.phone },
        delivery: { address: form.address, city: form.city, governorate: form.gov },
        notes: form.notes || "",
      });
      onPlaced(order.id);
    } catch (e) {
      setSubmitErr(e.message || (lang === "en" ? "Could not place the order. Is the backend running?" : "تعذّر إتمام الطلب. تأكد من تشغيل الخادم."));
      setPlacing(false);
    }
  }

  return (
    <main>
      <div className="container">
        <nav className="crumbs">
          <button onClick={onBack}>{t.cartTitle}</button>
          <CIcon name="chevron-right" size={15} className="flip-x" />
          <span style={{ color: "var(--fg1)" }}>{t.checkout}</span>
        </nav>
        <div className="checkout">
          <div>
            <div className="steps">
              {steps.map((s, i) => (
                <React.Fragment key={s}>
                  {i > 0 && <div className={"step__bar" + (i <= step ? " is-done-bar" : "")} style={{ background: i <= step ? "var(--success)" : "var(--border)" }} />}
                  <div className={"step" + (i === step ? " is-active" : i < step ? " is-done" : "")}>
                    <span className="step__num">{i < step ? <CIcon name="check" size={16} /> : i + 1}</span>
                    <span className="step__label">{s}</span>
                  </div>
                </React.Fragment>
              ))}
            </div>

            {step === 0 && (
              <div className="panel">
                <h3>{t.contactInfo}</h3>
                <div className="panel__sub">{lang === "en" ? "Who should we contact about this order?" : "بمن نتواصل بخصوص هذا الطلب؟"}</div>
                <div className="formgrid">
                  <Field label={t.businessName} req error={errors.business}><input className={"input" + (errors.business ? " is-error" : "")} value={form.business} onChange={set("business")} placeholder={lang === "en" ? "MegaMart Stores" : "متاجر ميجامارت"} /></Field>
                  <Field label={t.fullName} req error={errors.name}><input className={"input" + (errors.name ? " is-error" : "")} value={form.name} onChange={set("name")} /></Field>
                  <Field label={t.email} req error={errors.email}><input className={"input" + (errors.email ? " is-error" : "")} value={form.email} onChange={set("email")} placeholder="you@business.com" /></Field>
                  <Field label={t.phone} req error={errors.phone}><input className={"input" + (errors.phone ? " is-error" : "")} value={form.phone} onChange={set("phone")} placeholder="+20 10 0000 0000" /></Field>
                </div>
              </div>
            )}

            {step === 1 && (
              <div className="panel">
                <h3>{t.shippingInfo}</h3>
                <div className="panel__sub">{lang === "en" ? "Where should we deliver and install?" : "أين نوصّل ونركّب؟"}</div>
                <div className="formgrid">
                  <Field label={t.address} req error={errors.address}><input className={"input" + (errors.address ? " is-error" : "")} value={form.address} onChange={set("address")} /></Field>
                  <Field label={t.city} req error={errors.city}><input className={"input" + (errors.city ? " is-error" : "")} value={form.city} onChange={set("city")} /></Field>
                  <Field label={t.governorate} req error={errors.gov}>
                    <div className="selectfield-wrap">
                      <select className="selectfield" value={form.gov} onChange={set("gov")}>
                        <option value="">{lang === "en" ? "Select…" : "اختر…"}</option>
                        {GOVERNORATES[lang].map((g, i) => <option key={i} value={GOVERNORATES.en[i]}>{g}</option>)}
                      </select>
                      <span className="caret"><CIcon name="chevron-down" size={16} /></span>
                    </div>
                  </Field>
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="panel">
                <h3>{t.review}</h3>
                <div className="panel__sub">{lang === "en" ? "Review your details. No payment is taken online." : "راجع بياناتك. لا يتم الدفع عبر الإنترنت."}</div>

                <div className="confirmnote">
                  <span className="confirmnote__ic"><CIcon name="headset" size={22} /></span>
                  <div>
                    <div className="confirmnote__t">{lang === "en" ? "We'll confirm your order on WhatsApp" : "سنؤكد طلبك عبر واتساب"}</div>
                    <div className="confirmnote__s">{lang === "en" ? "A MegaTech specialist contacts you on the phone number below to confirm items, total, and arrange delivery, installation, and payment." : "سيتواصل معك مختص من ميجاتك على رقم الهاتف أدناه لتأكيد المنتجات والإجمالي وترتيب التوصيل والتركيب والدفع."}</div>
                  </div>
                </div>

                <div className="reviewgrid">
                  <div className="reviewblock">
                    <div className="reviewblock__head">
                      <span className="reviewblock__label">{t.contactInfo}</span>
                      <button className="linkbtn" style={{ color: "var(--brand-primary)" }} onClick={() => setStep(0)}><CIcon name="edit" size={14} />{lang === "en" ? "Edit" : "تعديل"}</button>
                    </div>
                    <div className="reviewblock__body">
                      <div>{form.business}</div>
                      <div>{form.name}</div>
                      <div className="num-tabular">{form.phone}</div>
                      <div style={{ color: "var(--fg3)" }}>{form.email}</div>
                    </div>
                  </div>
                  <div className="reviewblock">
                    <div className="reviewblock__head">
                      <span className="reviewblock__label">{t.shippingInfo}</span>
                      <button className="linkbtn" style={{ color: "var(--brand-primary)" }} onClick={() => setStep(1)}><CIcon name="edit" size={14} />{lang === "en" ? "Edit" : "تعديل"}</button>
                    </div>
                    <div className="reviewblock__body">
                      <div>{form.address}</div>
                      <div>{form.city}{form.gov ? "، " + form.gov : ""}</div>
                    </div>
                  </div>
                </div>

                <div style={{ marginTop: 18 }}>
                  <Field label={t.orderNotes} hint={lang === "en" ? "Optional — anything we should know before we call." : "اختياري — أي شيء يجب أن نعرفه قبل الاتصال."}>
                    <textarea className="textarea" value={form.notes} onChange={set("notes")} rows={3} placeholder={lang === "en" ? "e.g. Preferred call time, branch details…" : "مثال: وقت الاتصال المفضل، تفاصيل الفرع…"} />
                  </Field>
                </div>
              </div>
            )}

            {submitErr && (
              <div className="authalert" style={{ marginTop: 18 }}>
                <CIcon name="info" size={18} />{submitErr}
              </div>
            )}

            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 24, gap: 12 }}>
              <button className="btn btn--secondary" onClick={() => step === 0 ? onBack() : setStep(step - 1)} disabled={placing}>
                <CIcon name="arrow-left" size={18} className="flip-x" />{t.back}
              </button>
              <button className="btn btn--primary btn--lg" onClick={next} disabled={placing}>
                {step === 2 ? <><CIcon name="check" size={18} />{placing ? (lang === "en" ? "Placing…" : "جارٍ الإرسال…") : t.placeOrder}</> : <>{t.continueLabel}<CIcon name="arrow-right" size={18} className="flip-x" /></>}
              </button>
            </div>
          </div>
          <OrderSummaryCard items={items} lang={lang} t={t} />
        </div>
      </div>
    </main>
  );
}

// "My orders" page — a signed-in customer's own order history (GET /api/orders
// returns just the current user's orders when they're not an admin).
function MyOrdersPage({ lang, t, onBack, onBrowse }) {
  const { fmtMoney, Badge } = window;
  const [orders, setOrders] = React.useState(null);
  const [err, setErr] = React.useState(null);

  React.useEffect(() => {
    let alive = true;
    window.api.listOrders()
      .then((list) => { if (alive) setOrders(Array.isArray(list) ? list : []); })
      .catch((e) => { if (alive) setErr(e.message); });
    return () => { alive = false; };
  }, []);

  const fmtDate = (s) => { try { return new Date(s).toLocaleString(lang === "ar" ? "ar-EG" : "en-GB"); } catch (e) { return s; } };

  return (
    <main>
      <div className="container" style={{ padding: "32px 0 64px", maxWidth: 820 }}>
        <button className="linkbtn" onClick={onBack} style={{ marginBottom: 16 }}>
          <CIcon name="arrow-left" size={16} className="flip-x" />{t.backToStore}
        </button>
        <h2 style={{ marginBottom: 24 }}>{t.myOrders}</h2>

        {err ? (
          <div className="panel"><div className="panel__sub" style={{ color: "var(--danger-fg, #c00)" }}>{err}</div></div>
        ) : !orders ? (
          <div className="panel"><div className="panel__sub">{lang === "en" ? "Loading…" : "جارٍ التحميل…"}</div></div>
        ) : orders.length === 0 ? (
          <div className="emptycart">
            <div className="ic"><CIcon name="package" size={32} /></div>
            <h4>{lang === "en" ? "No orders yet" : "لا توجد طلبات بعد"}</h4>
            <p>{lang === "en" ? "When you place an order it will show up here." : "ستظهر طلباتك هنا بعد إتمامها."}</p>
            <button className="btn btn--primary" onClick={onBrowse}>{t.startShopping}</button>
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {orders.map((o) => (
              <div key={o.id} style={{ border: "1px solid var(--border)", borderRadius: "var(--r-xl)", background: "var(--bg-raised)", padding: 20 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap", marginBottom: 14 }}>
                  <span style={{ fontWeight: 700 }}>{o.id}</span>
                  <span style={{ color: "var(--fg3)", fontSize: "var(--text-sm)" }}>{fmtDate(o.createdAt)}</span>
                  <span style={{ marginInlineStart: "auto" }}><Badge badge={{ en: o.status, ar: o.status, tone: "success" }} lang={lang} /></span>
                </div>
                <div>
                  {(o.items || []).map((it, i) => (
                    <div key={i} style={{ display: "flex", justifyContent: "space-between", gap: 12, padding: "4px 0", color: "var(--fg2)" }}>
                      <span>{(it.name && it.name[lang]) || it.sku} × {it.qty}</span>
                      <span className="num-tabular">{fmtMoney(it.unitPrice * it.qty, lang)}</span>
                    </div>
                  ))}
                </div>
                {(o.delivery && (o.delivery.address || o.delivery.governorate)) && (
                  <div style={{ color: "var(--fg3)", fontSize: "var(--text-sm)", marginTop: 10 }}>
                    {[o.delivery.address, o.delivery.city, o.delivery.governorate].filter(Boolean).join("، ")}
                  </div>
                )}
                <div style={{ display: "flex", justifyContent: "space-between", borderTop: "1px solid var(--border)", marginTop: 12, paddingTop: 12, fontWeight: 700 }}>
                  <span>{t.total}</span>
                  <span className="num-tabular">{fmtMoney(o.total, lang)}</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </main>
  );
}

function OrderSuccess({ orderNo, lang, t, onBack }) {
  return (
    <main>
      <div className="container">
        <div className="success">
          <div className="success__ic"><CIcon name="check" size={44} /></div>
          <h2>{t.orderPlaced}</h2>
          <p>{t.orderPlacedSub}</p>
          <div className="success__order">
            <span className="caption">{t.orderNumber}</span>
            <span className="num-tabular">{orderNo}</span>
          </div>
          <div>
            <button className="btn btn--primary btn--lg" onClick={onBack}>
              <CIcon name="arrow-left" size={18} className="flip-x" />{t.backToStore}
            </button>
          </div>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { CartDrawer, Checkout, OrderSuccess, MyOrdersPage, computeTotals, Field, OrderSummaryCard });