// ============ CHECKOUT MODAL — Mercado Pago CheckoutBricks ============
// Configurar aqui:
const CONFIG = {
  // Supabase — Project Settings → API
  SUPABASE_URL: 'https://xemopdhqloicwolqahyf.supabase.co',
  SUPABASE_ANON_KEY: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhlbW9wZGhxbG9pY3dvbHFhaHlmIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzcwMjE0NDUsImV4cCI6MjA5MjU5NzQ0NX0.eRbSX3QIFqLdC8w148artJ9OIQzJzoWw8Exs7LHey8Y',

  // Mercado Pago — Public Key de PRODUÇÃO (pode ficar no frontend)
  // O Access Token fica APENAS na Edge Function (secret do servidor)
  MP_PUBLIC_KEY: 'APP_USR-aa8b3a5a-51b2-4c8d-ad70-103269742402',

  // WhatsApp — apenas números com DDI, ex: '5511999999999'
  // Deixe como está até ter o número. Aparece só como fallback de erro.
  WHATSAPP: '5500000000000',
};

// Passos:
//   1 = formulário de envio
//   2 = carregando (criando preferência no MP)
//   3 = Payment Brick ativo
//   4 = processando pagamento
//   5 = aprovado / pendente (pix, boleto)
//   6 = erro

