// Checkout flow — 3 steps: choose distance, form, OpenPix QR
const { useState: useStateCK, useEffect: useEffectCK, useMemo, useRef } = React;

function Stepper({ step }) {
  const labels = ["Distância", "Seus dados", "Pagamento"];
  return (
    <div className="stepper">
      {labels.map((l, i) => (
        <React.Fragment key={i}>
          <div className={`stepper__item ${step === i ? "is-active" : ""} ${step > i ? "is-done" : ""}`}>
            <div className="stepper__num">{step > i ? "✓" : i + 1}</div>
            <span>{l}</span>
          </div>
          {i < labels.length - 1 && <div className="stepper__sep"/>}
        </React.Fragment>
      ))}
    </div>
  );
}

function StepDistance({ modalities, pick, setPick, onNext }) {
  const cur = modalities[pick.modality];
  return (
    <div>
      <h2>Escolha sua distância.</h2>
      <p className="lead">Mude de ideia depois? Sem stress — você pode upgradar até o dia 20 do mês pagando a diferença.</p>
      <div className="modality-toggle">
        {Object.entries(modalities).map(([k, m]) => (
          <button
            key={k}
            className={pick.modality === k ? "is-active" : ""}
            onClick={() => setPick({ modality: k, km: m.tiers[0].km })}
          >
            {m.icon} {m.label}
          </button>
        ))}
      </div>
      <div className="tiers">
        {cur.tiers.map(t => {
          const p = fmtPrice(t.price);
          const selected = pick.km === t.km;
          return (
            <button
              key={t.km}
              className="tier"
              style={selected ? {borderColor: "var(--red-glow)", background: "var(--ink-3)"} : {}}
              onClick={() => setPick({ ...pick, km: t.km })}
            >
              {t.tag && <div className="tier__tag">{t.tag}</div>}
              <div className="tier__km">{t.km}<small> km</small></div>
              <div className="tier__price">
                <span className="tier__price-currency">R$</span>
                <span className="tier__price-value">{p.int}</span>
                <span className="tier__price-cents">,{p.cents}</span>
              </div>
              <div className="tier__cta">{selected ? "✓ Selecionada" : "Selecionar"}</div>
            </button>
          );
        })}
      </div>
      <div style={{marginTop: 36, display: "flex", justifyContent: "flex-end"}}>
        <button className="btn btn--primary btn--lg" onClick={onNext}>
          Continuar <span className="arrow">→</span>
        </button>
      </div>
    </div>
  );
}

