// Sections for "Chamado dos Aventureiros" page

const { useState, useEffect, useMemo } = React;

// ---------- Form data ----------
const FORM_DATA = {
  faixa: ["Jovem", "Adulto", "Veterano"],
  raca: ["Humano", "Elfo", "Meio-Elfo", "Anão", "Meio-Dragão", "Demônio", "Outra raça"],
  classe: ["Cavaleiro", "Guerreiro", "Feiticeiro", "Arqueiro", "Mago", "Sacerdote", "Lanceiro", "Assassino", "Monge", "Bardo", "Druida", "Samurai"],
  arma: ["Espada", "Duas Espadas", "Espada de Duas Mãos", "Katana", "Duas Katanas", "Maça", "Lança", "Cajado", "Livro de Magias", "Orbe Mágico", "Cetro", "Manoplas", "Arco e Flecha", "Adagas Duplas", "Katar Dupla"],
  escudo: ["Sim", "Não"],
  elemento: [
    { name: "Fogo", glyph: "△" },
    { name: "Água", glyph: "▽" },
    { name: "Terra", glyph: "▽̄" },
    { name: "Vento", glyph: "△̄" },
    { name: "Raio Amarelo", glyph: "⚡" },
    { name: "Luz", glyph: "✦" },
    { name: "Escuridão", glyph: "✶" },
  ],
  tracos: ["Corajoso", "Frio e calculista", "Impulsivo", "Leal", "Cético", "Honrado", "Sarcástico", "Reservado", "Protetor", "Ambicioso"],
  passado: ["Órfão da guerra", "Ex-soldado", "Aprendiz renegado", "Sobrevivente de uma tragédia", "Herdeiro relutante", "Criado pela guilda", "Passado desconhecido"],
  proposito: ["Redenção", "Glória", "Vingança", "Proteção de alguém ou algo", "Busca por conhecimento", "Dever com o reino", "Sobrevivência acima de tudo"],
  ligacao: [
    "A Guilda dos Aventureiros",
    "A Ordem dos Cavaleiros da Chama Sagrada",
    "A Catedral dos 7 Elementos",
    "Aliança da Rosa Prateada",
    "Um aventureiro lendário (indiretamente)",
    "Um grande evento histórico do reino",
    "Nenhuma ligação conhecida",
  ],
};

const EMPTY_FORM = {
  nome: "",
  faixa: "",
  raca: "",
  classe: "",
  arma: "",
  escudo: "",
  elemento: "",
  tracos: [],
  passado: "",
  proposito: "",
  ligacao: [],
  termos: false,
};

// ---------- Hero ----------
function ChamadoHero() {
  return (
    <section className="chapter-hero chamado-hero">
      <div className="chapter-hero-bg" />
      <window.EmberCanvas intensity={0.7} />

      <div className="chapter-hero-inner reveal">
        <div className="chapter-eyebrow">
          <span className="line" />
          <span className="eyebrow">Pergaminho · Os Recrutados</span>
          <span className="line" />
        </div>

        <h1 className="chapter-title">
          Chamado dos<br />
          <span className="em">Aventureiros</span>
        </h1>

        <p className="chapter-lede">
          Bem-vindo ao <em>Chamado dos Aventureiros</em>. Este pergaminho permite que leitores inspirem a criação de um aventureiro dentro do universo de O Legado do Fogo.
        </p>

        <p className="chapter-sub">
          As respostas enviadas serão tratadas como inspirações criativas. A criação final do personagem — sua história, habilidades e papel no universo — pertence ao autor da obra. Nem todos os aventureiros serão escolhidos. Mas alguns… poderão entrar para a história.
        </p>

        <div className="chapter-breadcrumbs">
          <a href="index.html">Início</a>
          <span className="sep">/</span>
          <span className="current">Chamado dos Aventureiros</span>
        </div>
      </div>

      <div className="scroll-hint">
        <span>Atenda ao chamado</span>
        <span className="line" />
      </div>
    </section>
  );
}

