const PagePaymentSuccess = ({ setPage }) => {
  const { useState, useEffect, useContext } = React;
  const auth = useContext(window.AuthContext || React.createContext({ user: null, ready: true }));
  const langCtx = useContext(window.LangContext || React.createContext({ lang:"nl", t: (nl)=>nl }));
  const t = langCtx.t || ((nl) => nl);
  const lang = langCtx.lang || "nl";
  const LP = window.LP || ((o, f) => o && o[f]);

  const readOrderId = () => {
    const hash = window.location.hash || "";
    const hashQuery = hash.indexOf("?") >= 0 ? hash.slice(hash.indexOf("?") + 1) : "";
    const fromHash = new URLSearchParams(hashQuery).get("order_id");
    const fromSearch = new URLSearchParams(window.location.search || "").get("order_id");
    return fromHash || fromSearch || "";
  };

  const orderId = readOrderId();
  const [order, setOrder] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [polls, setPolls] = useState(0);
  const [invoiceBusy, setInvoiceBusy] = useState(false);
  const [invoiceErr, setInvoiceErr] = useState(null);

  const load = React.useCallback(async () => {
    if (!orderId) {
      setError(t("Ordernummer ontbreekt in de URL.","Order number is missing from the URL."));
      setLoading(false);
      return null;
    }
    if (!/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(orderId)) {
      setError(t("Order niet gevonden of geen toegang.","Order not found or no access."));
      setLoading(false);
      return null;
    }
    if (!window.zsb || !window.zsb.isConfigured) {
      setError(t("Supabase is nog niet geconfigureerd.","Supabase is not configured yet."));
      setLoading(false);
      return null;
    }
    const r = await window.zsb.getOrder(orderId);
    if (r.error) {
      setError(r.error);
      setLoading(false);
      return null;
    }
    setOrder(r.data || null);
    setLoading(false);
    return r.data || null;
  }, [orderId, lang]);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    load().then(() => { if (cancelled) return; });
    return () => { cancelled = true; };
  }, [load]);

  const rawStatus = (order && (order.payment_status || order.status)) || "pending_payment";
  // Cash-on-pickup orders never start a Mollie payment, so they must NOT be
  // treated as "verifying" and must NOT be polled. While payment_status is
  // "pending_cash" we show a distinct "order received" state; once the admin
  // confirms cash receipt the status becomes "paid" and the normal paid view
  // is used.
  const isCash = !!(order && order.payment_method === "cash");
  const isPaid = rawStatus === "paid" || (order && order.status === "paid");
  const isCashPending = isCash && !isPaid;
  const isFailed = !isCash && ["canceled", "failed", "expired"].includes(rawStatus);
  const isPending = !isCash && !isPaid && !isFailed;

  useEffect(() => {
    if (!order || !isPending || polls >= 10) return;
    const timer = setTimeout(async () => {
      await load();
      setPolls(p => p + 1);
    }, 3000);
    return () => clearTimeout(timer);
  }, [order && order.id, rawStatus, polls, isPending, load]);

  const products = order && Array.isArray(order.products) ? order.products : [];
  const total = Number(order && order.total) || 0;
  const vatAmt = Number(order && order.vat_amount) || (window.vatPortion ? window.vatPortion(total) : total * 21 / 121);
  const shippingFee = Number(order && order.shipping_fee) || 0;
  const locale = lang === "en" ? "en-GB" : "nl-NL";
  const paidAt = order && order.paid_at ? new Date(order.paid_at).toLocaleString(locale, { dateStyle:"medium", timeStyle:"short" }) : null;
  const paymentLabel = window.zsb && window.zsb.paymentStatusLabel
    ? window.zsb.paymentStatusLabel(rawStatus, lang)
    : rawStatus;

  // Completed ("afgerond") orders show an invoice-centric view instead of the
  // "payment successful" confirmation. Checked BEFORE isPaid (an afgerond order
  // is still payment_status=paid).
  const isAfgerond = !!(order && order.status === "afgerond");
  const cashReceivedAtNl = (() => {
    const iso = order && order.cash_received_at;
    if (!iso) return null;
    const d = new Date(iso);
    if (isNaN(d.getTime())) return null;
    return d.toLocaleDateString(locale, { day:"numeric", month:"long", year:"numeric" })
      + ", " + d.toLocaleTimeString(locale, { hour:"2-digit", minute:"2-digit" });
  })();
  const handleInvoice = async () => {
    setInvoiceBusy(true); setInvoiceErr(null);
    const r = await window.zsb.downloadCustomerInvoice(order.id);
    setInvoiceBusy(false);
    if (r && r.error) setInvoiceErr(r.error);
  };

  const title = isAfgerond
    ? t("Bestelling afgerond","Order completed")
    : isCashPending
      ? t("Bestelling ontvangen","Order received")
      : isPaid
        ? t("Betaling gelukt","Payment successful")
        : isFailed
          ? t("Betaling niet afgerond","Payment not completed")
          : t("Betaling wordt gecontroleerd...","Payment is being verified...");

  return (
    <div className="page">
      <section className="section-sm" style={{borderBottom:"1px solid var(--line)", background:"var(--paper)"}}>
        <div className="wrap-narrow" style={{textAlign:"center"}}>
          <div style={{
            width:76, height:76, borderRadius:50, margin:"0 auto 18px",
            display:"grid", placeItems:"center",
            background:isFailed ? "rgba(220,38,38,.10)" : "var(--accent-soft)",
            color:isFailed ? "var(--bad)" : "var(--accent)",
          }}>
            <Icon name={isFailed ? "x" : "check"} size={34}/>
          </div>
          <h1 className="h-display" style={{fontSize:"clamp(34px,5vw,56px)", marginBottom:12}}>{title}</h1>
          <p style={{color:"var(--ink-dim)", maxWidth:560, margin:"0 auto"}}>
            {isAfgerond
              ? t("Je bestelling is afgerond. Je factuur is verzonden.","Your order is completed. Your invoice has been sent.")
              : isCashPending
                ? t("Je bestelling is ontvangen. Je betaalt contant bij het ophalen in onze showroom. Je ontvangt een aparte e-mail zodra je bestelling klaarstaat om opgehaald te worden.","Your order has been received. You'll pay cash on pickup at our showroom. You'll get a separate email as soon as your order is ready for pickup.")
                : isPaid
                  ? t("Je betaling is bevestigd. Hieronder vind je je koopbevestiging.","Your payment has been confirmed. Your order confirmation is below.")
                  : isFailed
                    ? t("De betaling is geannuleerd, verlopen of mislukt. Je kunt opnieuw proberen of ons via WhatsApp bereiken.","The payment was canceled, expired or failed. You can try again or contact us via WhatsApp.")
                    : t("We wachten nog op de bevestiging van Mollie. Dit kan enkele seconden duren.","We are waiting for confirmation from Mollie. This can take a few seconds.")}
          </p>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap" style={{display:"grid", gridTemplateColumns:"1.3fr .8fr", gap:24}} className="co-grid">
          <div className="card" style={{padding:28}}>
            {loading ? (
              <div style={{color:"var(--ink-dim)"}}>{t("Order laden...","Loading order...")}</div>
            ) : error ? (
              <div style={{color:"var(--bad)"}}>{error}</div>
            ) : !order ? (
              <div style={{color:"var(--ink-dim)"}}>{t("Order niet gevonden of geen toegang.","Order not found or no access.")}</div>
            ) : (
              <>
                <div className="mono" style={{fontSize:11, color:"var(--ink-mute)", letterSpacing:".1em", textTransform:"uppercase", marginBottom:8}}>
                  {t("Ordernummer","Order number")} · {order.id.slice(0,8).toUpperCase()}
                </div>
                <h2 className="h-display" style={{fontSize:24, marginBottom:18}}>{t("Koopbevestiging","Order confirmation")}</h2>

                <div style={{display:"grid", gridTemplateColumns:"repeat(2, minmax(0,1fr))", gap:14, marginBottom:18}}>
                  <InfoBox label={t("Betaalstatus","Payment status")} value={paymentLabel}/>
                  <InfoBox label={t("Bevestigingsnummer","Confirmation number")} value={order.confirmation_number || "—"}/>
                  <InfoBox label={isCash ? t("Betaalmethode","Payment method") : t("Betaaldatum","Paid date")} value={isCash ? t("Contant bij ophalen","Cash on pickup") : (paidAt || "—")}/>
                  <InfoBox label={t("Levering","Delivery")} value={order.fulfillment_method === "ophalen" ? t("Ophalen","Pickup") : t("Bezorgen","Delivery")}/>
                </div>

                {isCash && isPaid && (
                  <div style={{display:"grid", gridTemplateColumns:"repeat(2, minmax(0,1fr))", gap:14, marginBottom:18}}>
                    {order.cash_amount_received != null && <InfoBox label={t("Contant ontvangen","Cash received")} value={formatEUR(Number(order.cash_amount_received)||0)}/>}
                    {order.cash_change_given != null && <InfoBox label={t("Wisselgeld gegeven","Change given")} value={formatEUR(Number(order.cash_change_given)||0)}/>}
                    {cashReceivedAtNl && <InfoBox label={t("Contant ontvangen op","Cash received at")} value={cashReceivedAtNl}/>}
                  </div>
                )}

                {isCashPending && (
                  <div style={{padding:"12px 14px", borderRadius:8, background:"#fff8e6", border:"1px solid #f0d985", color:"#7a5a14", fontSize:13.5, marginBottom:18, lineHeight:1.55}}>
                    {t(
                      "Je betaalt het totaalbedrag contant bij het ophalen. Kom pas langs nadat je de e-mail “Je bestelling staat klaar voor ophalen” hebt ontvangen. Neem het contante bedrag en je bestelnummer mee.",
                      "You'll pay the total amount in cash on pickup. Please only come by after you've received the “Your order is ready for pickup” email. Bring the cash amount and your order number."
                    )}
                  </div>
                )}

                <div style={{borderTop:"1px solid var(--line)", paddingTop:16, marginTop:16}}>
                  <div className="mono" style={{fontSize:10.5, color:"var(--ink-mute)", letterSpacing:".1em", textTransform:"uppercase", marginBottom:10}}>{t("Producten","Products")}</div>
                  <div style={{display:"flex", flexDirection:"column", gap:8}}>
                    {products.map((p, i) => {
                      const item = window.ALL_ITEMS && window.ALL_ITEMS[p.id];
                      const name = item ? (LP(item,"name",lang) || LP(item,"short",lang) || p.name) : p.name;
                      return (
                        <div key={i} style={{display:"flex", justifyContent:"space-between", gap:12}}>
                          <span>{p.qty}× {name}</span>
                          <span className="mono">{formatEUR((Number(p.price)||0) * (Number(p.qty)||1))}</span>
                        </div>
                      );
                    })}
                    {Number(order.assembly_fee) > 0 && (
                      <div style={{display:"flex", justifyContent:"space-between", gap:12}}>
                        <span>{t("Montage door Zyro","Assembly by Zyro")}</span>
                        <span className="mono">{formatEUR(Number(order.assembly_fee))}</span>
                      </div>
                    )}
                    <div style={{display:"flex", justifyContent:"space-between", gap:12}}>
                      <span>{order.fulfillment_method === "ophalen" ? t("Gratis ophalen","Free pickup") : t("Verzendkosten","Shipping costs")}</span>
                      <span className="mono">{shippingFee === 0 ? t("Gratis","Free") : formatEUR(shippingFee)}</span>
                    </div>
                  </div>
                </div>

                <div style={{borderTop:"1px solid var(--line)", paddingTop:16, marginTop:16}}>
                  <div style={{display:"flex", justifyContent:"space-between", fontWeight:700, fontSize:18}}>
                    <span>{t("Totaal","Total")}</span>
                    <span>{formatEUR(total)}</span>
                  </div>
                  <div style={{display:"flex", justifyContent:"space-between", color:"var(--ink-mute)", fontSize:12.5, marginTop:6}}>
                    <span>{window.vatRowLabel ? window.vatRowLabel(lang) : t("Waarvan BTW (21%)","VAT included (21%)")}</span>
                    <span>{formatEUR(vatAmt)}</span>
                  </div>
                </div>
              </>
            )}
          </div>

          <div className="card" style={{padding:24, height:"fit-content"}}>
            <h3 className="h-display" style={{fontSize:18, marginBottom:12}}>
              {order && order.fulfillment_method === "ophalen" ? t("Afhandeling","Handling") : t("Bezorgadres","Delivery address")}
            </h3>
            {order && order.fulfillment_method === "ophalen" ? (
              <p style={{color:"var(--ink-dim)", lineHeight:1.6}}>
                <strong style={{color:"var(--ink)"}}>{t("Ophalen","Pickup")}</strong><br/>
                {t("Ophalen in showroom","Pickup at showroom")}
              </p>
            ) : order ? (() => {
              // Delivery: ONLY use customer-supplied delivery_* fields.
              // NEVER fall back to the showroom/company address.
              const hasAddr = order.delivery_street && order.delivery_postcode && order.delivery_city;
              return (
                <p style={{color:"var(--ink-dim)", lineHeight:1.6}}>
                  <strong style={{color:"var(--ink)"}}>{t("Bezorgen","Delivery")}</strong><br/>
                  {hasAddr ? (
                    <>
                      {order.delivery_name ? <>{order.delivery_name}<br/></> : null}
                      {order.delivery_formatted_address || (
                        <>
                          {order.delivery_street}<br/>
                          {order.delivery_postcode} {order.delivery_city}
                          {order.delivery_country ? <>, {order.delivery_country}</> : (order.shipping_country ? <>, {order.shipping_country}</> : null)}
                        </>
                      )}
                      <br/>
                      <span style={{fontSize:12, color:"var(--ink-mute)", marginTop:6, display:"inline-block"}}>
                        {t("Je krijgt een aparte e-mail zodra je bestelling onderweg is.","You'll get a separate email as soon as your order is on the way.")}
                      </span>
                    </>
                  ) : (
                    <span style={{color:"var(--bad)"}}>
                      {t("Bezorgadres ontbreekt — neem contact op met info@zyro-electric.nl",
                         "Delivery address is missing — please contact info@zyro-electric.nl")}
                    </span>
                  )}
                </p>
              );
            })() : null}

            <div className="gap-8" style={{marginTop:20, flexDirection:"column", alignItems:"stretch"}}>
              {isAfgerond && (
                <button className="btn btn-primary btn-block" onClick={handleInvoice} disabled={invoiceBusy}>
                  {invoiceBusy ? t("Laden…","Loading…") : t("Bekijk factuur","View invoice")}
                </button>
              )}
              {isAfgerond && invoiceErr && <div style={{color:"var(--bad)", fontSize:12.5}}>{invoiceErr}</div>}
              <button className={isAfgerond ? "btn btn-ghost btn-block" : "btn btn-primary btn-block"} onClick={()=>setPage(auth && auth.user ? "account" : "login")}>
                {t("Naar mijn account","Go to my account")}
              </button>
              {isFailed && (
                <button className="btn btn-accent btn-block" onClick={()=>setPage("checkout")}>
                  {t("Opnieuw proberen","Try again")}
                </button>
              )}
              <a className="btn btn-whats btn-block" href={getWhatsAppHref(t("Ik heb een vraag over mijn bestelling","I have a question about my order"))} target="_blank" rel="noopener">
                <Icon name="whatsapp" size={15} fill="#06281a"/> WhatsApp
              </a>
            </div>
          </div>
          <style>{`@media (max-width:900px){.co-grid{grid-template-columns:1fr !important}}`}</style>
        </div>
      </section>
    </div>
  );
};

const InfoBox = ({ label, value }) => (
  <div style={{padding:14, border:"1px solid var(--line)", borderRadius:8, background:"var(--bg)"}}>
    <div className="mono" style={{fontSize:10, color:"var(--ink-mute)", letterSpacing:".1em", textTransform:"uppercase", marginBottom:5}}>{label}</div>
    <div style={{fontWeight:600, fontSize:13.5}}>{value}</div>
  </div>
);

window.PagePaymentSuccess = PagePaymentSuccess;