function StepForm({ form, setForm, onNext, onBack }) {
  const [errs, setErrs] = useStateCK({});

  const validate = () => {
    const e = {};
    if (!form.name || form.name.trim().length < 3) e.name = "Coloque seu nome completo.";
    const phone = form.phone.replace(/\D/g, "");
    if (phone.length < 10) e.phone = "Telefone incompleto.";
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "Email inválido.";
    if (!form.instagram || form.instagram.length < 2) e.instagram = "Instagram obrigatório.";
    setErrs(e);
    return Object.keys(e).length === 0;
  };

  const maskPhone = (v) => {
    const d = v.replace(/\D/g, "").slice(0, 11);
    if (d.length <= 2) return 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)}`;
  };
  const maskIg = (v) => {
    let s = v.trim().replace(/^@/, "").replace(/\s/g, "");
    return s ? "@" + s : "";
  };

  return (
    <div>
      <h2>Seus dados.</h2>
      <p className="lead">Pra emitir o kit, te avisar quando despacha e adicionar você no club do Strava. Nada de spam.</p>
      <div className="form-grid">
        <div className={`field field--full ${errs.name ? "field--error" : ""}`}>
          <label>Nome completo</label>
          <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Como aparece no RG"/>
          {errs.name && <span className="field__err">{errs.name}</span>}
        </div>
        <div className={`field ${errs.phone ? "field--error" : ""}`}>
          <label>Telefone (whatsapp)</label>
          <input value={form.phone} onChange={e => setForm({...form, phone: maskPhone(e.target.value)})} placeholder="(11) 99999-9999"/>
          {errs.phone && <span className="field__err">{errs.phone}</span>}
        </div>
        <div className={`field ${errs.email ? "field--error" : ""}`}>
          <label>Email</label>
          <input value={form.email} type="email" onChange={e => setForm({...form, email: e.target.value})} placeholder="voce@email.com"/>
          {errs.email && <span className="field__err">{errs.email}</span>}
        </div>
        <div className={`field field--full ${errs.instagram ? "field--error" : ""}`}>
          <label>Instagram</label>
          <input value={form.instagram} onChange={e => setForm({...form, instagram: maskIg(e.target.value)})} placeholder="@seuperfil"/>
          {errs.instagram && <span className="field__err">{errs.instagram}</span>}
        </div>
      </div>
      <div style={{marginTop: 36, display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap"}}>
        <button className="btn btn--ghost" onClick={onBack}>← Voltar</button>
        <button className="btn btn--primary btn--lg" onClick={() => validate() && onNext()}>
          Gerar Pix <span className="arrow">→</span>
        </button>
      </div>
    </div>
  );
}

// Decorative deterministic "QR-looking" SVG. The real QR comes from OpenPix.
function FauxQR({ seed = "lamonie" }) {
  const size = 25;
  const cells = useMemo(() => {
    let h = 0;
    for (const c of seed) h = (h * 31 + c.charCodeAt(0)) >>> 0;
    const rand = () => {
      h = (h * 1664525 + 1013904223) >>> 0;
      return (h >>> 8) / 0xffffff;
    };
    const g = Array.from({length: size}, () => Array.from({length: size}, () => rand() > 0.55 ? 1 : 0));
    // anchor corners
    const anchor = (x, y) => {
      for (let i = 0; i < 7; i++) for (let j = 0; j < 7; j++) {
        const onEdge = i === 0 || i === 6 || j === 0 || j === 6;
        const inner = i >= 2 && i <= 4 && j >= 2 && j <= 4;
        g[y+i][x+j] = (onEdge || inner) ? 1 : 0;
      }
    };
    anchor(0, 0);
    anchor(size - 7, 0);
    anchor(0, size - 7);
    return g;
  }, [seed]);
  return (
    <svg viewBox={`0 0 ${size} ${size}`} shapeRendering="crispEdges">
      <rect width={size} height={size} fill="#fff"/>
      {cells.map((row, y) => row.map((v, x) => v ? <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill="#0a0807"/> : null))}
    </svg>
  );
}

function StepPayment({ form, pick, modalities, total, onSuccess, onBack }) {
  const [secs, setSecs] = useStateCK(15 * 60);
  const [copied, setCopied] = useStateCK(false);
  const [charge, setCharge] = useStateCK(null);
  const [error,  setError]  = useStateCK(null);

  // Cria a charge no Supabase + OpenPix assim que o passo abre. Se SB não
  // estiver disponível, gera um BR-Code mockado (modo demo).
  useEffectCK(() => {
    let cancelled = false;
    (async () => {
      if (!window.SB?.ready) {
        const seed = `${form.email}:${pick.modality}:${pick.km}:${total}`;
        const id = btoa(seed).replace(/=+$/, "").slice(0, 28);
        setCharge({
          brCode: `00020126890014br.gov.bcb.pix0114+5511999999999023CHALLENGE-LAMONIE-${id}5204000053039865802BR5919CHALLENGE LAMONIE6009SAO PAULO62070503***6304ABCD`,
          qrCodeImage: null,
          participantId: null,
          demo: true,
        });
        return;
      }
      try {
        const res = await window.SB.createCharge({
          modality: pick.modality,
          km: pick.km,
          athlete: form,
        });
        if (cancelled) return;
        setCharge({
          brCode: res.charge.brCode,
          qrCodeImage: res.charge.qrCodeImage,
          participantId: res.participant?.id,
          demo: res.demo,
        });
      } catch (e) {
        if (cancelled) return;
        if (e?.message === "already_registered" || /already/.test(String(e))) {
          setError("Esse email já tem uma inscrição. Acessa o painel pelo seu link mágico ou usa outro email.");
        } else {
          setError("Não rolou criar a cobrança. Tenta de novo em alguns segundos.");
        }
      }
    })();
    return () => { cancelled = true; };
  }, []);

  // Timer de expiração
  useEffectCK(() => {
    const t = setInterval(() => setSecs(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, []);

  // Polling do status (real) ou auto-confirm (demo).
  useEffectCK(() => {
    if (!charge) return;
    if (charge.demo || !charge.participantId) {
      const t = setTimeout(onSuccess, 6000);
      return () => clearTimeout(t);
    }
    const poll = setInterval(async () => {
      const s = await window.SB.getChargeStatus(charge.participantId);
      if (s?.status === "paid") { clearInterval(poll); onSuccess(); }
      if (s?.status === "expired" || s?.status === "canceled") {
        clearInterval(poll); setError("Cobrança expirou. Volta e gera de novo.");
      }
    }, 3000);
    return () => clearInterval(poll);
  }, [charge]);

  const pixCode = charge?.brCode || "";

  const mm = String(Math.floor(secs / 60)).padStart(2, "0");
  const ss = String(secs % 60).padStart(2, "0");

  const copy = () => {
    navigator.clipboard?.writeText(pixCode);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  if (error) {
    return (
      <div>
        <h2>Ops.</h2>
        <p className="lead" style={{color: "var(--red-glow)"}}>{error}</p>
        <button className="btn btn--ghost" onClick={onBack}>← Voltar</button>
      </div>
    );
  }
  if (!charge) {
    return (
      <div>
        <h2>Gerando seu Pix...</h2>
        <p className="lead">Estamos criando sua cobrança na OpenPix. Aguenta um segundinho.</p>
      </div>
    );
  }

  return (
    <div>
      <h2>Quase lá.</h2>
      <p className="lead">Pix expira em {mm}:{ss}. Assim que cair, a gente te manda confirmação por email e WhatsApp.</p>
      <div className="pix-card">
        <div className="pix-qr">
          {charge.qrCodeImage
            ? <img src={charge.qrCodeImage} alt="QR Code Pix"/>
            : <FauxQR seed={`${form.email}:${pick.modality}:${pick.km}`}/>}
        </div>
        <div className="pix-meta">
          <h3>Pague com Pix</h3>
          <p>Abra seu banco, escolha <strong>Pix Copia &amp; Cola</strong> e cole o código abaixo. Ou aponte a câmera pro QR.</p>
          <div className="pix-code">
            <input readOnly value={pixCode}/>
            <button onClick={copy}>{copied ? "Copiado ✓" : "Copiar"}</button>
          </div>
          <div className="pix-timer">
            <span className="dot"></span>
            <span>{charge.demo ? "MODO DEMO · confirma sozinho em 6s" : `Aguardando confirmação · expira em ${mm}:${ss}`}</span>
          </div>
        </div>
      </div>
      <div style={{marginTop: 36, display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap"}}>
        <button className="btn btn--ghost" onClick={onBack}>← Voltar</button>
        {(charge.demo || !window.APP_CONFIG?.USE_OPENPIX) && (
          <button className="btn btn--ghost" onClick={onSuccess} style={{opacity: 0.6}}>
            [demo] Simular pagamento aprovado →
          </button>
        )}
      </div>
    </div>
  );
}

function StepSuccess({ form, pick, modalities }) {
  const m = modalities[pick.modality];
  return (
    <div className="success">
      <div className="success__check">✓</div>
      <h2>Tá dentro, {form.name.split(" ")[0]}.</h2>
      <p>
        Sua inscrição na <strong>Etapa Tóquio · {pick.km}km {m.label.toLowerCase()}</strong> foi confirmada.
        Em instantes você recebe o email com o link do seu painel pra enviar o comprovante da corrida.
        Bora correr.
      </p>
      <a href="#" className="btn btn--primary btn--lg" onClick={(e) => { e.preventDefault(); location.hash = ""; }}>
        Voltar para a home
      </a>
    </div>
  );
}

function Summary({ pick, modalities, medalSrc, form, step }) {
  const m = modalities[pick.modality];
  const tier = m.tiers.find(t => t.km === pick.km);
  const total = tier?.price || 0;
  const p = fmtPrice(total);
  return (
    <aside className="summary">
      <h3>Resumo da inscrição</h3>
      <div className="summary__medal">
        <img src={medalSrc} alt="Medalha"/>
      </div>
      <div className="summary__row">
        <span className="lbl">Etapa</span>
        <span className="val" style={{fontSize: 16}}>Tóquio · Maio</span>
      </div>
      <div className="summary__row">
        <span className="lbl">Modalidade</span>
        <span className="val">{m.label}</span>
      </div>
      <div className="summary__row">
        <span className="lbl">Distância</span>
        <span className="val">{pick.km} km</span>
      </div>
      {step >= 1 && form.name && (
        <div className="summary__row">
          <span className="lbl">Atleta</span>
          <span className="val" style={{fontSize: 14}}>{form.name.split(" ")[0]}</span>
        </div>
      )}
      <div className="summary__total">
        <span className="lbl">Total</span>
        <span className="val">R$ {p.int}<small style={{fontSize: 18}}>,{p.cents}</small></span>
      </div>
      <div style={{marginTop: 14, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", opacity: 0.55}}>
        ✓ Frete grátis · ✓ Medalha inclusa · ✓ Certificado digital
      </div>
    </aside>
  );
}

function Checkout({ content, medalSrc, onClose }) {
  const [step, setStep] = useStateCK(0);
  const [pick, setPick] = useStateCK({ modality: "corrida", km: 10 });
  const [form, setForm] = useStateCK({ name: "", phone: "", email: "", instagram: "" });

  const tier = content.modalities[pick.modality].tiers.find(t => t.km === pick.km);
  const total = tier?.price || 0;

  useEffectCK(() => { window.scrollTo(0, 0); }, [step]);

  return (
    <div className="checkout">
      <div className="container">
        <div className="checkout__topbar">
          <div className="brandmark">
            <div className="brandmark__glyph">CL</div>
            <span>{content.brand} · Checkout</span>
          </div>
          <button className="checkout__close" onClick={onClose}>× Fechar</button>
        </div>
        <div className="checkout__layout">
          <div className="checkout__pane">
            <Stepper step={step}/>
            {step === 0 && <StepDistance modalities={content.modalities} pick={pick} setPick={setPick} onNext={() => setStep(1)}/>}
            {step === 1 && <StepForm form={form} setForm={setForm} onNext={() => setStep(2)} onBack={() => setStep(0)}/>}
            {step === 2 && <StepPayment form={form} pick={pick} modalities={content.modalities} total={total} onSuccess={() => setStep(3)} onBack={() => setStep(1)}/>}
            {step === 3 && <StepSuccess form={form} pick={pick} modalities={content.modalities}/>}
          </div>
          {step < 3 && <Summary pick={pick} modalities={content.modalities} medalSrc={medalSrc} form={form} step={step}/>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Checkout });