// checkout.jsx — DropX checkout: auth, criação de pedido, cupom, Pix QR / Mercado Pago

const { useState: useCkState, useMemo: useCkMemo, useEffect: useCkEffect, useRef: useCkRef } = React;

// ── Helpers ──────────────────────────────────────────────────────────────────
const ckFmt = (cents) => "R$ " + (cents / 100).toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 });

function maskPhone(v) {
  const d = (v || "").replace(/\D/g, "").slice(0, 11);
  if (d.length <= 2) return d;
  if (d.length <= 7) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
  return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
}
function maskCEP(v) {
  const d = (v || "").replace(/\D/g, "").slice(0, 8);
  if (d.length <= 5) return d;
  return `${d.slice(0, 5)}-${d.slice(5)}`;
}

// ── Field primitive ──────────────────────────────────────────────────────────
function Field({ label, error, children, hint, full }) {
  return (
    <label className={`ck-field${full ? " ck-field-full" : ""}${error ? " has-error" : ""}`}>
      <span className="ck-field-label">{label}</span>
      {children}
      {hint && !error && <span className="ck-field-hint">{hint}</span>}
      {error && <span className="ck-field-error">{error}</span>}
    </label>
  );
}

// ── Checkout Modal ───────────────────────────────────────────────────────────
function CheckoutModal() {
  const cart = useCart();
  const auth = useAuth();
  const open = cart && cart.checkoutOpen;

  // Form state — persiste entre reaberturas
  const [form, setForm] = useCkState(() => {
    try { return JSON.parse(localStorage.getItem("dropx_checkout") || "null") || {}; } catch { return {}; }
  });
  const [errors, setErrors] = useCkState({});
  const [submitted, setSubmitted] = useCkState(null);     // { order, payment }
  const [submitting, setSubmitting] = useCkState(false);
  const [loadingCEP, setLoadingCEP] = useCkState(false);
  const [authMode, setAuthMode] = useCkState("register"); // register | login
  const [authError, setAuthError] = useCkState("");
  const [couponState, setCouponState] = useCkState({ code: "", applied: null, error: "", loading: false });

  // Pré-preencher com dados do usuário logado
  useCkEffect(() => {
    if (auth?.user && (!form.name || !form.email)) {
      setForm((f) => ({
        ...f,
        name: f.name || auth.user.name,
        email: f.email || auth.user.email,
        phone: f.phone || auth.user.phone || ""
      }));
    }
  }, [auth?.user]);

  useCkEffect(() => {
    try { localStorage.setItem("dropx_checkout", JSON.stringify(form)); } catch {}
  }, [form]);

  useCkEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  if (!cart || !open) return null;

  const set = (k, v) => { setForm((f) => ({ ...f, [k]: v })); setErrors((e) => ({ ...e, [k]: undefined })); };

  // ViaCEP autofill
  const onCEPBlur = async () => {
    const cep = (form.cep || "").replace(/\D/g, "");
    if (cep.length !== 8) return;
    try {
      setLoadingCEP(true);
      const r = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
      const j = await r.json();
      if (j && !j.erro) {
        setForm((f) => ({
          ...f,
          street: f.street || j.logradouro || "",
          district: f.district || j.bairro || "",
          city: f.city || j.localidade || "",
          state: f.state || j.uf || ""
        }));
      }
    } catch {} finally { setLoadingCEP(false); }
  };

  // Aplicar cupom (consulta a API)
  const applyCoupon = async () => {
    const code = (couponState.code || "").trim().toUpperCase();
    if (!code) { setCouponState((s) => ({ ...s, applied: null, error: "" })); return; }
    setCouponState((s) => ({ ...s, loading: true, error: "" }));
    try {
      const r = await window.dropxApi.coupons.validate(code, cart.subtotal_cents);
      setCouponState((s) => ({ ...s, applied: r, error: "", loading: false }));
    } catch (e) {
      setCouponState((s) => ({ ...s, applied: null, error: e.message, loading: false }));
    }
  };
  const removeCoupon = () => setCouponState({ code: "", applied: null, error: "", loading: false });

  const discount_cents = couponState.applied ? couponState.applied.discount_cents : 0;
  const total_cents = Math.max(0, cart.subtotal_cents - discount_cents);

  // Validação
  const validate = () => {
    const e = {};
    if (!auth?.user) {
      if (!form.email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = "E-mail obrigatório.";
      if (!form.password || form.password.length < 6) e.password = "Mínimo 6 caracteres.";
    } else {
      if (form.email && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = "E-mail inválido.";
    }
    if (!form.name || form.name.trim().length < 3) e.name = "Informe seu nome completo.";
    const phoneDigits = (form.phone || "").replace(/\D/g, "");
    if (phoneDigits.length < 10) e.phone = "WhatsApp inválido. Inclua DDD.";
    const cepDigits = (form.cep || "").replace(/\D/g, "");
    if (cepDigits.length !== 8) e.cep = "CEP precisa ter 8 dígitos.";
    if (!form.street) e.street = "Informe o endereço.";
    if (!form.number) e.number = "Número.";
    if (!form.district) e.district = "Bairro.";
    if (!form.city) e.city = "Cidade.";
    if (!form.state || form.state.length !== 2) e.state = "UF (2 letras).";
    if (!form.payment_method) e.payment_method = "Escolha a forma de pagamento.";
    // valida que carrinho tem variant_id (vindo da API). Sem isso o backend rejeita.
    if (cart.items.some(it => !it.variant_id)) {
      e._cart = "Catálogo está em modo offline. Recarregue a página para sincronizar com o estoque antes de finalizar.";
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = async (ev) => {
    ev.preventDefault();
    if (cart.items.length === 0) return;
    if (!validate()) {
      const first = document.querySelector(".ck-field.has-error input, .ck-field.has-error select, .ck-field.has-error textarea");
      if (first) first.focus();
      return;
    }
    setSubmitting(true);
    setAuthError("");
    try {
      // 1) Garante autenticação
      if (!auth?.user) {
        try {
          if (authMode === "login") {
            await auth.login(form.email, form.password);
          } else {
            await auth.register({
              email: form.email,
              password: form.password,
              name: form.name,
              phone: form.phone.replace(/\D/g, "")
            });
          }
        } catch (e) {
          // Se cadastro falhou por e-mail duplicado, tenta login automaticamente
          if (authMode === "register" && e.status === 409) {
            try { await auth.login(form.email, form.password); }
            catch { setAuthError("E-mail já cadastrado. Use sua senha ou troque para 'Já tenho conta'."); setSubmitting(false); return; }
          } else {
            setAuthError(e.message || "Falha na autenticação.");
            setSubmitting(false);
            return;
          }
        }
      }

      // 2) Sincroniza carrinho com o servidor (re-cria do zero p/ refletir o local)
      try { await window.dropxApi.cart.clear(); } catch {}
      for (const it of cart.items) {
        await window.dropxApi.cart.add(it.product_id, it.variant_id, it.qty);
      }

      // 3) Cria o pedido
      const address = {
        zip: form.cep,
        street: form.street,
        number: form.number,
        complement: form.complement || "",
        neighborhood: form.district,
        city: form.city,
        state: form.state.toUpperCase()
      };
      const { order } = await window.dropxApi.orders.create({
        shipping_address: address,
        coupon_code: couponState.applied ? couponState.applied.code : undefined,
        payment_method: form.payment_method,
        notes: (form.notes || "").trim() || undefined,
        shipping_cents: 0
      });

      // 4) Inicia pagamento (Pix QR ou link MP)
      let payment = null;
      try {
        payment = await window.dropxApi.payments.init(order.code);
      } catch (e) {
        console.warn("payment init falhou:", e.message);
      }

      cart.clear();
      setSubmitted({ order, payment });
    } catch (e) {
      console.error("checkout err:", e);
      setAuthError(e.message || "Erro inesperado. Tente novamente.");
    } finally {
      setSubmitting(false);
    }
  };

  const closeAndReset = () => {
    cart.setCheckoutOpen(false);
    if (submitted) setSubmitted(null);
  };

  return (
    <div className="ck-overlay" onClick={(ev) => { if (ev.target === ev.currentTarget) closeAndReset(); }}>
      <div className="ck-modal">
        <header className="ck-head">
          <div>
            <span className="ck-head-mono mono">CHECKOUT · DROP #01</span>
            <h2 className="display ck-head-title">{submitted ? "Pedido criado." : "Finalize seu pedido."}</h2>
          </div>
          <button type="button" className="cat-close" onClick={closeAndReset} aria-label="Fechar">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="6" y1="6" x2="18" y2="18" />
              <line x1="18" y1="6" x2="6" y2="18" />
            </svg>
          </button>
        </header>

        {submitted ? (
          <CheckoutSuccess data={submitted} onClose={closeAndReset} />
        ) : (
          <form className="ck-body" onSubmit={onSubmit} noValidate>
            <div className="ck-form">

              {/* ── Conta ── */}
              <section className="ck-section">
                <div className="ck-section-h">
                  <span className="mono">/01</span>
                  <h3>{auth?.user ? "Sua conta" : (authMode === "login" ? "Entrar" : "Criar conta")}</h3>
                  {!auth?.user && (
                    <button type="button" className="ck-opt" style={{ background: "none", border: 0, color: "var(--accent)", cursor: "pointer", marginLeft: "auto" }}
                      onClick={() => setAuthMode(m => m === "login" ? "register" : "login")}>
                      {authMode === "login" ? "Não tem conta? Criar" : "Já tenho conta"}
                    </button>
                  )}
                </div>
                {auth?.user ? (
                  <div className="mono" style={{ color: "var(--muted)", fontSize: 12 }}>
                    Logado como <strong style={{ color: "var(--fg)" }}>{auth.user.name}</strong> · {auth.user.email}
                    <button type="button" onClick={auth.logout} style={{ background: "none", border: 0, color: "var(--accent)", cursor: "pointer", marginLeft: 12 }}>sair</button>
                  </div>
                ) : (
                  <React.Fragment>
                    <div className="ck-row">
                      <Field label="E-mail" error={errors.email}>
                        <input type="email" autoComplete="email" value={form.email || ""} onChange={(e) => set("email", e.target.value)} placeholder="voce@email.com" />
                      </Field>
                      <Field label="Senha" error={errors.password} hint={authMode === "register" ? "Mínimo 6 caracteres" : ""}>
                        <input type="password" autoComplete={authMode === "register" ? "new-password" : "current-password"} value={form.password || ""} onChange={(e) => set("password", e.target.value)} />
                      </Field>
                    </div>
                    {authError && <div className="ck-field-error" style={{ marginTop: 6 }}>{authError}</div>}
                  </React.Fragment>
                )}
              </section>

              {/* ── Cliente ── */}
              <section className="ck-section">
                <div className="ck-section-h"><span className="mono">/02</span><h3>Seus dados</h3></div>
                <div className="ck-row">
                  <Field label="Nome completo" error={errors.name} full>
                    <input type="text" autoComplete="name" placeholder="Como aparece no documento"
                      value={form.name || ""} onChange={(e) => set("name", e.target.value)} />
                  </Field>
                </div>
                <div className="ck-row">
                  <Field label="WhatsApp" error={errors.phone} hint="Pra confirmação do pedido">
                    <input type="tel" autoComplete="tel-national" placeholder="(11) 99999-9999"
                      value={form.phone || ""} onChange={(e) => set("phone", maskPhone(e.target.value))} />
                  </Field>
                  {auth?.user && (
                    <Field label="E-mail">
                      <input type="email" disabled value={auth.user.email} />
                    </Field>
                  )}
                </div>
              </section>

              {/* ── Endereço ── */}
              <section className="ck-section">
                <div className="ck-section-h"><span className="mono">/03</span><h3>Endereço de entrega</h3></div>
                <div className="ck-row">
                  <Field label={`CEP${loadingCEP ? " · buscando..." : ""}`} error={errors.cep} hint="Preenche o resto automaticamente">
                    <input type="text" inputMode="numeric" autoComplete="postal-code" placeholder="00000-000"
                      value={form.cep || ""} onChange={(e) => set("cep", maskCEP(e.target.value))} onBlur={onCEPBlur} />
                  </Field>
                  <Field label="Estado (UF)" error={errors.state}>
                    <input type="text" maxLength={2} autoComplete="address-level1" placeholder="SP"
                      value={form.state || ""} onChange={(e) => set("state", e.target.value.toUpperCase().replace(/[^A-Z]/g, ""))} />
                  </Field>
                </div>
                <div className="ck-row">
                  <Field label="Endereço" error={errors.street} full>
                    <input type="text" autoComplete="address-line1" placeholder="Rua / Avenida"
                      value={form.street || ""} onChange={(e) => set("street", e.target.value)} />
                  </Field>
                </div>
                <div className="ck-row">
                  <Field label="Número" error={errors.number}>
                    <input type="text" autoComplete="address-line2" placeholder="123"
                      value={form.number || ""} onChange={(e) => set("number", e.target.value)} />
                  </Field>
                  <Field label="Complemento (opcional)">
                    <input type="text" placeholder="Apto, bloco, ref."
                      value={form.complement || ""} onChange={(e) => set("complement", e.target.value)} />
                  </Field>
                </div>
                <div className="ck-row">
                  <Field label="Bairro" error={errors.district}>
                    <input type="text" autoComplete="address-level3" placeholder="Bairro"
                      value={form.district || ""} onChange={(e) => set("district", e.target.value)} />
                  </Field>
                  <Field label="Cidade" error={errors.city}>
                    <input type="text" autoComplete="address-level2" placeholder="Cidade"
                      value={form.city || ""} onChange={(e) => set("city", e.target.value)} />
                  </Field>
                </div>
              </section>

              {/* ── Pagamento ── */}
              <section className="ck-section">
                <div className="ck-section-h"><span className="mono">/04</span><h3>Pagamento</h3></div>
                <div className="ck-pay">
                  {[
                    { v: "pix",  t: "PIX À VISTA", d: "QR Code gerado na hora pelo Mercado Pago.", recommended: true },
                    { v: "card", t: "CARTÃO",      d: "Crédito ou débito via Mercado Pago." }
                  ].map((p) => (
                    <label key={p.v} className={`ck-pay-opt${form.payment_method === p.v ? " active" : ""}`}>
                      <input type="radio" name="pay" value={p.v} checked={form.payment_method === p.v} onChange={() => set("payment_method", p.v)} />
                      <div className="ck-pay-body">
                        <div className="ck-pay-t">{p.t} {p.recommended && <span className="ck-pay-rec mono">RECOMENDADO</span>}</div>
                        <div className="ck-pay-d">{p.d}</div>
                      </div>
                    </label>
                  ))}
                </div>
                {errors.payment_method && <span className="ck-field-error" style={{ marginTop: 10, display: "block" }}>{errors.payment_method}</span>}
              </section>

              {/* ── Observações ── */}
              <section className="ck-section">
                <div className="ck-section-h"><span className="mono">/05</span><h3>Observações <span className="ck-opt">(opcional)</span></h3></div>
                <Field full hint="Tamanhos alternativos, preferência de envio, qualquer coisa.">
                  <textarea rows={3} placeholder="Algo que a gente precisa saber..."
                    value={form.notes || ""} onChange={(e) => set("notes", e.target.value)} />
                </Field>
              </section>
            </div>

            {/* ── Resumo ── */}
            <aside className="ck-summary">
              <div className="ck-summary-inner">
                <div className="ck-summary-h mono">RESUMO DO PEDIDO</div>
                <div className="ck-summary-meta mono">DROP #01 · {cart.count} {cart.count === 1 ? "ITEM" : "ITENS"}</div>
                <div className="ck-summary-list">
                  {cart.items.length === 0 && <div className="ck-summary-empty">Carrinho vazio. Volta e adiciona peças do drop.</div>}
                  {cart.items.map((it) => (
                    <div key={it.key} className="ck-summary-item">
                      <span className="ck-summary-qty">{it.qty}×</span>
                      <div className="ck-summary-mid">
                        <span className="display ck-summary-name">{it.name}</span>
                        {(it.color_name || it.size) && (
                          <span className="mono ck-summary-size">
                            {it.color_name && (
                              <React.Fragment>
                                <span className="ck-summary-dot" style={it.color_hex ? { background: it.color_hex } : undefined} />
                                {it.color_name.toUpperCase()}
                                {it.size ? " · " : ""}
                              </React.Fragment>
                            )}
                            {it.size && <React.Fragment>TAM {it.size}</React.Fragment>}
                          </span>
                        )}
                      </div>
                      <span className="mono ck-summary-price">{ckFmt(it.qty * it.price_cents)}</span>
                    </div>
                  ))}
                </div>

                {/* Cupom */}
                <div style={{ display: "flex", gap: 6, alignItems: "stretch", marginTop: 4 }}>
                  <input
                    type="text"
                    value={couponState.code}
                    placeholder="CUPOM"
                    onChange={(e) => setCouponState((s) => ({ ...s, code: e.target.value.toUpperCase(), error: "" }))}
                    style={{ flex: 1, background: "var(--bg)", color: "var(--fg)", border: "1px solid var(--line)", borderRadius: 4, padding: "10px 12px", fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.06em" }}
                  />
                  {couponState.applied
                    ? <button type="button" className="btn btn-ghost" style={{ padding: "10px 14px" }} onClick={removeCoupon}>×</button>
                    : <button type="button" className="btn" style={{ padding: "10px 14px", background: "var(--surface)", color: "var(--fg)" }} disabled={couponState.loading} onClick={applyCoupon}>{couponState.loading ? "..." : "OK"}</button>
                  }
                </div>
                {couponState.error && <div className="ck-field-error" style={{ marginTop: -4 }}>{couponState.error}</div>}
                {couponState.applied && <div className="ck-field-hint" style={{ color: "var(--accent)" }}>Cupom <strong>{couponState.applied.code}</strong> aplicado: −{ckFmt(couponState.applied.discount_cents)}</div>}

                <div className="ck-summary-totals">
                  <div className="ck-summary-row"><span className="mono">SUBTOTAL</span><span className="mono">{ckFmt(cart.subtotal_cents)}</span></div>
                  {discount_cents > 0 && <div className="ck-summary-row"><span className="mono">DESCONTO</span><span className="mono">−{ckFmt(discount_cents)}</span></div>}
                  <div className="ck-summary-row"><span className="mono">FRETE</span><span className="mono">A COMBINAR</span></div>
                  <div className="ck-summary-row ck-summary-total"><span>TOTAL</span><span>{ckFmt(total_cents)}</span></div>
                </div>

                {errors._cart && <div className="ck-field-error" style={{ marginTop: 8 }}>{errors._cart}</div>}

                <button type="submit" className="btn btn-primary ck-submit" disabled={cart.items.length === 0 || submitting}>
                  {submitting ? "PROCESSANDO..." : (form.payment_method === "card" ? "PAGAR COM CARTÃO →" : "GERAR PIX →")}
                </button>
                <div className="ck-trust mono">
                  ⓘ Pagamento processado via Mercado Pago.<br />
                  Acompanhe pelo código de rastreio enviado por e-mail.
                </div>
              </div>
            </aside>
          </form>
        )}
      </div>
    </div>
  );
}

// ── Success view ─────────────────────────────────────────────────────────────
function CheckoutSuccess({ data, onClose }) {
  const { order, payment } = data;
  const auth = useAuth();
  const trackUrl = `#pedido/${order.code}`;
  const isPix = order.payment_method === "pix";
  const qrSrc = payment && payment.qr_code_base64 ? `data:image/png;base64,${payment.qr_code_base64}` : null;
  const pixCode = payment && payment.qr_code;
  const [copied, setCopied] = useCkState(false);

  const copyPix = async () => {
    if (!pixCode) return;
    try {
      await navigator.clipboard.writeText(pixCode);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {}
  };

  return (
    <div className="ck-success">
      <div className="ck-success-mark display">✓</div>
      <div className="mono ck-success-id">PEDIDO {order.code}</div>
      <h3 className="display ck-success-t">
        {isPix
          ? <React.Fragment>Pague o Pix para<br /><em style={{color:"var(--accent)",fontStyle:"normal"}}>confirmar o pedido.</em></React.Fragment>
          : <React.Fragment>Finalize no cartão<br /><em style={{color:"var(--accent)",fontStyle:"normal"}}>pelo Mercado Pago.</em></React.Fragment>}
      </h3>

      {payment && payment.simulated && (
        <div className="mono" style={{ background: "rgba(224,160,64,0.1)", color: "var(--accent)", padding: "8px 14px", borderRadius: 999, fontSize: 11 }}>
          ⓘ MODO SIMULADO — configure MP_ACCESS_TOKEN no backend para pagamentos reais.
        </div>
      )}

      {isPix && qrSrc && (
        <img src={qrSrc} alt="QR Code Pix" style={{ width: 240, height: 240, background: "#fff", padding: 12, borderRadius: 8, margin: "8px 0" }} />
      )}
      {isPix && !qrSrc && pixCode && (
        <div style={{ width: 240, height: 240, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 8, margin: "8px 0", display: "flex", alignItems: "center", justifyContent: "center", padding: 16, fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", wordBreak: "break-all", textAlign: "center" }}>
          (sem imagem QR — use o código copia-e-cola abaixo)
        </div>
      )}
      {isPix && pixCode && (
        <div style={{ display: "flex", flexDirection: "column", gap: 6, width: "100%", maxWidth: 440 }}>
          <div className="mono" style={{ fontSize: 10, color: "var(--muted)", textAlign: "left", letterSpacing: "0.12em" }}>CÓDIGO COPIA E COLA</div>
          <div className="mono" style={{ background: "var(--surface)", padding: 12, borderRadius: 4, fontSize: 11, color: "var(--fg)", wordBreak: "break-all", textAlign: "left", border: "1px solid var(--line)" }}>{pixCode}</div>
          <button type="button" className="btn btn-primary" onClick={copyPix}>{copied ? "COPIADO ✓" : "COPIAR CÓDIGO"}</button>
        </div>
      )}
      {!isPix && payment && payment.init_point && (
        <a className="btn btn-primary" style={{ padding: "18px 32px", fontSize: 16 }} href={payment.init_point} target="_blank" rel="noopener">
          PAGAR NO MERCADO PAGO →
        </a>
      )}
      {!payment && (
        <div style={{ color: "var(--muted)", fontSize: 13, maxWidth: 380 }}>
          Não foi possível iniciar o pagamento agora. Acesse o pedido pelo link abaixo para tentar novamente.
        </div>
      )}

      <div className="ck-success-actions">
        <a className="btn btn-ghost" href={trackUrl}>VER MEUS PEDIDOS</a>
        <button className="btn btn-ghost" type="button" onClick={onClose}>VOLTAR PRA HOME</button>
      </div>

      <div className="ck-success-recap">
        <div className="mono ck-success-recap-h">RESUMO</div>
        <div className="ck-success-recap-row"><span>Cliente</span><span>{order.customer_name}</span></div>
        <div className="ck-success-recap-row"><span>E-mail</span><span>{order.customer_email}</span></div>
        <div className="ck-success-recap-row"><span>Pagamento</span><span>{isPix ? "Pix" : "Cartão"}</span></div>
        <div className="ck-success-recap-row"><span>Total</span><span style={{color:"var(--accent)"}}>{ckFmt(order.total_cents)}</span></div>
        <div className="ck-success-recap-row"><span>Status</span><span style={{ textTransform: "uppercase" }}>{order.status}</span></div>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutModal });