/* ============================================================
   Minha Jornada — Conteúdo de cada etapa
   Cada componente recebe { onComplete } para avançar a jornada.
   ============================================================ */

function Field({ label, req, hint, span, children }) {
  return (
    <div className={"field" + (span ? " col-span" : "")}>
      <label>{label}{req && <span className="req"> *</span>}</label>
      {children}
      {hint && <span className="hint">{hint}</span>}
    </div>
  );
}

/* ---------- 1. INSCRIÇÃO ----------
   Os name= dos campos batem com o objeto `form` esperado por
   SEIAdapter.montarCandidato (ver integracao-sei/sei-adapter.js). */
const cursoLabel = (c) => `${c.nome} · ${c.turno} (${c.vagas} vagas)`;

function StepInscricao({ onComplete }) {
  const formRef = React.useRef(null);
  const [cepStatus, setCepStatus] = React.useState(null); // null | 'loading' | 'ok' | 'erro'
  const [ibge, setIbge] = React.useState("");

  // Autocompletar endereço pelo CEP (ViaCEP). Traz também o código IBGE da cidade,
  // que é o que o SEI usa em cidade.codigoIBGE / naturalidade.
  async function buscarCEP(e) {
    const cep = (e.target.value || "").replace(/\D/g, "");
    if (cep.length !== 8) return;
    setCepStatus("loading");
    try {
      const r = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
      const d = await r.json();
      if (d.erro) { setCepStatus("erro"); return; }
      const set = (name, val) => { const el = formRef.current.elements[name]; if (el && val) el.value = val; };
      set("endereco", d.logradouro);
      set("bairro", d.bairro);
      set("cidadeNome", d.localidade);
      set("estadoSigla", d.uf);
      setIbge(d.ibge || "");
      setCepStatus("ok");
      formRef.current.elements["numero"]?.focus();
    } catch { setCepStatus("erro"); }
  }

  async function submit(e) {
    e.preventDefault();
    const fd = Object.fromEntries(new FormData(e.target));
    // Monta o objeto cidade no formato do SEI (codigoIBGE é a chave de resolução)
    const cidade = {
      codigo: "", codigoIBGE: ibge, codigoDistrito: "0",
      estado: { codigo: "", nome: "", sigla: fd.estadoSigla || "" },
      nome: fd.cidadeNome || "",
    };
    const formAdapter = { ...fd, cidade, naturalidade: cidade };
    // Constrói o VO real do candidato (prova de que a integração está plugada)
    if (window.SEIAdapter) {
      try {
        const base = await SEIAdapter.carregarTemplateCandidato();
        const vo = SEIAdapter.montarCandidato(formAdapter, base, 0);
        console.log("[Jornada] VO do candidato pronto p/ gravarCandidato:", vo);
      } catch (err) { console.warn("[Jornada] adaptador:", err); }
    }
    onComplete({ nome: fd.nome });
  }

  return (
    <form ref={formRef} onSubmit={submit}>
      <div className="note">
        <Icon name="info" size={20} />
        <span>Preencha com atenção. Esses dados vão para o seu cadastro oficial — você poderá revisar antes de enviar.</span>
      </div>

      <div className="fieldset-title">Dados pessoais</div>
      <div className="grid2">
        <Field label="Nome completo" req span><input name="nome" required placeholder="Como no documento" /></Field>
        <Field label="CPF" req><input name="cpf" required placeholder="000.000.000-00" /></Field>
        <Field label="Data de nascimento" req><input name="dataNasc" required type="date" /></Field>
        <Field label="Sexo" req>
          <select name="sexo" required><option value="">Selecione…</option><option value="M">Masculino</option><option value="F">Feminino</option></select>
        </Field>
        <Field label="Estado civil" req>
          <select name="estadoCivil" required>{ESTADOS_CIVIS.map(e => <option key={e.v} value={e.v}>{e.l}</option>)}</select>
        </Field>
        <Field label="Cor/Raça">
          <select name="corRaca"><option value="BR">Branca</option><option value="PR">Preta</option><option value="PA">Parda</option><option value="AM">Amarela</option><option value="IN">Indígena</option><option value="NI">Não informar</option></select>
        </Field>
        <Field label="E-mail" req><input name="email" required type="email" placeholder="voce@email.com" /></Field>
        <Field label="Celular" req><input name="celular" required placeholder="(00) 00000-0000" /></Field>
      </div>

      <div className="fieldset-title">Documento de identidade</div>
      <div className="grid3">
        <Field label="RG" req><input name="rg" required /></Field>
        <Field label="Órgão emissor" req><input name="orgaoEmissor" required placeholder="Ex: SSP" /></Field>
        <Field label="UF emissão" req><input name="estadoEmissaoRG" required placeholder="UF" /></Field>
      </div>

      <div className="fieldset-title">Filiação</div>
      <div className="grid2">
        <Field label="Nome da mãe" req span><input name="nomeMae" required /></Field>
        <Field label="Nome do pai"><input name="nomePai" /></Field>
      </div>

      <div className="fieldset-title">Endereço</div>
      <div className="grid3">
        <Field label="CEP" req hint={
          cepStatus === "loading" ? "Buscando endereço…" :
          cepStatus === "ok" ? "✓ Endereço preenchido" :
          cepStatus === "erro" ? "CEP não encontrado — preencha manualmente" :
          "Digite o CEP para preencher automático"
        }><input name="cep" required placeholder="00000-000" onBlur={buscarCEP} /></Field>
        <Field label="Cidade" req><input name="cidadeNome" required /></Field>
        <Field label="Estado" req><input name="estadoSigla" required placeholder="UF" /></Field>
        <Field label="Logradouro" span><input name="endereco" placeholder="Rua, avenida…" /></Field>
        <Field label="Número"><input name="numero" /></Field>
        <Field label="Bairro"><input name="bairro" /></Field>
      </div>

      <div className="fieldset-title">Formação (Ensino Médio)</div>
      <div className="grid2">
        <Field label="Escola onde concluiu / vai concluir" req><input name="escolaMedio" required /></Field>
        <Field label="Ano de conclusão" req><input name="anoConclusaoMedio" required placeholder="Ex: 2025" /></Field>
      </div>

      <div className="fieldset-title">Curso e forma de ingresso</div>
      <div className="grid2">
        <Field label="Curso (1ª opção)" req>
          <select name="cursoOpcao1" required>
            <option value="">Selecione um curso…</option>
            {CURSOS.map(c => <option key={c.id} value={c.id}>{cursoLabel(c)}</option>)}
          </select>
        </Field>
        <Field label="Curso (2ª opção)" hint="Opcional — caso não seja aprovado na 1ª">
          <select name="cursoOpcao2"><option value="">Nenhuma</option>{CURSOS.map(c => <option key={c.id} value={c.id}>{cursoLabel(c)}</option>)}</select>
        </Field>
        <Field label="Cota / forma de ingresso" req span>
          <select name="cota" required>
            <option value="">Selecione…</option>
            {COTAS.map(c => <option key={c.valor} value={c.valor}>{c.label}</option>)}
          </select>
        </Field>
      </div>

      <div className="form-actions">
        <button type="submit" className="btn btn--solid">Salvar e avançar <Icon name="arrow" size={18} className="arw" /></button>
      </div>
    </form>
  );
}

