/* ============================================================
   KeS Metas — COMPETIÇÃO
   Programação de competições da equipe: período (tempo), prêmio,
   quem participa, ranking ao vivo e ganhadores no encerramento.
   - Criar/editar/encerrar: admin e líder.
   - Todos os participantes veem o ranking e os prêmios.
   Os números vêm dos MESMOS indicadores do painel (KESM.userMetrics),
   então conta o que o usuário lança E o que o líder lança para ele.
   ============================================================ */
function CompeticaoScreen({ state, dispatch, viewer }) {
  const { useState } = React;
  const K = window.KES, KM = window.KESM;
  const hoje = K.iso(K.SIM_TODAY);
  const ehGestor = viewer.papel === "admin" || viewer.cargo === "lider";
  const usersById = {}; state.users.forEach((u) => { usersById[u.id] = u; });
  const competicoes = state.competicoes || [];

  const [modal, setModal] = useState(null);     // null | {} (nova) | competicao (editar)
  const [excluir, setExcluir] = useState(null); // competição a excluir
  const [encerrar, setEncerrar] = useState(null); // competição a encerrar

  const indicador = (key) => KM.INDICADORES.find((i) => i.key === key) || { rotulo: key, tipo: "num" };
  const fmtVal = (c, v) => indicador(c.metrica).tipo === "moeda" ? K.fmtMoeda(v) : K.fmtNum(v);

  function statusDe(c) {
    if (c.encerrada) return "encerrada";
    if (c.fim < hoje) return "encerrada";       // prazo acabou = encerrada (ganhadores pelo resultado final)
    if (c.inicio > hoje) return "programada";
    return "ativa";
  }
  function diasRestantes(c) {
    const fim = K.parseISO(c.fim), h = K.parseISO(hoje);
    return Math.max(0, Math.round((fim.getTime() - h.getTime()) / 86400000));
  }
  // Ranking da competição: indicador escolhido, no período dela, só participantes.
  function rankingDe(c) {
    const ids = (c.participantes && c.participantes.length ? c.participantes : state.users.filter((u) => u.cargo).map((u) => u.id));
    const p = { start: c.inicio, end: c.fim };
    return ids
      .map((uid) => ({ user: usersById[uid], val: (KM.userMetrics(state, uid, p)[c.metrica] || {}).realizado || 0 }))
      .filter((r) => r.user)
      .sort((a, b) => b.val - a.val);
  }
  // Vencedores: os congelados no encerramento manual, senão o ranking final.
  function vencedoresDe(c) {
    if (c.vencedores && c.vencedores.length) {
      return c.vencedores.map((v) => ({ user: usersById[v.userId] || { nome: v.nome || "—", cor: "#7C8794" }, val: v.valor }));
    }
    return rankingDe(c).slice(0, 3);
  }
  function confirmarEncerrar(c) {
    const top = rankingDe(c).slice(0, 3).map((r, i) => ({ userId: r.user.id, nome: r.user.nome, valor: r.val, posicao: i + 1 }));
    dispatch({ type: "UPDATE_COMPETICAO", id: c.id, patch: { encerrada: true, encerradaEm: hoje, vencedores: top } });
    dispatch({ type: "TOAST", msg: "Competição encerrada! 🏆 " + (top[0] ? top[0].nome + " venceu." : "") });
    setEncerrar(null);
  }

  const ordem = { ativa: 0, programada: 1, encerrada: 2 };
  const lista = competicoes.slice().sort((a, b) =>
    (ordem[statusDe(a)] - ordem[statusDe(b)]) || String(b.inicio).localeCompare(String(a.inicio)));

  const MEDALHAS = ["🥇", "🥈", "🥉"];

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl">
          <h1>Competição</h1>
          <p>Programação de competições da equipe: período, prêmio, participantes e ranking ao vivo.</p>
        </div>
        {ehGestor && (
          <div className="actions">
            <Btn variant="primary" size="sm" icon="plus" onClick={() => setModal({})}>Nova competição</Btn>
          </div>
        )}
      </div>

      {lista.length === 0 && (
        <div className="card">
          <div className="empty">
            <Icon name="trophy" size={40} />
            <div style={{ fontWeight: 700 }}>Nenhuma competição criada</div>
            <div style={{ fontSize: 13 }}>{ehGestor ? "Crie a primeira: escolha o indicador, o período, o prêmio e quem participa." : "Quando o líder criar uma competição, ela aparece aqui."}</div>
          </div>
        </div>
      )}

      <div style={{ display: "grid", gap: 16 }}>
        {lista.map((c) => {
          const st = statusDe(c);
          const rank = st === "encerrada" ? [] : rankingDe(c);
          const venc = st === "encerrada" ? vencedoresDe(c) : [];
          const ind = indicador(c.metrica);
          const dias = diasRestantes(c);
          const max = Math.max(1, ...(st === "encerrada" ? venc : rank).map((r) => r.val));
          const chip = st === "ativa"
            ? { txt: dias === 0 ? "Último dia!" : "Em andamento · faltam " + dias + " dia" + (dias === 1 ? "" : "s"), cor: "var(--ok)", bg: "rgba(43,182,115,.14)" }
            : st === "programada"
              ? { txt: "Começa em " + K.fmtBR(c.inicio), cor: "var(--warn)", bg: "rgba(242,169,59,.14)" }
              : { txt: "Encerrada", cor: "var(--fg3)", bg: "rgba(255,255,255,.07)" };
          return (
            <div key={c.id} className="card card-pad">
              {/* Cabeçalho da competição */}
              <div style={{ display: "flex", alignItems: "flex-start", gap: 12, flexWrap: "wrap" }}>
                <div className="mh-ico" style={{ width: 44, height: 44, flexShrink: 0 }}><Icon name="trophy" size={22} /></div>
                <div style={{ flex: 1, minWidth: 200 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
                    <span style={{ fontWeight: 800, fontSize: 17 }}>{c.nome}</span>
                    <span style={{ fontSize: 11.5, fontWeight: 800, color: chip.cor, background: chip.bg, padding: "3px 10px", borderRadius: 999 }}>{chip.txt}</span>
                  </div>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 4, display: "flex", gap: 14, flexWrap: "wrap" }}>
                    <span><Icon name="target" size={13} style={{ verticalAlign: "-2px" }} /> {ind.rotulo}</span>
                    <span><Icon name="calendar" size={13} style={{ verticalAlign: "-2px" }} /> {K.fmtBR(c.inicio)} → {K.fmtBR(c.fim)}</span>
                    <span><Icon name="users" size={13} style={{ verticalAlign: "-2px" }} /> {(c.participantes || []).length || "toda a equipe"} participante{((c.participantes || []).length || 2) === 1 ? "" : "s"}</span>
                  </div>
                </div>
                {ehGestor && (
                  <div style={{ display: "flex", gap: 6 }}>
                    {st === "ativa" && <Btn variant="subtle" size="sm" icon="check" onClick={() => setEncerrar(c)}>Encerrar</Btn>}
                    {st !== "encerrada" && <button className="iconbtn" title="Editar" onClick={() => setModal(c)}><Icon name="pencil" size={16} /></button>}
                    <button className="iconbtn" title="Excluir" onClick={() => setExcluir(c)} style={{ color: "var(--kes-red-400)" }}><Icon name="trash" size={16} /></button>
                  </div>
                )}
              </div>

              {/* Prêmio */}
              {c.premio && (
                <div style={{ marginTop: 12, padding: "10px 14px", background: "linear-gradient(135deg, rgba(224,60,49,.14), transparent)", border: "1px solid var(--kes-red-400)", borderRadius: "var(--radius-md)", display: "flex", gap: 9, alignItems: "center", fontSize: 14 }}>
                  <Icon name="sparkles" size={17} style={{ color: "var(--kes-red-400)" }} />
                  <span><strong>Prêmio:</strong> {typeof c.premio === "number" ? K.fmtMoeda(c.premio) : c.premio}</span>
                </div>
              )}

              {/* Ganhadores (encerrada) */}
              {st === "encerrada" && (
                <div style={{ marginTop: 14 }}>
                  <div className="eyebrow" style={{ fontSize: 10.5, marginBottom: 8 }}>🏆 Ganhadores</div>
                  {venc.length === 0 ? (
                    <p className="muted" style={{ fontSize: 13, margin: 0 }}>Sem lançamentos no período da competição.</p>
                  ) : (
                    <div style={{ display: "grid", gap: 7 }}>
                      {venc.map((r, i) => (
                        <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", background: i === 0 ? "rgba(242,169,59,.12)" : "var(--kes-navy-700)", borderRadius: "var(--radius-md)", border: i === 0 ? "1px solid var(--warn)" : "1px solid transparent" }}>
                          <span style={{ fontSize: 18 }}>{MEDALHAS[i] || (i + 1) + "º"}</span>
                          <Avatar user={r.user} size={30} />
                          <span style={{ fontWeight: i === 0 ? 800 : 600, flex: 1 }}>{r.user.nome}</span>
                          <span style={{ fontWeight: 800 }}>{fmtVal(c, r.val)}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* Ranking ao vivo (ativa/programada) */}
              {st !== "encerrada" && (
                <div style={{ marginTop: 14 }}>
                  <div className="eyebrow" style={{ fontSize: 10.5, marginBottom: 8 }}>{st === "programada" ? "Participantes" : "Ranking ao vivo"}</div>
                  <div style={{ display: "grid", gap: 6 }}>
                    {rank.map((r, i) => (
                      <div key={r.user.id} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                        <span style={{ width: 26, textAlign: "center", fontWeight: 800, fontSize: 13, color: i === 0 ? "var(--warn)" : "var(--fg3)" }}>{st === "ativa" ? (MEDALHAS[i] || (i + 1) + "º") : "•"}</span>
                        <Avatar user={r.user} size={28} />
                        <span style={{ fontSize: 13.5, fontWeight: r.user.id === viewer.id ? 800 : 600, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
                          {r.user.nome}{r.user.id === viewer.id ? " (você)" : ""}
                        </span>
                        <div style={{ flex: 1, height: 7, background: "var(--kes-navy-700)", borderRadius: 4, overflow: "hidden" }}>
                          {st === "ativa" && <i style={{ display: "block", height: "100%", width: Math.max(3, (r.val / max) * 100) + "%", background: i === 0 ? "var(--warn)" : "var(--kes-red-400)", borderRadius: 4 }} />}
                        </div>
                        {st === "ativa" && <span style={{ fontWeight: 800, fontSize: 13, minWidth: 60, textAlign: "right" }}>{fmtVal(c, r.val)}</span>}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* Modal criar/editar */}
      {modal && (
        <CompeticaoModal initial={modal.id ? modal : null} users={state.users} onClose={() => setModal(null)}
          onSave={(data) => {
            if (modal.id) {
              dispatch({ type: "UPDATE_COMPETICAO", id: modal.id, patch: data });
              dispatch({ type: "TOAST", msg: "Competição atualizada." });
            } else {
              dispatch({ type: "ADD_COMPETICAO", competicao: { id: "cp" + Date.now(), criadaPor: viewer.id, criadaEm: hoje, encerrada: false, vencedores: null, ...data } });
              dispatch({ type: "TOAST", msg: "Competição criada! 🏁" });
            }
            setModal(null);
          }} />
      )}

      {/* Confirmar encerramento (congela os ganhadores) */}
      {encerrar && (
        <Modal title="Encerrar competição" onClose={() => setEncerrar(null)}
          footer={<><Btn variant="ghost" onClick={() => setEncerrar(null)}>Cancelar</Btn>
            <Btn variant="primary" icon="trophy" onClick={() => confirmarEncerrar(encerrar)}>Encerrar e premiar</Btn></>}>
          <p style={{ margin: 0 }}>Encerrar <strong>{encerrar.nome}</strong> agora? O ranking atual vira o resultado final e os <strong>3 primeiros</strong> ficam registrados como ganhadores.</p>
        </Modal>
      )}

      {/* Confirmar exclusão */}
      {excluir && (
        <Modal title="Excluir competição" onClose={() => setExcluir(null)}
          footer={<><Btn variant="ghost" onClick={() => setExcluir(null)}>Cancelar</Btn>
            <Btn variant="danger" icon="trash" onClick={() => { dispatch({ type: "DELETE_COMPETICAO", id: excluir.id }); dispatch({ type: "TOAST", msg: "Competição excluída." }); setExcluir(null); }}>Excluir</Btn></>}>
          <p style={{ margin: 0 }}>Excluir <strong>{excluir.nome}</strong>? O histórico dela some da tela. <strong>Esta ação não pode ser desfeita.</strong></p>
        </Modal>
      )}
    </div>
  );
}

/* ---- Modal de criar/editar competição ---- */
function CompeticaoModal({ initial, users, onClose, onSave }) {
  const { useState } = React;
  const K = window.KES, KM = window.KESM;
  const hoje = K.iso(K.SIM_TODAY);
  const participaveis = users.filter((u) => u.cargo); // quem tem cargo comercial compete
  const [f, setF] = useState(initial ? {
    nome: initial.nome || "", metrica: initial.metrica || "vendas",
    inicio: initial.inicio || hoje, fim: initial.fim || hoje,
    premio: initial.premio || "", participantes: (initial.participantes || []).slice(),
  } : {
    nome: "", metrica: "vendas", inicio: hoje, fim: hoje, premio: "",
    participantes: participaveis.map((u) => u.id),   // padrão: todos com cargo
  });
  const set = (k, v) => setF((s) => ({ ...s, [k]: v }));
  const togglePart = (id) => set("participantes", f.participantes.includes(id)
    ? f.participantes.filter((x) => x !== id) : [...f.participantes, id]);
  const premioNum = Math.max(0, parseFloat(f.premio) || 0);
  const ok = f.nome.trim() && f.inicio && f.fim && f.fim >= f.inicio && premioNum > 0 && f.participantes.length >= 2;
  return (
    <Modal title={initial ? "Editar competição" : "Nova competição"} onClose={onClose} wide
      footer={<><Btn variant="ghost" onClick={onClose}>Cancelar</Btn>
        <Btn variant="primary" icon="trophy" disabled={!ok} onClick={() => onSave({ nome: f.nome.trim(), metrica: f.metrica, inicio: f.inicio, fim: f.fim, premio: premioNum, participantes: f.participantes })}>
          {initial ? "Salvar" : "Criar competição"}</Btn></>}>
      <Field label="Nome da competição" required>
        <input className="field" value={f.nome} onChange={(e) => set("nome", e.target.value)} placeholder="Ex.: Corrida de Vendas — Julho" />
      </Field>
      <div className="form-row">
        <Field label="Indicador da disputa" required hint="O ranking usa este número do painel">
          <select className="field" value={f.metrica} onChange={(e) => set("metrica", e.target.value)}>
            {KM.INDICADORES.map((i) => <option key={i.key} value={i.key}>{i.rotulo}</option>)}
          </select>
        </Field>
        <Field label="Prêmio (R$)" required hint="Valor em dinheiro que os ganhadores levam">
          <input type="number" min="0" className="field" value={f.premio} onChange={(e) => set("premio", e.target.value)} placeholder="500" />
        </Field>
      </div>
      <div className="form-row">
        <Field label="Início" required><input type="date" className="field" value={f.inicio} onChange={(e) => set("inicio", e.target.value)} /></Field>
        <Field label="Fim" required error={f.fim && f.fim < f.inicio ? "Fim antes do início" : null}>
          <input type="date" className="field" value={f.fim} min={f.inicio} onChange={(e) => set("fim", e.target.value)} />
        </Field>
      </div>
      <Field label={"Quem participa (" + f.participantes.length + ")"} required hint="Mínimo 2 pessoas">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {participaveis.map((u) => (
            <label key={u.id} style={{ display: "flex", gap: 9, alignItems: "center", fontSize: 13, cursor: "pointer", padding: "7px 10px", background: "var(--kes-navy-700)", borderRadius: "var(--radius-sm)", border: "1px solid " + (f.participantes.includes(u.id) ? "var(--kes-red-400)" : "transparent") }}>
              <input type="checkbox" checked={f.participantes.includes(u.id)} onChange={() => togglePart(u.id)} />
              <Avatar user={u} size={24} />
              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{u.nome}</span>
            </label>
          ))}
        </div>
      </Field>
      {participaveis.length < 2 && <p className="muted" style={{ fontSize: 12.5, margin: 0 }}>É preciso ter pelo menos 2 usuários com cargo comercial para competir.</p>}
    </Modal>
  );
}

window.CompeticaoScreen = CompeticaoScreen;