/* global React */

/**
 * ============================================================
 * Cromia Studio · Checkout modal (4 passos)
 * ============================================================
 * Coleta dados → foto → confirma → redireciona para o checkout
 * hospedado da AbacatePay (via Supabase Edge Function).
 *
 * Fluxo de produção:
 *   1. Frontend chama POST {SUPABASE_FUNCTION_URL}/create-billing
 *      enviando { plan, customer, photoBase64 }
 *   2. Edge Function sobe a foto no Storage, cria order PENDING,
 *      cria a cobrança na AbacatePay e devolve { checkoutUrl }
 *   3. Frontend redireciona para checkoutUrl
 *   4. Após pagar, cliente volta pra ?checkout=success&order=<id>
 *
 * Modo DEMO (quando SUPABASE_FUNCTION_URL está vazio):
 *   - Pula a chamada real, simula sucesso. Mostra a tela final.
 * ============================================================
 */
const SUPABASE_CONFIG = {
  functionUrl: "/api/checkout",
};

const PLAN_DETAILS = {
  simples: {
    id: "simples",
    name: "Cartela Simples",
    tag: "Entrada",
    price: "R$ 29,90",
    items: [
      "Análise resumida da sua estação",
      "1 cartela visual personalizada (geral)",
      "Sua foto incorporada no infográfico",
      "Pronto em ~1 minuto",
    ],
  },
  completa: {
    id: "completa",
    name: "Consultoria Completa",
    tag: "Mais escolhido",
    price: "R$ 69,90",
    items: [
      "5 cartelas: geral · cores · cabelo · maquiagem · acessórios",
      "Análise completa (subtom, contraste, profundidade, intensidade)",
      "Recomendações detalhadas em cada área",
      "Pronto em ~3 minutos",
    ],
  },
};

function emailIsValid(v) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test((v || "").trim());
}
function phoneIsValid(v) {
  const digits = (v || "").replace(/\D/g, "");
  return digits.length >= 10 && digits.length <= 13;
}
function formatPhone(v) {
  const d = (v || "").replace(/\D/g, "").slice(0, 11);
  if (d.length <= 2) return d.length ? `(${d}` : "";
  if (d.length <= 6) return `(${d.slice(0, 2)}) ${d.slice(2)}`;
  if (d.length <= 10) return `(${d.slice(0, 2)}) ${d.slice(2, 6)}-${d.slice(6)}`;
  return `(${d.slice(0, 2)}) ${d.slice(2, 7)}-${d.slice(7)}`;
}
function taxIdIsValid(v) {
  const d = (v || "").replace(/\D/g, "");
  if (d.length === 11) {
    if (/^(\d)\1{10}$/.test(d)) return false;
    let s = 0;
    for (let i = 0; i < 9; i++) s += +d[i] * (10 - i);
    let r = (s * 10) % 11; if (r >= 10) r = 0;
    if (r !== +d[9]) return false;
    s = 0;
    for (let i = 0; i < 10; i++) s += +d[i] * (11 - i);
    r = (s * 10) % 11; if (r >= 10) r = 0;
    return r === +d[10];
  }
  if (d.length === 14) {
    if (/^(\d)\1{13}$/.test(d)) return false;
    const w = (n) => { let s = 0, p = n - 7; for (let i = n; i >= 1; i--) { s += +d[n - i] * p--; if (p < 2) p = 9; } const r = s % 11; return r < 2 ? 0 : 11 - r; };
    return w(12) === +d[12] && w(13) === +d[13];
  }
  return false;
}
function formatTaxId(v) {
  const d = (v || "").replace(/\D/g, "").slice(0, 14);
  if (d.length <= 11) {
    if (d.length <= 3) return d;
    if (d.length <= 6) return `${d.slice(0,3)}.${d.slice(3)}`;
    if (d.length <= 9) return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6)}`;
    return `${d.slice(0,3)}.${d.slice(3,6)}.${d.slice(6,9)}-${d.slice(9)}`;
  }
  if (d.length <= 12) return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5,8)}/${d.slice(8)}`;
  return `${d.slice(0,2)}.${d.slice(2,5)}.${d.slice(5,8)}/${d.slice(8,12)}-${d.slice(12)}`;
}