/* ---------- 0. BOAS-VINDAS (Visita) ---------- */
function StepVisita({ onComplete }) {
  return (
    <div>
      <div className="note">
        <Icon name="spark" size={20} />
        <span>Que bom ter você aqui! Assista ao recado da nossa <b>Diretora Geral</b> e comece sua jornada no <b>Vestibular 2026.2</b>. A cada etapa você avança rumo à sua vaga — acompanhando tudo em um só lugar.</span>
      </div>
      <div className="video-embed">
        <iframe
          src="https://www.youtube.com/embed/9vF7ENsSo4k?rel=0"
          title="Boas-vindas — Diretora Geral · Faculdade ESUP"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          allowFullScreen
        ></iframe>
      </div>
      <div className="form-actions">
        <button className="btn btn--solid" onClick={onComplete}>Começar minha inscrição <Icon name="arrow" size={18} className="arw" /></button>
      </div>
    </div>
  );
}

/* ---------- DOCUMENTOS (na matrícula) ---------- */
const DOCS = [
  { t: "Documento de identidade (RG/CNH)", s: "Frente e verso, legível", st: "ok" },
  { t: "Comprovante de residência", s: "Emitido nos últimos 90 dias", st: "ok" },
  { t: "Histórico / Certificado do Ensino Médio", s: "PDF ou foto nítida", st: "pending" },
  { t: "Comprovação da forma de ingresso", s: "Conforme a cota escolhida", st: "pending" },
];
function StepDocumentos({ onComplete }) {
  return (
    <div>
      <div className="note">
        <Icon name="info" size={20} />
        <span>Agora que você foi aprovado(a), envie os documentos para concluir a matrícula. Nossa equipe analisa cada um e avisa se algo precisar ser reenviado.</span>
      </div>
      {DOCS.map((d, i) => (
        <div key={i} className={"doc doc--" + (d.st === "ok" ? "ok" : "pending")}>
          <div className="doc__ic"><Icon name={d.st === "ok" ? "check" : "upload"} size={20} /></div>
          <div className="doc__tt"><b>{d.t}</b><span>{d.s}</span></div>
          <span className="doc__status" style={{ color: d.st === "ok" ? "var(--esup-teal)" : "var(--esup-amber)" }}>
            {d.st === "ok" ? "Enviado ✓" : "Pendente"}
          </span>
        </div>
      ))}
      <div className="form-actions">
        <button className="btn btn--solid" onClick={onComplete}>Concluir envio <Icon name="arrow" size={18} className="arw" /></button>
      </div>
    </div>
  );
}