// ---------- Field primitives ----------
function FieldHeader({ num, title, hint, of }) {
  return (
    <div className="field-header">
      <div className="field-num">
        <span>{num}</span>
        {of && <span className="of">/ {of}</span>}
      </div>
      <div>
        <h3 className="field-title">{title}</h3>
        {hint && <p className="field-hint">{hint}</p>}
      </div>
    </div>
  );
}

function TextField({ value, onChange, placeholder, maxLength = 80 }) {
  return (
    <div className="text-field">
      <input
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        maxLength={maxLength}
      />
      <span className="text-field-rule" />
    </div>
  );
}

function RadioGroup({ name, options, value, onChange, columns = 2, renderOption }) {
  return (
    <div className="opt-grid" style={{ "--opt-cols": columns }}>
      {options.map((opt) => {
        const optValue = typeof opt === "string" ? opt : opt.name;
        const checked = value === optValue;
        return (
          <label key={optValue} className={"opt opt-radio" + (checked ? " checked" : "")}>
            <input
              type="radio"
              name={name}
              value={optValue}
              checked={checked}
              onChange={() => onChange(optValue)}
            />
            <span className="opt-mark" aria-hidden="true">
              <span className="diamond" />
            </span>
            <span className="opt-label">
              {renderOption ? renderOption(opt) : optValue}
            </span>
          </label>
        );
      })}
    </div>
  );
}

function CheckboxGroup({ options, value, onChange, max, columns = 2 }) {
  const count = value.length;
  const atMax = max != null && count >= max;
  const toggle = (opt) => {
    if (value.includes(opt)) onChange(value.filter((v) => v !== opt));
    else if (!atMax) onChange([...value, opt]);
  };
  return (
    <>
      {max != null && (
        <div className="opt-counter">
          <span className="counter-pill">
            <span>Selecionados</span>
            <strong>{count}</strong>
            <span>de até {max}</span>
          </span>
        </div>
      )}
      <div className="opt-grid" style={{ "--opt-cols": columns }}>
        {options.map((opt) => {
          const checked = value.includes(opt);
          const disabled = !checked && atMax;
          return (
            <label
              key={opt}
              className={"opt opt-check" + (checked ? " checked" : "") + (disabled ? " disabled" : "")}
            >
              <input
                type="checkbox"
                checked={checked}
                disabled={disabled}
                onChange={() => toggle(opt)}
              />
              <span className="opt-mark" aria-hidden="true">
                <span className="cross" />
              </span>
              <span className="opt-label">{opt}</span>
            </label>
          );
        })}
      </div>
    </>
  );
}

// ---------- Form sections ----------
function FormStep({ romanIndex, kicker, title, children }) {
  return (
    <section className="form-step">
      <div className="step-head">
        <div className="step-roman" aria-hidden="true">{romanIndex}</div>
        <div className="step-meta">
          <div className="step-kicker">{kicker}</div>
          <h2 className="step-title">{title}</h2>
        </div>
        <div className="step-rule" />
      </div>
      <div className="step-fields">{children}</div>
    </section>
  );
}