function CheckoutModal({ open, onClose }) {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    nome: '', email: '', cpf: '', telefone: '',
    cep: '', endereco: '', numero: '', complemento: '',
    bairro: '', cidade: '', uf: '',
  });
  const [err, setErr] = useState('');
  const [pedidoId, setPedidoId] = useState(null);
  const [payStatus, setPayStatus] = useState(null); // 'approved' | 'pending' | 'rejected'
  const brickControllerRef = useRef(null);

  // Carrega o SDK do MP quando o modal abre (uma vez)
  useEffect(() => {
    if (!open) return;
    if (document.getElementById('mp-sdk')) return;
    const s = document.createElement('script');
    s.id = 'mp-sdk';
    s.src = 'https://sdk.mercadopago.com/js/v2';
    document.head.appendChild(s);
  }, [open]);

  // Fecha com Escape, trava scroll
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);

  // Destrói o Brick ao fechar
  useEffect(() => {
    if (!open && brickControllerRef.current) {
      brickControllerRef.current.unmount();
      brickControllerRef.current = null;
    }
  }, [open]);

  const setF = (k) => (e) => setForm(s => ({ ...s, [k]: e.target.value }));

  // Auto-preenche endereço pelo CEP (ViaCEP, API pública)
  const onCepBlur = async () => {
    const cep = form.cep.replace(/\D/g, '');
    if (cep.length !== 8) return;
    try {
      const r = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
      const d = await r.json();
      if (d.erro) return;
      setForm(s => ({
        ...s,
        endereco: d.logradouro || s.endereco,
        bairro:   d.bairro     || s.bairro,
        cidade:   d.localidade || s.cidade,
        uf:       d.uf         || s.uf,
      }));
    } catch (_) {}
  };

  const validate = () => {
    const req = ['nome','email','cpf','telefone','cep','endereco','numero','bairro','cidade','uf'];
    for (const k of req) if (!form[k].trim()) return `Campo obrigatório: ${k}`;
    if (!/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) return 'E-mail inválido';
    return null;
  };

  // Espera o SDK carregar (máx 4s)
  const waitForSDK = () => new Promise((resolve, reject) => {
    if (window.MercadoPago) { resolve(); return; }
    let tries = 0;
    const t = setInterval(() => {
      if (window.MercadoPago)  { clearInterval(t); resolve(); }
      else if (++tries > 20)   { clearInterval(t); reject(new Error('MP SDK timeout')); }
    }, 200);
  });

  // Inicializa o Brick com o preferenceId retornado pela Edge Function
  const initBrick = async (preferenceId, pedId) => {
    await waitForSDK();

    if (brickControllerRef.current) {
      brickControllerRef.current.unmount();
      brickControllerRef.current = null;
    }

    const mp = new window.MercadoPago(CONFIG.MP_PUBLIC_KEY, { locale: 'pt-BR' });
    const builder = mp.bricks();

    setStep(3);

    const controller = await builder.create('payment', 'mp-brick-container', {
      initialization: {
        amount: 119.90,
        preferenceId,
      },
      customization: {
        paymentMethods: {
          creditCard:   'all',
          debitCard:    'all',
          ticket:       'all',   // boleto
          bankTransfer: 'all',   // pix
        },
        visual: {
          style: { theme: 'default' },
          hideFormTitle: true,
        },
      },
      callbacks: {
        onReady: () => {},
        onError: (e) => console.error('[Brick]', e),

        // Chamado quando o usuário clica "Pagar" no Brick.
        // Deve retornar uma Promise — resolve = sucesso, reject = falha.
        onSubmit: ({ formData }) => new Promise(async (resolve, reject) => {
          setStep(4);
          try {
            const res = await fetch(
              `${CONFIG.SUPABASE_URL}/functions/v1/mp-checkout/pay`,
              {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                  'apikey': CONFIG.SUPABASE_ANON_KEY,
                  'Authorization': `Bearer ${CONFIG.SUPABASE_ANON_KEY}`,
                },
                body: JSON.stringify({ formData, pedido_id: pedId }),
              }
            );
            const data = await res.json();

            if (data.status === 'approved') {
              setPayStatus('approved'); setStep(5); resolve();
            } else if (data.status === 'pending' || data.status === 'in_process') {
              setPayStatus('pending');  setStep(5); resolve();
            } else {
              setPayStatus('rejected'); setStep(6); reject();
            }
          } catch (e) {
            console.error('[pay]', e);
            setStep(6); reject();
          }
        }),
      },
    });

    brickControllerRef.current = controller;
  };

  // Envia formulário → Edge Function → preference_id → Brick
  const submit = async () => {
    const v = validate();
    if (v) { setErr(v); return; }
    setErr('');
    setStep(2);

    try {
      const res = await fetch(
        `${CONFIG.SUPABASE_URL}/functions/v1/mp-checkout/preference`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'apikey': CONFIG.SUPABASE_ANON_KEY,
            'Authorization': `Bearer ${CONFIG.SUPABASE_ANON_KEY}`,
          },
          body: JSON.stringify(form),
        }
      );
      const data = await res.json();
      if (!res.ok || !data.preference_id) throw new Error(data.error || 'Erro ao criar preferência');

      setPedidoId(data.pedido_id);
      await initBrick(data.preference_id, data.pedido_id);
    } catch (e) {
      console.error('[preference]', e);
      setStep(6);
    }
  };

  const whatsappMsg = encodeURIComponent(
    `Olá! Quero o Selo dos 7 Arcanjos.\n\nNome: ${form.nome || '...'}\nEmail: ${form.email || '...'}\nEndereço: ${form.endereco}, ${form.numero} — ${form.cidade}/${form.uf}, CEP ${form.cep}`
  );

  const temWhatsapp = CONFIG.WHATSAPP !== '5500000000000';
  const stepLabel = { 1:'1', 2:'1', 3:'2', 4:'3', 5:'✓', 6:'!' }[step] ?? step;

  if (!open) return null;

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: 'color-mix(in oklab, var(--ink) 70%, transparent)',
      backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20,
      animation: 'modalFade .3s ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--bg)',
        border: '1px solid var(--line)',
        width: '100%',
        maxWidth: step === 3 ? 820 : 720,
        maxHeight: '92vh',
        overflow: 'auto',
        position: 'relative',
        boxShadow: '0 60px 120px -30px rgba(0,0,0,.5)',
        animation: 'modalSlide .5s cubic-bezier(.2,.7,.2,1)',
        transition: 'max-width .4s ease',
      }}>

        {/* Fechar */}
        <button onClick={onClose} aria-label="Fechar" style={{
          position: 'absolute', top: 16, right: 16, zIndex: 2,
          width: 40, height: 40, border: '1px solid var(--line)',
          background: 'var(--bg)', cursor: 'pointer', borderRadius: '50%',
          fontSize: 18, color: 'var(--ink)',
        }}>✕</button>

        {/* Header */}
        <div style={{
          padding: '40px 48px 28px',
          borderBottom: '1px solid var(--line)',
          background: 'color-mix(in oklab, var(--bg-2) 60%, transparent)',
        }}>
          <span className="mono gold">CHECKOUT · ETAPA {stepLabel} DE 3</span>
          <h3 className="serif" style={{ fontSize: 36, fontStyle: 'italic', marginTop: 12, fontWeight: 300 }}>
            {step === 1 && 'Seus dados de envio'}
            {step === 2 && 'Preparando pagamento…'}
            {step === 3 && 'Como deseja pagar?'}
            {step === 4 && 'Processando…'}
            {step === 5 && (payStatus === 'pending' ? 'Pagamento em análise' : 'Pedido confirmado!')}
            {step === 6 && 'Não foi possível processar'}
          </h3>
          <div style={{ marginTop: 14, fontSize: 13, color: 'var(--ink-soft)' }}>
            Selo dos 7 Arcanjos ·{' '}
            <strong style={{ color: 'var(--ink)' }}>R$ 119,90</strong>{' '}
            em 3× sem juros · frete até R$ 15 incluso
          </div>
        </div>

        {/* ── Etapa 1: Formulário ── */}
        {step === 1 && (
          <div style={{ padding: '32px 48px 40px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Field label="Nome completo*"        col={2} value={form.nome}       onChange={setF('nome')} />
              <Field label="E-mail*"               type="email" value={form.email} onChange={setF('email')} />
              <Field label="Telefone / WhatsApp*"         value={form.telefone}    onChange={setF('telefone')} placeholder="(11) 99999-9999" />
              <Field label="CPF*"                         value={form.cpf}         onChange={setF('cpf')}     placeholder="000.000.000-00" />
              <Field label="CEP*"                         value={form.cep}         onChange={setF('cep')}     onBlur={onCepBlur} placeholder="00000-000" />
              <Field label="Endereço*"             col={2} value={form.endereco}   onChange={setF('endereco')} />
              <Field label="Número*"                      value={form.numero}      onChange={setF('numero')} />
              <Field label="Complemento"                  value={form.complemento} onChange={setF('complemento')} />
              <Field label="Bairro*"                      value={form.bairro}      onChange={setF('bairro')} />
              <Field label="Cidade*"                      value={form.cidade}      onChange={setF('cidade')} />
              <Field label="UF*"                          value={form.uf}          onChange={setF('uf')} maxLength={2} />
            </div>

            {err && (
              <div style={{ marginTop: 14, padding: 12, background: 'oklch(0.9 0.08 30)', color: 'oklch(0.3 0.1 30)', fontSize: 13 }}>
                {err}
              </div>
            )}

            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button onClick={submit} className="btn" style={{ justifyContent: 'center', width: '100%', padding: '20px', fontSize: 13, border: 'none' }}>
                Ir para o pagamento <span className="arrow">→</span>
              </button>
              {temWhatsapp && (
                <a href={`https://wa.me/${CONFIG.WHATSAPP}?text=${whatsappMsg}`} target="_blank" rel="noreferrer"
                  className="btn ghost" style={{ justifyContent: 'center', padding: '16px', fontSize: 12 }}>
                  Prefiro finalizar pelo WhatsApp
                </a>
              )}
            </div>

            <p style={{ marginTop: 20, fontSize: 11, color: 'var(--ink-soft)', textAlign: 'center', lineHeight: 1.6 }}>
              Seus dados são armazenados com segurança para emissão do envio.<br />
              Pagamento processado via <strong style={{ color: 'var(--ink)' }}>Mercado Pago</strong>.
            </p>
          </div>
        )}

        {/* ── Etapa 2: Carregando preferência ── */}
        {step === 2 && <CheckoutStatus text="Preparando pagamento seguro…" />}

        {/* ── Etapa 3: Brick ── */}
        {step === 3 && (
          <div style={{ padding: '32px 48px 40px' }}>
            <div id="mp-brick-container" style={{ minHeight: 220 }} />
          </div>
        )}

        {/* ── Etapa 4: Processando pagamento ── */}
        {step === 4 && <CheckoutStatus text="Processando seu pagamento…" />}

        {/* ── Etapa 5: Sucesso / Pendente ── */}
        {step === 5 && (
          <div style={{ padding: '48px', textAlign: 'center' }}>
            <div style={{
              width: 72, height: 72, borderRadius: '50%', margin: '0 auto 24px',
              background: 'linear-gradient(135deg, var(--gold-light), var(--gold-deep))',
              color: 'var(--bg)', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 32,
            }}>✦</div>

            {payStatus === 'approved' && <>
              <h4 className="serif" style={{ fontSize: 28, fontStyle: 'italic' }}>Pagamento confirmado.</h4>
              <p style={{ marginTop: 14, fontSize: 15, color: 'var(--ink-2)', maxWidth: 420, margin: '14px auto 0' }}>
                Seu Selo será enviado em até 24h úteis.
                Fique de olho no e-mail <strong>{form.email}</strong>.
              </p>
            </>}

            {payStatus === 'pending' && <>
              <h4 className="serif" style={{ fontSize: 28, fontStyle: 'italic' }}>Pagamento em análise.</h4>
              <p style={{ marginTop: 14, fontSize: 15, color: 'var(--ink-2)', maxWidth: 480, margin: '14px auto 0' }}>
                Se escolheu Pix ou boleto, a confirmação chega assim que o pagamento for identificado.
                Avisaremos por e-mail.
              </p>
            </>}

            <button onClick={onClose} className="btn" style={{ marginTop: 32, justifyContent: 'center' }}>
              Fechar <span className="arrow">→</span>
            </button>
          </div>
        )}

        {/* ── Etapa 6: Erro ── */}
        {step === 6 && (
          <div style={{ padding: '48px', textAlign: 'center' }}>
            <div style={{ fontSize: 40, marginBottom: 16 }}>⚠</div>
            <h4 className="serif" style={{ fontSize: 24, fontStyle: 'italic' }}>Não foi possível processar.</h4>
            <p style={{ marginTop: 14, fontSize: 15, color: 'var(--ink-2)', maxWidth: 420, margin: '14px auto 0' }}>
              Verifique os dados do cartão ou tente outra forma de pagamento.
              {temWhatsapp && ' Ou finalize pelo WhatsApp.'}
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
              {temWhatsapp && (
                <a href={`https://wa.me/${CONFIG.WHATSAPP}?text=${whatsappMsg}`} target="_blank" rel="noreferrer" className="btn">
                  Falar no WhatsApp <span className="arrow">→</span>
                </a>
              )}
              <button onClick={() => setStep(3)} className="btn ghost">Tentar novamente</button>
            </div>
          </div>
        )}

        <style>{`
          @keyframes modalFade  { from { opacity: 0; } to { opacity: 1; } }
          @keyframes modalSlide { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
        `}</style>
      </div>
    </div>
  );
}

