/* ============================================================
   KeS Metas — Painel (Dashboard) do usuário / equipe
   ============================================================ */
const { useState, useEffect } = React;
const KESM_ = window.KESM;

function fonteLabel(fonte) {
  if (fonte === "usuario") return { txt: "Preenchido por você", icon: "user" };
  if (fonte === "admin") return { txt: "Preenchido pelo admin", icon: "lock" };
  return { txt: "Automático · Google Agenda", icon: "calendarCheck" };
}

/* ---- Cartão de META (topo) ---- */
function GoalCard({ rotulo, periodMeta, base }) {
  return (
    <div className="goal-card">
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div className="gc-ico"><Icon name="target" size={22} /></div>
        <span className="eyebrow" style={{ fontSize: 10 }}>Meta</span>
      </div>
      <div>
        <div className="gc-lbl">{rotulo}</div>
        <div className="gc-val" style={{ marginTop: 7 }}>{periodMeta}</div>
      </div>
      <div className="gc-sub">{base} · no período</div>
    </div>
  );
}

/* ---- Cartão de INDICADOR (realizado x meta) ---- */
function MetricCard({ ind, data, canEdit, onEdit }) {
  const K = window.KES;
  const pct = Math.round(data.pct);
  const tone = window.tonePct(data.pct);
  const f = fonteLabel(ind.fonte);
  const valTxt = ind.tipo === "moeda" ? K.fmtMoeda(data.realizado) : K.fmtNum(data.realizado);
  const metaTxt = ind.tipo === "moeda" ? K.fmtMoeda(data.meta) : K.fmtNum(data.meta);
  return (
    <div className="metric-card">
      <div className="metric-head">
        <div className="mh-l">
          <div className="mh-ico"><Icon name={ind.icon} size={18} /></div>
          <div className="mh-name">{ind.rotulo}</div>
        </div>
        {ind.fonte === "auto" ? (
          <span className="metric-lock" title="Atualizado automaticamente pelos agendamentos"><Icon name="lock" size={14} /></span>
        ) : canEdit ? (
          <button className="mh-edit" title="Editar" onClick={onEdit}><Icon name="pencil" size={15} /></button>
        ) : (
          <span className="metric-lock" title="Somente leitura"><Icon name="lock" size={14} /></span>
        )}
      </div>
      <div className="metric-val">
        <span className="mv">{valTxt}</span>
        <span className="mt">/ {metaTxt}</span>
        <span className={"metric-pct tone-" + tone}>{pct}%</span>
      </div>
      <Progress pct={data.pct} />
      <div className="metric-foot">
        <span className="src"><Icon name={f.icon} size={13} />{f.txt}</span>
        <Badge tone={tone === "ok" ? "ok" : tone === "warn" ? "warn" : "bad"}>
          {tone === "ok" ? "Meta batida" : tone === "warn" ? "Quase lá" : "Abaixo"}
        </Badge>
      </div>
    </div>
  );
}

/* ---- Modal: registrar atividade do dia ---- */
function RegisterModal({ subjectUser, editableKeys, state, dispatch, onClose }) {
  const K = window.KES;
  const todayISO = K.iso(K.SIM_TODAY);
  const [date, setDate] = useState(todayISO);
  const existing = state.activities.find((a) => a.userId === subjectUser.id && a.date === date) || {};
  const [vals, setVals] = useState({});
  // recarrega valores quando muda a data
  useEffect(() => {
    const ex = state.activities.find((a) => a.userId === subjectUser.id && a.date === date) || {};
    const v = {};
    editableKeys.forEach((k) => { v[k] = ex[k] != null ? ex[k] : ""; });
    setVals(v);
  }, [date]);

  const labels = {
    ligacoes: "Ligações realizadas", conexoes: "Conexões feitas",
    reunioesRealizadas: "Reuniões realizadas", reunioesQualificadas: "Reuniões qualificadas",
    vendas: "Vendas realizadas", valorVendas: "Valor das vendas (R$)",
  };
  function save() {
    const patch = {};
    editableKeys.forEach((k) => { patch[k] = Math.max(0, parseInt(vals[k], 10) || 0); });
    // // AQUI: integrar com backend/banco de dados (persistir atividade)
    dispatch({ type: "UPSERT_ACTIVITY", userId: subjectUser.id, date, patch });
    onClose(`Atividade de ${K.fmtBR(date)} registrada.`);
  }
  return (
    <Modal title="Registrar atividade do dia" onClose={() => onClose()}
      footer={<><Btn variant="ghost" onClick={() => onClose()}>Cancelar</Btn><Btn variant="primary" icon="check" onClick={save}>Salvar</Btn></>}>
      <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "10px 13px", background: "var(--kes-navy-700)", borderRadius: "var(--radius-md)" }}>
        <Avatar user={subjectUser} size={34} />
        <div><div style={{ fontWeight: 700, fontSize: 13.5 }}>{subjectUser.nome}</div><div style={{ fontSize: 11.5, color: "var(--fg3)" }}>Lançamento diário de atividade</div></div>
      </div>
      <Field label="Data">
        <input type="date" className="field" value={date} max={todayISO} onChange={(e) => setDate(e.target.value)} />
      </Field>
      <div className="form-row">
        {editableKeys.map((k) => (
          <Field key={k} label={labels[k]}>
            <input type="number" min="0" className="field" value={vals[k] ?? ""} placeholder="0"
              onChange={(e) => setVals((s) => ({ ...s, [k]: e.target.value }))} />
          </Field>
        ))}
      </div>
      <p className="muted" style={{ fontSize: 12, margin: 0, display: "flex", gap: 7, alignItems: "center" }}>
        <Icon name="calendarCheck" size={14} /> "Reuniões Agendadas" é calculado automaticamente pelos agendamentos.
      </p>
    </Modal>
  );
}