/* ============================================================
 * Backend call — Supabase Edge Function
 * ============================================================ */
async function createBilling({ plan, data }) {
  // Modo demo
  if (!SUPABASE_CONFIG.functionUrl) {
    await new Promise((r) => setTimeout(r, 1100));
    return {
      orderId: "demo_" + Date.now(),
      checkoutUrl: null, // sinaliza modo demo — pula redirect
      demo: true,
    };
  }

  const res = await fetch(SUPABASE_CONFIG.functionUrl, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      plan: plan.id,
      // Origem atual do site — usada pelo backend para montar a URL de retorno,
      // funcionando tanto no domínio .vercel.app quanto no domínio próprio.
      origin: window.location.origin,
      customer: {
        name: data.name,
        email: data.email,
        phone: data.phone,
        taxId: data.taxId.replace(/\D/g, ""),
      },
    }),
  });

  const body = await res.json();
  if (!res.ok) {
    throw new Error(body && body.error ? body.error : "Não conseguimos iniciar o pagamento. Tente novamente.");
  }
  return body;
}

/* ============================================================
 * Sub-components
 * ============================================================ */
function StepDots({ step, total }) {
  return (
    <div className="ck-steps">
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} className={`ck-step-dot ${i < step ? "done" : ""} ${i === step ? "active" : ""}`}>
          <span className="ck-step-dot-num">{i + 1}</span>
          {i < total - 1 && <span className="ck-step-dot-bar" />}
        </div>
      ))}
    </div>
  );
}

function StepHeader({ eyebrow, title, subtitle }) {
  return (
    <div className="ck-step-head">
      <div className="ck-eyebrow">{eyebrow}</div>
      <h3 className="ck-title">{title}</h3>
      {subtitle && <p className="ck-sub">{subtitle}</p>}
    </div>
  );
}

