// 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);
  const vat = Math.round(subtotal * 0.14);
  const shipping = subtotal > 5000 || subtotal === 0 ? 0 : 350;
  return { subtotal, vat, shipping, total: subtotal + vat + shipping };
}

function CartLine({ it, lang, t, onQty, onRemove }) {
  const { fmtMoney, CatMedallion } = window;
  return (
    <div className="lineitem">
      <div className="lineitem__media"><CatMedallion catId={it.product.cat} size={30} /></div>
      <div className="lineitem__main">
        <div className="lineitem__name">{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 }) {
  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} />)}
            </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"><span>{t.vat}</span><span className="num-tabular">{fmtMoney(totals.vat, lang)}</span></div>
                <div className="summary__row"><span>{t.shipping}</span><span className="num-tabular">{totals.shipping === 0 ? t.free : fmtMoney(totals.shipping, 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>
    </>
  );
}

const GOVERNORATES = { en: ["Cairo", "Giza", "Alexandria", "Dakahlia", "Sharqia", "Qalyubia", "Port Said", "Suez", "Other"], 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"><span>{t.vat}</span><span className="num-tabular">{fmtMoney(totals.vat, lang)}</span></div>
        <div className="summary__row"><span>{t.shipping}</span><span className="num-tabular">{totals.shipping === 0 ? t.free : fmtMoney(totals.shipping, 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>
  );
}

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, computeTotals, Field, OrderSummaryCard });