/* ---- Ranking / Competição da equipe (leaderboard por pessoa) ---- */
function RankingChart({ state, userIds, metricKey, period, hideNumbers, highlightId }) {
  const K = window.KES, KM = window.KESM;
  const usersById = {}; state.users.forEach((u) => { usersById[u.id] = u; });
  const ind = KM.INDICADORES.find((i) => i.key === metricKey);
  const fmt = ind && ind.tipo === "moeda" ? K.fmtMoeda : K.fmtNum;
  const rows = userIds.map((uid) => {
    const m = KM.userMetrics(state, uid, period)[metricKey];
    return { user: usersById[uid], val: m.realizado, pct: m.pct };
  }).filter((r) => r.user).sort((a, b) => b.val - a.val);
  const max = Math.max(1, ...rows.map((r) => r.val));
  return (
    <div className="rank-list">
      {rows.map((r, i) => {
        const tone = window.tonePct(r.pct);
        const me = r.user.id === highlightId;
        return (
          <div key={r.user.id} className={"rank-row" + (i === 0 ? " leader" : "") + (me ? " me" : "")}>
            <div className="rank-pos">{i === 0 ? <Icon name="trophy" size={16} /> : (i + 1) + "º"}</div>
            <Avatar user={r.user} size={32} />
            <div className="rank-meta">
              <div className="rank-name">
                <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.user.nome}</span>
                {me && <span className="badge badge-role" style={{ flexShrink: 0 }}>Você</span>}
                {!hideNumbers && <span className={"tone-" + tone} style={{ marginLeft: "auto", fontWeight: 800, fontSize: 12.5 }}>{Math.round(r.pct)}%</span>}
              </div>
              <div className="rank-track"><i className={hideNumbers ? "bar-brand" : "bar-" + tone} style={{ width: Math.max(3, (r.val / max) * 100) + "%" }} /></div>
            </div>
            {!hideNumbers && <div className="rank-val">{fmt(r.val)}</div>}
          </div>
        );
      })}
    </div>
  );
}