function PlanSummary({ plan, compact }) {
  return (
    <div className={`ck-plan ${compact ? "compact" : ""}`}>
      <div className="ck-plan-tag">{plan.tag}</div>
      <div className="ck-plan-name">{plan.name}</div>
      <div className="ck-plan-price">
        <span className="ck-plan-price-value">{plan.price}</span>
        <span className="ck-plan-price-note">PIX ou cartão · pagamento único</span>
      </div>
      {!compact && (
        <ul className="ck-plan-items">
          {plan.items.map((it, i) => (
            <li key={i}><span className="ck-tick">✓</span> {it}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

function FormStep({ data, setData, errors, onNext, onClose, plan }) {
  return (
    <>
      <StepHeader
        eyebrow="Passo 1 de 2"
        title="Vamos nos conhecer"
        subtitle="Esses dados ficam guardados com você. Usamos só para entregar sua cartela e confirmar o pagamento."
      />
      <div className="ck-fields">
        <label className="ck-field">
          <span className="ck-label">Como podemos te chamar?</span>
          <input
            type="text"
            className={`ck-input ${errors.name ? "error" : ""}`}
            placeholder="Seu primeiro nome"
            value={data.name}
            onChange={(e) => setData({ ...data, name: e.target.value })}
            autoFocus
          />
          {errors.name && <span className="ck-err">{errors.name}</span>}
        </label>
        <label className="ck-field">
          <span className="ck-label">E-mail para receber a cartela</span>
          <input
            type="email"
            className={`ck-input ${errors.email ? "error" : ""}`}
            placeholder="voce@email.com"
            value={data.email}
            onChange={(e) => setData({ ...data, email: e.target.value })}
          />
          {errors.email && <span className="ck-err">{errors.email}</span>}
        </label>
        <label className="ck-field">
          <span className="ck-label">WhatsApp <span className="ck-optional">· para avisos sobre seu pedido</span></span>
          <input
            type="tel"
            className={`ck-input ${errors.phone ? "error" : ""}`}
            placeholder="(11) 99999-9999"
            value={data.phone}
            onChange={(e) => setData({ ...data, phone: formatPhone(e.target.value) })}
          />
          {errors.phone && <span className="ck-err">{errors.phone}</span>}
        </label>
        <label className="ck-field">
          <span className="ck-label">CPF ou CNPJ <span className="ck-optional">· exigido pela AbacatePay para emissão do pagamento</span></span>
          <input
            type="text"
            inputMode="numeric"
            className={`ck-input ${errors.taxId ? "error" : ""}`}
            placeholder="000.000.000-00"
            value={data.taxId}
            onChange={(e) => setData({ ...data, taxId: formatTaxId(e.target.value) })}
          />
          {errors.taxId && <span className="ck-err">{errors.taxId}</span>}
        </label>
      </div>
      <PlanSummary plan={plan} compact />
      <div className="ck-actions">
        <button type="button" className="ck-btn ck-btn-ghost" onClick={onClose}>Cancelar</button>
        <button type="button" className="ck-btn ck-btn-gold" onClick={onNext}>
          Continuar <span className="ck-arrow">→</span>
        </button>
      </div>
    </>
  );
}


function ConfirmStep({ data, plan, onBack, onPay, paying, payError }) {
  return (
    <>
      <StepHeader
        eyebrow="Passo 2 de 2"
        title="Tudo certo. Vamos ao pagamento?"
        subtitle="Confira seus dados. Você será levada para o ambiente seguro da AbacatePay para finalizar via PIX ou cartão."
      />

      <div className="ck-summary">
        <div className="ck-summary-row">
          <div className="ck-summary-key">Para</div>
          <div className="ck-summary-val">
            <div>{data.name}</div>
            <div className="ck-summary-meta">{data.email}{data.phone ? ` · ${data.phone}` : ""}</div>
            <div className="ck-summary-meta">{data.taxId}</div>
          </div>
        </div>

      </div>

      <PlanSummary plan={plan} />

      <div className="ck-secure">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="#7B665B" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <rect x="4" y="10" width="16" height="11" rx="2" />
          <path d="M8 10 V7 a4 4 0 0 1 8 0 v3" />
        </svg>
        Pagamento processado pela <strong>AbacatePay</strong> · ambiente seguro e criptografado.
      </div>

      {payError && <div className="ck-err ck-err-block" style={{ marginBottom: 14 }}>{payError}</div>}

      <div className="ck-actions">
        <button type="button" className="ck-btn ck-btn-ghost" onClick={onBack} disabled={paying}>← Voltar</button>
        <button type="button" className="ck-btn ck-btn-gold" onClick={onPay} disabled={paying}>
          {paying ? "Preparando pagamento…" : <>Ir para pagamento <span className="ck-arrow">→</span></>}
        </button>
      </div>
    </>
  );
}

function LoadingStep() {
  return (
    <div className="ck-loading">
      <div className="ck-spinner" />
      <p className="ck-loading-title">Preparando seu pagamento…</p>
      <p className="ck-loading-sub">Aguarde, isso leva apenas alguns segundos.</p>
    </div>
  );
}

function SuccessStep({ data, plan, onClose }) {
  return (
    <div className="ck-success">
      <div className="ck-success-mark">
        <svg viewBox="0 0 48 48" width="56" height="56" fill="none" stroke="#B5874A" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="24" cy="24" r="20" />
          <path d="M15 24 L22 31 L33 18" />
        </svg>
      </div>
      <div className="ck-success-eyebrow">Pré-cadastro concluído</div>
      <h3 className="ck-title">{data.name ? `${data.name.split(" ")[0]}, ` : ""}sua jornada começa agora.</h3>
      <p className="ck-sub">
        Em instantes você será redirecionada para o ambiente de pagamento seguro. Assim que confirmarmos, sua <strong>{plan.name}</strong> será gerada e enviada para <strong>{data.email}</strong>.
      </p>
      <div className="ck-actions ck-actions-center">
        <button type="button" className="ck-btn ck-btn-gold" onClick={onClose}>Entendi</button>
      </div>
    </div>
  );
}

/* ============================================================
 * Modal — orquestra os 2 passos (dados → confirmação)
 * A foto é coletada APÓS o pagamento, na página obrigado.html
 * ============================================================ */
function CheckoutModal({ open, plan, onClose }) {
  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({ name: "", email: "", phone: "", taxId: "" });
  const [errors, setErrors] = React.useState({});
  const [paying, setPaying] = React.useState(false);
  const [payError, setPayError] = React.useState("");
  const [done, setDone] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      setStep(0); setData({ name: "", email: "", phone: "", taxId: "" }); setErrors({}); setPaying(false); setPayError(""); setDone(false);
    }
  }, [open, plan && plan.id]);

  React.useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape" && !paying) onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose, paying]);

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

  const validateStep1 = () => {
    const e = {};
    if (!data.name.trim() || data.name.trim().length < 2) e.name = "Por favor, conte seu nome.";
    if (!emailIsValid(data.email)) e.email = "Confira o e-mail digitado.";
    if (data.phone && !phoneIsValid(data.phone)) e.phone = "Confira o número informado.";
    if (!taxIdIsValid(data.taxId)) e.taxId = "Informe um CPF ou CNPJ válido.";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const goNext = () => {
    if (step === 0 && !validateStep1()) return;
    setErrors({});
    setStep((s) => s + 1);
  };
  const goBack = () => { setErrors({}); setStep((s) => Math.max(0, s - 1)); };

  const handlePay = async () => {
    setPayError("");
    setPaying(true);
    try {
      const result = await createBilling({ plan, data });
      if (result.checkoutUrl) {
        window.location.href = result.checkoutUrl;
      } else {
        // Demo: mostra tela final fake
        setDone(true);
      }
    } catch (err) {
      setPayError(err.message || "Não conseguimos iniciar o pagamento. Tente novamente.");
    } finally {
      setPaying(false);
    }
  };

  return (
    <div className="ck-overlay" onClick={paying ? undefined : onClose} role="dialog" aria-modal="true">
      <div className="ck-modal" onClick={(e) => e.stopPropagation()}>
        <button type="button" className="ck-close" onClick={onClose} aria-label="Fechar">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            <path d="M6 6 L18 18 M18 6 L6 18" />
          </svg>
        </button>

        {!done && !paying && <StepDots step={step} total={2} />}

        <div className={`ck-body step-${step} ${done ? "done" : ""}`}>
          {paying ? (
            <LoadingStep />
          ) : done ? (
            <SuccessStep data={data} plan={plan} onClose={onClose} />
          ) : step === 0 ? (
            <FormStep data={data} setData={setData} errors={errors} onNext={goNext} onClose={onClose} plan={plan} />
          ) : (
            <ConfirmStep data={data} plan={plan} onBack={goBack} onPay={handlePay} paying={paying} payError={payError} />
          )}
        </div>
      </div>
    </div>
  );
}

function useCheckout() {
  const [open, setOpen] = React.useState(false);
  const [plan, setPlan] = React.useState(null);
  const openCheckout = React.useCallback((planKey) => {
    const p = PLAN_DETAILS[planKey] || PLAN_DETAILS.completa;
    setPlan(p);
    setOpen(true);
  }, []);
  const closeCheckout = React.useCallback(() => setOpen(false), []);

  React.useEffect(() => {
    window.__openCheckout = openCheckout;
    return () => { if (window.__openCheckout === openCheckout) delete window.__openCheckout; };
  }, [openCheckout]);

  return { open, plan, openCheckout, closeCheckout };
}

Object.assign(window, { CheckoutModal, useCheckout, PLAN_DETAILS, SUPABASE_CONFIG });