function Field({ label, value, onChange, onBlur, type = 'text', col = 1, placeholder, maxLength }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6, gridColumn: col === 2 ? '1 / -1' : 'auto' }}>
      <span className="mono" style={{ color: 'var(--ink-soft)' }}>{label.toUpperCase()}</span>
      <input
        type={type} value={value} onChange={onChange} onBlur={onBlur}
        placeholder={placeholder} maxLength={maxLength}
        style={{
          fontFamily: 'var(--sans)', fontSize: 15,
          padding: '12px 14px',
          background: 'var(--bg-2)',
          border: '1px solid var(--line)',
          color: 'var(--ink)',
          outline: 'none',
          transition: 'border-color .2s, background .2s',
        }}
        onFocus={(e) => { e.target.style.borderColor = 'var(--gold-deep)'; e.target.style.background = 'var(--bg)'; }}
        onBlurCapture={(e) => { e.target.style.borderColor = 'var(--line)'; e.target.style.background = 'var(--bg-2)'; }}
      />
    </label>
  );
}

function CheckoutStatus({ text }) {
  return (
    <div style={{ padding: '80px 48px', textAlign: 'center' }}>
      <div style={{
        width: 48, height: 48, margin: '0 auto 20px',
        border: '2px solid var(--line)',
        borderTopColor: 'var(--gold-deep)',
        borderRadius: '50%',
        animation: 'spin 1s linear infinite',
      }} />
      <p className="mono" style={{ color: 'var(--ink-soft)' }}>{text.toUpperCase()}</p>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

Object.assign(window, { CheckoutModal, CHECKOUT_CONFIG: CONFIG });