/* ---- Tela principal ---- */
function DashboardScreen({ state, dispatch, viewer, subject, extraActions }) {
  const K = window.KES, KM = window.KESM;
  const [chartKey, setChartKey] = useState("ligacoes");
  const [chartMode, setChartMode] = useState("rank");
  const [reg, setReg] = useState(false);

  const metrics = subject.isTeam
    ? KM.teamMetrics(state, subject.userIds, state.period)
    : KM.userMetrics(state, subject.user.id, state.period);

  // chaves que o viewer pode editar para este subject
  let editableKeys = [];
  if (!subject.isTeam) {
    if (viewer.papel === "admin") editableKeys = ["ligacoes", "conexoes", "reunioesRealizadas", "reunioesQualificadas", "vendas", "valorVendas"];
    else if (subject.user.id === viewer.id) editableKeys = ["ligacoes", "conexoes"];
  }

  const goalDefs = [
    { key: "ligacoes", rotulo: "Meta de Ligações" },
    { key: "reunioesRealizadas", rotulo: "Meta de Reuniões Realizadas" },
    { key: "reunioesQualificadas", rotulo: "Meta de Reuniões Qualificadas" },
    { key: "vendas", rotulo: "Meta de Vendas" },
  ];
  const baseTxt = (key) => {
    const m = state.metas[key];
    return m.unidade === "dia" ? `${K.fmtNum(m.alvo)} / dia útil` : `${K.fmtNum(m.alvo)} / mês`;
  };

  const chartTabs = [
    ["ligacoes", "Ligações"], ["conexoes", "Conexões"], ["reunioesAgendadas", "Reuniões agend."],
    ["reunioesRealizadas", "Reuniões realiz."], ["reunioesQualificadas", "Reuniões qualif."], ["vendas", "Vendas"],
  ];
  const chartLbl = (chartTabs.find(([k]) => k === chartKey) || ["", ""])[1];
  const canRank = subject.isTeam || viewer.papel === "comum";
  const effMode = canRank ? chartMode : "evo";
  const rankIds = subject.isTeam ? subject.userIds : state.users.map((u) => u.id);
  const rankHideNumbers = !subject.isTeam; // usuário comum vê só posições
  const series = KM.dailySeries(state, subject.userIds, chartKey, state.period);
  const targetLine = KM.dailyTargetFor(state, chartKey, subject.userIds.length);
  const overall = Math.round(KM.overallPct(metrics));

  const greeting = subject.isTeam ? "Visão da Equipe" : (subject.user.id === viewer.id ? `Olá, ${viewer.nome.split(" ")[0]}` : subject.user.nome);

  return (
    <div className="content">
      <div className="topbar">
        <div className="ttl">
          <h1>{greeting}</h1>
          <p>{subject.isTeam ? `${subject.userIds.length} pessoas · ` : ""}Atingimento médio do período: <strong style={{ color: "var(--fg1)" }}>{overall}%</strong></p>
        </div>
        <div className="actions">
          {extraActions}
          <PeriodFilter value={state.period} onChange={(p) => dispatch({ type: "SET_PERIOD", period: p })} />
          {!subject.isTeam && editableKeys.length > 0 && (
            <Btn variant="primary" size="sm" icon="plus" onClick={() => setReg(true)}>Registrar dia</Btn>
          )}
        </div>
      </div>

      {/* Metas */}
      <div className="goals-grid">
        {goalDefs.map((g) => (
          <GoalCard key={g.key} rotulo={g.rotulo} base={baseTxt(g.key)}
            periodMeta={metrics[g.key].meta.toLocaleString("pt-BR")} />
        ))}
      </div>

      {/* Indicadores */}
      <div className="section-label">
        <span className="eyebrow">Indicadores de realização</span>
        <span className="rule" />
      </div>
      <div className="metrics-grid">
        {KM.INDICADORES.map((ind) => (
          <MetricCard key={ind.key} ind={ind} data={metrics[ind.key]}
            canEdit={editableKeys.includes(ind.key)}
            onEdit={() => setReg(ind.key)} />
        ))}
      </div>

      {/* Gráfico */}
      <div className="section-label">
        <span className="eyebrow">{effMode === "rank" ? "Competição da equipe" : "Evolução no período"}</span>
        <span className="rule" />
      </div>
      <div className="chart-card">
        <div className="chart-head">
          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            {canRank ? (
              <div className="seg">
                <button className={effMode === "rank" ? "active" : ""} onClick={() => setChartMode("rank")}>Competição</button>
                <button className={effMode === "evo" ? "active" : ""} onClick={() => setChartMode("evo")}>{subject.isTeam ? "Por dia útil" : "Meu desempenho"}</button>
              </div>
            ) : (
              <div style={{ fontWeight: 700, fontSize: 15 }}>Por dia útil</div>
            )}
            <div style={{ fontWeight: 700, fontSize: 14, color: "var(--fg2)" }}>{chartLbl}</div>
          </div>
          <div className="chart-tabs">
            {chartTabs.map(([k, lbl]) => (
              <button key={k} className={"chart-tab" + (chartKey === k ? " active" : "")} onClick={() => setChartKey(k)}>{lbl}</button>
            ))}
          </div>
        </div>
        {effMode === "rank"
          ? <RankingChart state={state} userIds={rankIds} metricKey={chartKey} period={state.period} hideNumbers={rankHideNumbers} highlightId={viewer.id} />
          : <BarChart series={series} target={targetLine} height={170} />}
        {effMode === "rank" && rankHideNumbers && (
          <p className="muted" style={{ fontSize: 12, margin: "16px 0 0", display: "flex", gap: 7, alignItems: "center" }}>
            <Icon name="lock" size={14} /> Você vê apenas as posições da competição. Os números da equipe ficam visíveis só para administradores.
          </p>
        )}
      </div>

      {reg && !subject.isTeam && (
        <RegisterModal subjectUser={subject.user} editableKeys={editableKeys} state={state} dispatch={dispatch}
          onClose={(msg) => { setReg(false); if (msg) dispatch({ type: "TOAST", msg }); }} />
      )}
    </div>
  );
}

window.DashboardScreen = DashboardScreen;