/* ---------- PROVA (no portal de provas atual) ---------- */
function StepProva({ onComplete }) {
  return (
    <div>
      <div className="note note--gold">
        <Icon name="clock" size={20} />
        <span>A prova é feita no <b>portal de provas da ESUP</b>. Faça dentro do prazo do edital — depois é só voltar aqui para acompanhar o resultado.</span>
      </div>
      <div className="form-actions">
        <a className="btn btn--primary" href="https://sei.esup.edu.br/processoSeletivo/" target="_blank" rel="noopener noreferrer">Ir para a prova <Icon name="arrow" size={18} className="arw" /></a>
        <button className="btn btn--ghost" onClick={onComplete}>Já fiz a prova</button>
      </div>
    </div>
  );
}

/* ---------- 5. RESULTADO ---------- */
function StepResultado({ onComplete }) {
  return (
    <div className="result-card">
      <div className="seal"><Icon name="trophy" size={36} /></div>
      <h3>Parabéns, você foi aprovado(a)! 🎉</h3>
      <p>Você foi classificado(a) em <b>Administração · Noturno</b> (1ª opção).<br />Garanta sua vaga fazendo a matrícula.</p>
      <div className="form-actions" style={{ justifyContent: "center" }}>
        <button className="btn btn--primary" onClick={onComplete}>Fazer matrícula <Icon name="arrow" size={18} className="arw" /></button>
      </div>
    </div>
  );
}

/* ---------- MATRÍCULA (após aprovação) ---------- */
function StepMatricula({ onComplete }) {
  return (
    <div>
      <div className="note">
        <Icon name="info" size={20} />
        <span>Você foi aprovado(a)! 🎉 Confirme sua matrícula para garantir a vaga. Em seguida você envia os documentos e assina o contrato.</span>
      </div>
      <div className="form-actions">
        <button className="btn btn--primary" onClick={onComplete}>Confirmar matrícula <Icon name="arrow" size={18} className="arw" /></button>
      </div>
    </div>
  );
}

/* ---------- CONTRATO (assinatura digital) ---------- */
function StepContrato({ onComplete }) {
  return (
    <div>
      <div className="note">
        <Icon name="info" size={20} />
        <span>Último passo: assine o <b>contrato de matrícula</b> digitalmente (via Certisign). Rápido e seguro.</span>
      </div>
      <div className="doc">
        <div className="doc__ic" style={{ background: "rgba(30,198,232,.08)", color: "var(--esup-cyan)" }}><Icon name="doc" size={20} /></div>
        <div className="doc__tt"><b>Contrato de Matrícula · 2026.2</b><span>Leia e assine digitalmente</span></div>
      </div>
      <div className="form-actions">
        <button className="btn btn--primary" onClick={onComplete}>Assinar contrato <Icon name="arrow" size={18} className="arw" /></button>
      </div>
    </div>
  );
}

/* ---------- 7. PRONTO ---------- */
function StepPronto() {
  return (
    <div className="result-card">
      <div className="seal"><Icon name="seal" size={36} /></div>
      <h3>Matrícula concluída! Bem-vindo(a) à ESUP 🎓</h3>
      <p>Sua jornada de inscrição terminou. Em breve você recebe por e-mail os dados de acesso ao portal do aluno.</p>
      <div className="form-actions" style={{ justifyContent: "center" }}>
        <button className="btn btn--ghost"><Icon name="print" size={18} /> Baixar comprovante</button>
      </div>
    </div>
  );
}

const STEP_COMPONENTS = {
  visita: StepVisita,
  inscricao: StepInscricao,
  prova: StepProva,
  resultado: StepResultado,
  matricula: StepMatricula,
  documentos: StepDocumentos,
  contrato: StepContrato,
  pronto: StepPronto,
};
window.STEP_COMPONENTS = STEP_COMPONENTS;