// ===== Elejemais — Onboarding wizard for new campaign =====

const { useState: useState_o, useMemo: useMemo_o } = React;

const STEPS = [
  { id: "candidato", titulo: "Quem é o candidato?", sub: "Comece com o básico — você poderá editar tudo depois." },
  { id: "tipo",      titulo: "Qual o tipo de campanha?", sub: "Isso define a esfera e o tipo de mapa que vamos usar." },
  { id: "local",     titulo: "Onde será disputada?", sub: "Município ou estado da disputa." },
  { id: "meta",      titulo: "Qual a meta de votos?", sub: "Calculamos automaticamente uma folga de 30% para garantir segurança." },
  { id: "revisao",   titulo: "Tudo pronto.", sub: "Confira antes de criar." },
];

function Onboarding({ onCancel, onCreate }) {
  const [step, setStep] = useState_o(0);
  const [data, setData] = useState_o({
    candidato: "",
    numero: "",
    coligacao: "",
    tipo: "vereador",
    cidade: "",
    uf: "MG",
    eleicaoData: "",
    metaVotos: 5000,
  });
  const metaSegura = useMemo_o(() => Math.round(data.metaVotos * 1.3), [data.metaVotos]);

  const valid = (() => {
    if (step === 0) return data.candidato.trim().length > 1;
    if (step === 1) return !!data.tipo;
    if (step === 2) return data.cidade.trim().length > 1;
    if (step === 3) return data.metaVotos > 0;
    return true;
  })();

  const next = () => {
    if (!valid) return;
    if (step === STEPS.length - 1) {
      onCreate({ ...data, metaSegura });
    } else {
      setStep(step + 1);
    }
  };

  return (
    <div className="onboarding fadein">
      <div className="onboarding__chrome">
        <button className="btn btn--ghost" onClick={onCancel}>
          <Icon.X size={14} /> Cancelar
        </button>
        <div className="row" style={{ gap: 6 }}>
          {STEPS.map((s, i) => (
            <div
              key={s.id}
              className={"obstep " + (i < step ? "is-done" : i === step ? "is-active" : "")}
              onClick={() => i < step && setStep(i)}
            >
              <span className="obstep__dot">{i < step ? <Icon.Check size={10} /> : i + 1}</span>
              <span className="obstep__label">{s.titulo.split("?")[0].split(".")[0]}</span>
            </div>
          ))}
        </div>
        <span className="dim mono" style={{ fontSize: 12 }}>
          {String(step + 1).padStart(2, "0")} / {String(STEPS.length).padStart(2, "0")}
        </span>
      </div>

      <div className="onboarding__body">
        <div className="onboarding__left">
          <div className="eyebrow">Nova campanha</div>
          <h1 className="serif" style={{ fontSize: 48, lineHeight: 1, margin: "12px 0 14px", letterSpacing: "-0.02em" }}>
            {STEPS[step].titulo}
          </h1>
          <p className="dim" style={{ fontSize: 15, maxWidth: 380, lineHeight: 1.55 }}>{STEPS[step].sub}</p>

          <div className="obform">
            {step === 0 && (
              <>
                <OBField label="Nome do candidato">
                  <input className="input" autoFocus placeholder="Ex: Mariana Salles"
                    value={data.candidato}
                    onChange={e => setData({ ...data, candidato: e.target.value })} />
                </OBField>
                <div className="row" style={{ gap: 12 }}>
                  <OBField label="Número da urna" style={{ flex: 1 }}>
                    <input className="input" placeholder="Ex: 45678"
                      value={data.numero}
                      onChange={e => setData({ ...data, numero: e.target.value })} />
                  </OBField>
                  <OBField label="Coligação ou partido" style={{ flex: 2 }}>
                    <input className="input" placeholder="Ex: Movimento Cidade Viva"
                      value={data.coligacao}
                      onChange={e => setData({ ...data, coligacao: e.target.value })} />
                  </OBField>
                </div>
              </>
            )}

            {step === 1 && (
              <div className="tipo-grid">
                {window.MockData.TIPOS_CAMPANHA.map(t => (
                  <button
                    key={t.id}
                    className={"tipo-card " + (data.tipo === t.id ? "is-selected" : "")}
                    onClick={() => setData({ ...data, tipo: t.id })}
                  >
                    <div className="eyebrow">{t.esfera}</div>
                    <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>{t.label}</div>
                    {data.tipo === t.id && <span className="tipo-card__check"><Icon.Check size={12} /></span>}
                  </button>
                ))}
              </div>
            )}

            {step === 2 && (
              <>
                <OBField label={(data.tipo === "vereador" || data.tipo === "prefeito") ? "Município" : "Abrangência"}>
                  <input className="input" autoFocus placeholder={data.tipo === "governador" ? "Estado de Sergipe" : "Ex: Aracaju"}
                    value={data.cidade}
                    onChange={e => setData({ ...data, cidade: e.target.value })} />
                </OBField>
                <div className="row" style={{ gap: 12 }}>
                  <OBField label="UF" style={{ flex: 1 }}>
                    <select className="select"
                      value={data.uf}
                      onChange={e => setData({ ...data, uf: e.target.value })}>
                      {["AC","AL","AP","AM","BA","CE","DF","ES","GO","MA","MT","MS","MG","PA","PB","PR","PE","PI","RJ","RN","RS","RO","RR","SC","SP","SE","TO"].map(u => (
                        <option key={u}>{u}</option>
                      ))}
                    </select>
                  </OBField>
                  <OBField label="Data da eleição" style={{ flex: 2 }}>
                    <input className="input" type="date"
                      value={data.eleicaoData}
                      onChange={e => setData({ ...data, eleicaoData: e.target.value })} />
                  </OBField>
                </div>
              </>
            )}

            {step === 3 && (
              <>
                <OBField label="Meta de votos">
                  <input
                    className="input" type="number" min={1} autoFocus
                    value={data.metaVotos}
                    onChange={e => setData({ ...data, metaVotos: parseInt(e.target.value || 0, 10) })}
                  />
                  <div className="help">A meta básica para se eleger, conforme sua projeção interna.</div>
                </OBField>

                <div className="metabox">
                  <div className="row" style={{ justifyContent: "space-between", marginBottom: 8 }}>
                    <span className="eyebrow">Meta de segurança (+30%)</span>
                    <span className="badge badge--accent">Calculado</span>
                  </div>
                  <div className="row" style={{ alignItems: "baseline", gap: 8 }}>
                    <span className="serif" style={{ fontSize: 56, lineHeight: 1, color: "var(--accent)" }}>
                      {window.fmt(metaSegura)}
                    </span>
                    <span className="dim">votos</span>
                  </div>
                  <div className="dim" style={{ fontSize: 12.5, marginTop: 10, lineHeight: 1.55 }}>
                    Adicionamos <strong style={{ color: "var(--ink-2)" }}>{window.fmt(metaSegura - data.metaVotos)}</strong> votos
                    de folga sobre sua meta de {window.fmt(data.metaVotos)} para absorver imprevistos: votos brancos,
                    apoiadores que faltam, ou aumento de quociente eleitoral.
                  </div>
                </div>
              </>
            )}

            {step === 4 && (
              <div className="review">
                <RevRow label="Candidato"   value={data.candidato || "—"} />
                <RevRow label="Número"      value={data.numero || "—"} />
                <RevRow label="Tipo"        value={window.tipoLabel(data.tipo)} />
                <RevRow label="Coligação"   value={data.coligacao || "—"} />
                <RevRow label="Local"       value={`${data.cidade}, ${data.uf}`} />
                <RevRow label="Eleição"     value={data.eleicaoData ? window.fmtDate(data.eleicaoData) : "—"} />
                <RevRow label="Meta legal"  value={`${window.fmt(data.metaVotos)} votos`} />
                <RevRow label="Meta + 30%"  value={`${window.fmt(metaSegura)} votos`} highlight />
              </div>
            )}
          </div>

          <div className="row" style={{ marginTop: 32, gap: 10 }}>
            {step > 0 && (
              <button className="btn" onClick={() => setStep(step - 1)}>Voltar</button>
            )}
            <button
              className="btn btn--primary btn--lg"
              disabled={!valid}
              style={!valid ? { opacity: 0.5, cursor: "not-allowed" } : null}
              onClick={next}
            >
              {step === STEPS.length - 1 ? <>Criar campanha <Icon.Check size={14} /></> : <>Continuar <Icon.Arrow size={14} /></>}
            </button>
            <span className="dim" style={{ fontSize: 12, marginLeft: 4 }}>
              ou pressione <span className="kbd">Enter</span>
            </span>
          </div>
        </div>

        <aside className="onboarding__preview">
          <div className="eyebrow">Pré-visualização</div>
          <div className="preview-card">
            <div className="campaign-card__stripe" style={{ background: "var(--accent)" }} />
            <div style={{ padding: 22 }}>
              <span className="badge badge--accent"><span className="badge--dot" /> rascunho</span>
              <div className="eyebrow" style={{ marginTop: 16 }}>{window.tipoLabel(data.tipo)}{data.numero ? ` · nº ${data.numero}` : ""}</div>
              <h3 className="serif" style={{ fontSize: 28, margin: "6px 0 4px", letterSpacing: "-0.01em" }}>
                {data.candidato || "Nome do candidato"}
              </h3>
              <div className="dim" style={{ fontSize: 13 }}>
                <Icon.Pin size={12} /> &nbsp;{data.cidade || "Município"}, {data.uf}
              </div>

              <div style={{ marginTop: 22 }}>
                <div className="dim" style={{ fontSize: 12, marginBottom: 6 }}>Meta + 30%</div>
                <div className="row" style={{ alignItems: "baseline", gap: 8 }}>
                  <span className="serif" style={{ fontSize: 32, lineHeight: 1, color: "var(--accent)" }}>
                    {window.fmt(metaSegura)}
                  </span>
                  <span className="dim" style={{ fontSize: 12 }}>de {window.fmt(data.metaVotos)} legais</span>
                </div>
                <div style={{ height: 5, background: "var(--surface-2)", borderRadius: 999, marginTop: 10 }}>
                  <div style={{ width: "0%", height: "100%", background: "var(--accent)", borderRadius: 999 }} />
                </div>
                <div className="dim mono" style={{ fontSize: 11, marginTop: 6 }}>0 apoiadores cadastrados</div>
              </div>
            </div>
          </div>

          <div className="tip">
            <Icon.Sparkle size={14} />
            <div>
              <strong>Dica:</strong> a meta de <strong>+30%</strong> é a referência usada pelos coordenadores
              em campo. Apoiadores acima da meta legal protegem contra perdas de última hora.
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function OBField({ label, children, style }) {
  return (
    <div className="field" style={style}>
      <label className="label">{label}</label>
      {children}
    </div>
  );
}

function RevRow({ label, value, highlight }) {
  return (
    <div className={"rev-row " + (highlight ? "is-h" : "")}>
      <span className="dim">{label}</span>
      <span className={highlight ? "serif" : ""} style={highlight ? { fontSize: 22, color: "var(--accent)" } : null}>
        {value}
      </span>
    </div>
  );
}

window.Onboarding = Onboarding;