// ---------- The Form ----------
function ChamadoForm() {
  const [form, setForm] = useState(() => {
    try {
      const saved = JSON.parse(localStorage.getItem("oldf-chamado") || "null");
      return saved && typeof saved === "object" ? { ...EMPTY_FORM, ...saved } : EMPTY_FORM;
    } catch { return EMPTY_FORM; }
  });
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    localStorage.setItem("oldf-chamado", JSON.stringify(form));
  }, [form]);

  const set = (k) => (v) => { setForm((f) => ({ ...f, [k]: v })); setError(null); };

  const requiredFields = [
    ["nome", "Nome do Aventureiro"],
    ["faixa", "Faixa Etária"],
    ["raca", "Raça"],
    ["classe", "Classe"],
    ["arma", "Arma"],
    ["escudo", "Escudo"],
    ["elemento", "Elemento Principal"],
    ["passado", "Arquétipo de Passado"],
    ["proposito", "Propósito"],
  ];

  const scrollToField = (k) => {
    const el = document.querySelector(`[data-field="${k}"]`);
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const y = window.scrollY + rect.top - 120;
    window.scrollTo({ top: y, behavior: "smooth" });
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    for (const [k, label] of requiredFields) {
      if (!form[k] || (Array.isArray(form[k]) && form[k].length === 0)) {
        setError(`Preencha: ${label}`);
        scrollToField(k);
        return;
      }
    }
    if (form.tracos.length === 0) {
      setError("Escolha pelo menos um traço de personalidade.");
      scrollToField("tracos");
      return;
    }
    if (!form.termos) {
      setError("Você precisa concordar com os termos de participação.");
      scrollToField("termos");
      return;
    }

    setError(null);
    setSubmitting(true);

    const email = window.CHAMADO_EMAIL || "olegadodofogooficial@gmail.com";
    const payload = {
      _subject: `🔥 Novo Chamado — ${form.nome || "Aventureiro sem nome"}`,
      _template: "table",
      _captcha: "false",
      "Nome do Aventureiro": form.nome,
      "Faixa Etária": form.faixa,
      "Raça": form.raca,
      "Classe": form.classe,
      "Arma": form.arma,
      "Usará escudo": form.escudo,
      "Elemento Principal": form.elemento,
      "Traços de Personalidade": form.tracos.join(" · "),
      "Arquétipo de Passado": form.passado,
      "Propósito": form.proposito,
      "Ligações com o Mundo": form.ligacao.length ? form.ligacao.join(" · ") : "—",
      "Termos aceitos": form.termos ? "Sim" : "Não",
      "Enviado em": new Date().toLocaleString("pt-BR"),
    };

    try {
      const res = await fetch(`https://formsubmit.co/ajax/${encodeURIComponent(email)}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || (data && data.success === "false")) {
        throw new Error((data && data.message) || "Falha ao enviar o chamado.");
      }
      setSubmitted(true);
      window.scrollTo({ top: 0, behavior: "smooth" });
    } catch (err) {
      setError(
        "Não foi possível enviar o pergaminho agora. Verifique sua conexão e tente novamente."
      );
      console.error("[Chamado] submit failed:", err);
    } finally {
      setSubmitting(false);
    }
  };

  const onReset = () => {
    if (!confirm("Tem certeza? Isso apagará todas as respostas atuais.")) return;
    setForm(EMPTY_FORM);
    localStorage.removeItem("oldf-chamado");
    setSubmitted(false);
    setError(null);
  };

  if (submitted) {
    return <ChamadoConfirm form={form} onAnother={onReset} />;
  }

  return (
    <form className="chamado-form" onSubmit={onSubmit} noValidate>
      {/* Step I */}
      <FormStep romanIndex="I" kicker="Pergaminho · 01" title="Identidade do Aventureiro">
        <div className="field" data-field="nome">
          <FieldHeader num="01" title="Nome do Aventureiro" hint="O batismo do aventureiro — o nome poderá ser adaptado para se adequar ao universo." />
          <TextField value={form.nome} onChange={set("nome")} placeholder="Ex.: Aelric Mãos-de-Brasa" />
        </div>

        <div className="field" data-field="faixa">
          <FieldHeader num="02" title="Faixa Etária" hint="Em que ponto da vida o aventureiro se encontra?" />
          <RadioGroup name="faixa" options={FORM_DATA.faixa} value={form.faixa} onChange={set("faixa")} columns={3} />
        </div>

        <div className="field" data-field="raca">
          <FieldHeader num="03" title="Raça" hint="Você pode ajustar a raça conforme o universo." />
          <RadioGroup name="raca" options={FORM_DATA.raca} value={form.raca} onChange={set("raca")} columns={3} />
        </div>
      </FormStep>

      {/* Step II */}
      <FormStep romanIndex="II" kicker="Pergaminho · 02" title="Caminho de Combate">
        <div className="field" data-field="classe">
          <FieldHeader num="04" title="Classe" />
          <RadioGroup name="classe" options={FORM_DATA.classe} value={form.classe} onChange={set("classe")} columns={3} />
        </div>

        <div className="field" data-field="arma">
          <FieldHeader num="05" title="Arma Principal" hint="Escolha apenas uma arma. As demais poderão ser definidas pelo autor." />
          <RadioGroup name="arma" options={FORM_DATA.arma} value={form.arma} onChange={set("arma")} columns={3} />
        </div>

        <div className="field" data-field="escudo">
          <FieldHeader num="06" title="Usará escudo?" />
          <RadioGroup name="escudo" options={FORM_DATA.escudo} value={form.escudo} onChange={set("escudo")} columns={2} />
        </div>

        <div className="field" data-field="elemento">
          <FieldHeader num="07" title="Elemento Principal" hint="Escolha apenas UM. Elementos avançados ou superiores serão definidos pelo autor, se aplicável." />
          <RadioGroup
            name="elemento"
            options={FORM_DATA.elemento}
            value={form.elemento}
            onChange={set("elemento")}
            columns={4}
            renderOption={(o) => (
              <span className="elem-opt">
                <span className="elem-glyph">{o.glyph}</span>
                <span>{o.name}</span>
              </span>
            )}
          />
        </div>
      </FormStep>

      {/* Step III */}
      <FormStep romanIndex="III" kicker="Pergaminho · 03" title="Essência do Personagem">
        <div className="field" data-field="tracos">
          <FieldHeader num="08" title="Traços de Personalidade" hint="Selecione até 3 traços que melhor descrevem o aventureiro." />
          <CheckboxGroup options={FORM_DATA.tracos} value={form.tracos} onChange={set("tracos")} max={3} columns={3} />
        </div>

        <div className="field" data-field="passado">
          <FieldHeader num="09" title="Arquétipo de Passado" />
          <RadioGroup name="passado" options={FORM_DATA.passado} value={form.passado} onChange={set("passado")} columns={2} />
        </div>

        <div className="field" data-field="proposito">
          <FieldHeader num="10" title="Propósito / Objetivo de Vida" />
          <RadioGroup name="proposito" options={FORM_DATA.proposito} value={form.proposito} onChange={set("proposito")} columns={2} />
        </div>
      </FormStep>

      {/* Step IV */}
      <FormStep romanIndex="IV" kicker="Pergaminho · 04" title="Ligação com o Mundo">
        <div className="field" data-field="ligacao">
          <FieldHeader
            num="11"
            title="Seu aventureiro já teve contato com…"
            hint="Opcional. Ligações diretas com personagens principais serão definidas pelo autor, se aplicável."
          />
          <CheckboxGroup options={FORM_DATA.ligacao} value={form.ligacao} onChange={set("ligacao")} columns={2} />
        </div>
      </FormStep>

      {/* Step V */}
      <FormStep romanIndex="V" kicker="Pergaminho · 05" title="Consentimento Criativo">
        <div className="field" data-field="termos">
          <div className="consent-card">
            <div className="consent-mark">⚜</div>
            <div className="consent-body">
              <h4>Termos de Participação</h4>
              <ul>
                <li>Minhas respostas são <em>inspirações criativas</em>.</li>
                <li>O personagem final é criação do universo <em>O Legado do Fogo</em>.</li>
                <li>Não há coautoria, vínculo comercial ou direito sobre a obra.</li>
                <li>O nome sugerido pode ser adaptado.</li>
              </ul>
              <label className={"consent-toggle" + (form.termos ? " checked" : "")}>
                <input
                  type="checkbox"
                  checked={form.termos}
                  onChange={(e) => set("termos")(e.target.checked)}
                />
                <span className="opt-mark"><span className="cross" /></span>
                <span>Li e concordo com os termos acima.</span>
              </label>
            </div>
          </div>
        </div>
      </FormStep>

      {error && (
        <div className="form-error reveal in" role="alert">
          <span className="dot">⚠</span> {error}
        </div>
      )}

      <div className="form-actions">
        <button type="button" className="btn btn-ghost" onClick={onReset} disabled={submitting}>
          <span className="arrow">↺</span> Limpar pergaminho
        </button>
        <button type="submit" className="btn btn-primary btn-large" disabled={submitting}>
          {submitting ? (
            <>Selando o pergaminho<span className="sending-dots" aria-hidden="true"><i /><i /><i /></span></>
          ) : (
            <>Selar e enviar <span className="arrow">→</span></>
          )}
        </button>
      </div>

      <p className="form-foot">
        Suas respostas ficam salvas localmente no seu navegador enquanto você preenche. Ao enviar, o pergaminho é selado.
      </p>
    </form>
  );
}

// ---------- Confirmation ----------
function ChamadoConfirm({ form, onAnother }) {
  return (
    <section className="chamado-confirm">
      <div className="confirm-rule" />
      <div className="confirm-seal" aria-hidden="true">
        <svg viewBox="0 0 120 120" width="120" height="120">
          <circle cx="60" cy="60" r="56" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.5" />
          <circle cx="60" cy="60" r="48" fill="none" stroke="currentColor" strokeWidth="1.5" />
          <path d="M60 24 L72 50 L100 54 L80 74 L86 102 L60 88 L34 102 L40 74 L20 54 L48 50 Z" fill="currentColor" opacity="0.15" stroke="currentColor" strokeWidth="1" />
          <text x="60" y="66" textAnchor="middle" fontFamily="Cinzel, serif" fontSize="18" fontWeight="700" fill="currentColor">⚜</text>
        </svg>
      </div>

      <div className="confirm-eyebrow">
        <span className="line" />
        <span className="eyebrow">Pergaminho · Selado</span>
        <span className="line" />
      </div>

      <h2 className="confirm-title">O Chamado foi atendido</h2>

      <p className="confirm-body">
        Caso seu aventureiro seja escolhido para avançar, o anúncio será feito pelos canais oficiais de <em>O Legado do Fogo</em>.
      </p>
      <p className="confirm-blessing">
        Que a chama guie seu caminho.
      </p>

      <div className="confirm-card">
        <div className="confirm-card-head">
          <span>Resumo do aventureiro</span>
          <span className="dot">·</span>
          <span>Inspiração registrada</span>
        </div>
        <dl className="confirm-summary">
          <SummaryRow label="Nome" value={form.nome || "—"} />
          <SummaryRow label="Faixa" value={form.faixa} />
          <SummaryRow label="Raça" value={form.raca} />
          <SummaryRow label="Classe" value={form.classe} />
          <SummaryRow label="Arma" value={form.arma} />
          <SummaryRow label="Escudo" value={form.escudo} />
          <SummaryRow label="Elemento" value={form.elemento} />
          <SummaryRow label="Traços" value={form.tracos.join(" · ") || "—"} />
          <SummaryRow label="Passado" value={form.passado} />
          <SummaryRow label="Propósito" value={form.proposito} />
          {form.ligacao.length > 0 && <SummaryRow label="Ligações" value={form.ligacao.join(" · ")} />}
        </dl>
      </div>

      <div className="confirm-actions">
        <a href="index.html" className="btn btn-ghost">
          <span className="arrow">←</span> Voltar ao início
        </a>
        <button type="button" className="btn btn-primary" onClick={onAnother}>
          Enviar outro chamado <span className="arrow">→</span>
        </button>
      </div>
    </section>
  );
}

function SummaryRow({ label, value }) {
  return (
    <div className="summary-row">
      <dt>{label}</dt>
      <dd>{value || "—"}</dd>
    </div>
  );
}

// ---------- Wrapper ----------
function ChamadoBody() {
  return (
    <section className="chamado-body">
      <ChamadoForm />
    </section>
  );
}

Object.assign(window, { ChamadoHero, ChamadoBody });