/* ANISAN — Avaliação de Qualidade (Supervisão Diária). Checklist por setor +
   KPIs + nota final com medalha + plano de ação, por unidade/turno. Conteúdo
   (itens/pesos/metas) vem do TEMPLATE editável (Qualidade.js → qualidadeTemplate,
   configurável pelo Master aqui). Motor de cálculo: window.qualidadeCalc.
   Rascunho = autosave do Store; Finalizar trava a edição (Master pode reabrir). */

function AvaliacaoQualidade({ unit, user }) {
  const store = window.useStore();
  const D = window.ANISAN_DATA;
  const data = store.data;
  const cons = window.isCons(unit);
  const mobile = window.useIsMobile();
  const isMaster = user && user.role === "master";

  const [avId, setAvId] = React.useState(null);        // avaliação aberta (null = início/histórico)
  const [sec, setSec] = React.useState(null);          // seção ativa (setor.key | "kpis" | "resumo")
  const [novaDlg, setNovaDlg] = React.useState(null);  // { unidade, data, turno }
  const [acaoDlg, setAcaoDlg] = React.useState(null);  // { itemKey, label, descricao, acao, responsavel, prazo }
  const [cfgDlg, setCfgDlg] = React.useState(null);    // clone editável do template + metas (Master)

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });

  const SectionTitle = window.SectionTitle, Button = window.Button, Select = window.Select,
    Input = window.Input, Dialog = window.Dialog, Panel = window.Panel, StatCard = window.StatCard;

  const tpl = data.qualidadeTemplate || window.QUALIDADE_TEMPLATE_DEFAULT;
  const metasDe = (u) => (data.qualidadeMetas || {})[u] || { fatDiario: 0, cmvPct: 35, google: 9.0, ifood: 4.7 };
  const avs = data.avaliacoes || [];
  const av = avs.find((a) => a.id === avId) || null;
  const calc = av ? window.qualidadeCalc(av, tpl, metasDe(av.unidade)) : null;
  const final = av && av.status === "final";

  // ---- estilos locais ----
  const segBtn = (ativo) => ({ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.03em", padding: "7px 13px", borderRadius: "var(--radius-pill)", border: "1px solid " + (ativo ? "var(--brass)" : "var(--hairline-strong)"), background: ativo ? "rgba(201,162,75,0.13)" : "transparent", color: ativo ? "var(--paper)" : "var(--muted)", cursor: "pointer", whiteSpace: "nowrap" });
  const estBtn = (on, cor) => ({ fontFamily: "var(--font-mono)", fontSize: 10, padding: "5px 10px", borderRadius: "var(--radius-pill)", border: "1px solid " + (on ? cor : "var(--hairline)"), background: "transparent", color: on ? cor : "var(--muted-2)", cursor: "pointer", whiteSpace: "nowrap" });
  const notaCor = (n) => n === null ? "var(--muted-2)" : (n >= (tpl.medalhas || {}).ouro ? "var(--jade)" : n >= (tpl.medalhas || {}).prata ? "var(--brass)" : "var(--clay)");
  const medEmoji = { "Ouro": "🥇", "Prata": "🥈", "Bronze": "🥉", "Sem medalha": "—" };

  // ---- CRUD ----
  const upAv = (id, fn) => store.set((d) => { const a = (d.avaliacoes || []).find((x) => x.id === id); if (a && a.status !== "final") fn(a, d); }, "avaliacoes");

  const criar = () => {
    const f = novaDlg;
    const id = window.uid();
    store.set((d) => {
      // carry-over: ações ABERTAS da última avaliação FINAL da mesma unidade
      const anteriores = (d.avaliacoes || []).filter((a) => a.unidade === f.unidade && a.status === "final").sort((a, b) => (a.data < b.data ? 1 : -1));
      const pend = anteriores.length ? (anteriores[0].acoes || []).filter((x) => x.status === "aberto").map((x) => ({ id: window.uid(), origemItem: x.origemItem, descricao: x.descricao, acao: x.acao, responsavel: x.responsavel, prazo: x.prazo, status: "aberto", origemAvaliacaoId: anteriores[0].id })) : [];
      (d.avaliacoes = d.avaliacoes || []).push({
        id: id, unidade: f.unidade, data: f.data || window.todayISO(), turno: f.turno || "abertura",
        supervisorId: (user && user.id) || "", supervisorNome: (user && user.nome) || "",
        templateVersion: tpl.version || 1, status: "rascunho", notaFinal: null, medalha: null, travado: false,
        itens: {}, respostas: {}, kpis: {}, acoes: pend, iniciadoEm: window.todayISO(), finalizadoEm: "",
      });
    }, "avaliacoes");
    setNovaDlg(null); setAvId(id); setSec((tpl.setores[0] || {}).key || "resumo");
  };

  const setItem = (itemKey, patch) => upAv(avId, (a) => { a.itens[itemKey] = Object.assign({}, a.itens[itemKey], patch); });
  const setKpi = (campo, v) => upAv(avId, (a) => { a.kpis = Object.assign({}, a.kpis); a.kpis[campo] = v; });
  const setResp = (k, v) => upAv(avId, (a) => { a.respostas = Object.assign({}, a.respostas); a.respostas[k] = v; });
  const salvarAcao = () => {
    const f = acaoDlg;
    upAv(avId, (a) => { a.acoes = (a.acoes || []).concat([{ id: window.uid(), origemItem: f.itemKey, descricao: f.descricao || f.label, acao: f.acao || "", responsavel: f.responsavel || "", prazo: f.prazo || "", status: "aberto", origemAvaliacaoId: "" }]); });
    setAcaoDlg(null);
  };
  const toggleAcao = (acaoId) => upAv(avId, (a) => { const x = (a.acoes || []).find((y) => y.id === acaoId); if (x) x.status = x.status === "aberto" ? "resolvido" : "aberto"; });
  const delAv = (id) => store.set((d) => { d.avaliacoes = (d.avaliacoes || []).filter((x) => x.id !== id); }, "avaliacoes");

  const finalizar = () => {
    const c = window.qualidadeCalc(av, tpl, metasDe(av.unidade));
    if (!c.completo) return;
    store.set((d) => {
      const a = (d.avaliacoes || []).find((x) => x.id === avId);
      if (a) { a.status = "final"; a.notaFinal = c.notaFinal; a.medalha = c.medalha; a.travado = c.travado; a.finalizadoEm = window.todayISO(); }
    }, "avaliacoes");
  };
  const reabrir = () => store.set((d) => { const a = (d.avaliacoes || []).find((x) => x.id === avId); if (a) { a.status = "rascunho"; a.finalizadoEm = ""; } }, "avaliacoes");

  // ---- Configuração (Master) ----
  const abrirCfg = () => setCfgDlg({ tpl: JSON.parse(JSON.stringify(tpl)), metas: JSON.parse(JSON.stringify(data.qualidadeMetas || window.QUALIDADE_METAS_DEFAULT())) });
  const salvarCfg = () => {
    const f = cfgDlg;
    store.set((d) => { f.tpl.version = (Number(tpl.version) || 1) + 1; d.qualidadeTemplate = f.tpl; d.qualidadeMetas = f.metas; }, ["qualidadeTemplate", "qualidadeMetas"]);
    setCfgDlg(null);
  };
  const cfgSet = (fn) => setCfgDlg((prev) => { const n = JSON.parse(JSON.stringify(prev)); fn(n); return n; });
  // linha editável de item no diálogo de configuração (reutilizada por setor flat e por grupo)
  const cfgItemRow = (it, setLabel, toggleCrit, removeIt) => (
    <div key={it.key} style={{ display: "flex", alignItems: "center", gap: 8, padding: "4px 0" }}>
      <input value={it.label} onChange={(e) => setLabel(e.target.value)} style={{ flex: 1, minWidth: 0, background: "var(--ink)", border: "1px solid var(--hairline)", borderRadius: 6, color: "var(--paper)", fontFamily: "var(--font-body)", fontSize: 12.5, padding: "5px 8px" }} />
      <button title={it.critico ? "Item crítico (trava a nota)" : "Marcar como crítico"} onClick={toggleCrit} style={{ background: "none", border: "1px solid " + (it.critico ? "var(--clay)" : "var(--hairline)"), borderRadius: 6, color: it.critico ? "var(--clay)" : "var(--muted-2)", fontFamily: "var(--font-mono)", fontSize: 9.5, padding: "4px 8px", cursor: "pointer", whiteSpace: "nowrap" }}>crítico</button>
      <button title="Remover item" onClick={removeIt} style={{ background: "none", border: "1px solid var(--hairline)", borderRadius: 6, color: "var(--muted-2)", padding: "4px 7px", cursor: "pointer" }}>×</button>
    </div>
  );
  const addBtn = (onClick) => <button onClick={onClick} style={{ marginTop: 6, background: "none", border: "1px dashed var(--hairline-strong)", borderRadius: 6, color: "var(--muted)", fontFamily: "var(--font-mono)", fontSize: 10.5, padding: "5px 10px", cursor: "pointer" }}>+ item</button>;

  /* ═══════════ VISTA: INÍCIO / HISTÓRICO ═══════════ */
  if (!av) {
    const unidadesVis = cons ? D.units : [unit];
    const lista = avs.filter((a) => unidadesVis.indexOf(a.unidade) >= 0).sort((a, b) => (a.data < b.data ? 1 : -1));
    const rascunhos = lista.filter((a) => a.status !== "final");
    // ranking: nota da ÚLTIMA avaliação FINALIZADA de cada unidade (desempate por data de finalização)
    const ultimaFinalDe = (u) => { const fs = avs.filter((a) => a.unidade === u && a.status === "final" && a.notaFinal !== null).sort((a, b) => (a.data < b.data ? 1 : (a.data > b.data ? -1 : ((a.finalizadoEm || "") < (b.finalizadoEm || "") ? 1 : -1)))); return fs.length ? fs[0] : null; };
    const ranking = D.units.map((u) => ({ u: u, a: ultimaFinalDe(u) })).sort((x, y) => ((y.a ? y.a.notaFinal : -1) - (x.a ? x.a.notaFinal : -1)));
    return (
      /* key própria: troca home↔avaliação DESMONTA a vista inteira (ícones lucide
         substituem <i> por <svg> no DOM; reconciliar em-place crasharia o React). */
      <div key="ql-home" style={{ padding: mobile ? "18px 14px 40px" : "26px 32px 48px" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, flexWrap: "wrap", marginBottom: 18 }}>
          <SectionTitle style={{ margin: 0 }} meta={cons ? "todas as unidades" : "Unidade " + unit}>Avaliação de Qualidade</SectionTitle>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {isMaster && <Button size="sm" onClick={abrirCfg}>⚙ Configurar</Button>}
            <Button size="sm" variant="primary" onClick={() => setNovaDlg({ unidade: cons ? D.units[0] : unit, data: window.todayISO(), turno: "abertura" })}>+ Nova avaliação</Button>
          </div>
        </div>

        {/* ranking — nota da última avaliação finalizada de cada unidade */}
        <Panel title="Ranking" action={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)" }}>última avaliação de cada unidade</span>} style={{ marginBottom: 20 }}>
          {ranking.every((r) => !r.a) && <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--muted-2)", textAlign: "center", padding: "12px 0", margin: 0 }}>Nenhuma avaliação finalizada ainda — o ranking aparece após a primeira avaliação concluída.</p>}
          {ranking.some((r) => r.a) && ranking.map((r, i) => {
            const posEmoji = r.a ? (["🥇", "🥈", "🥉"][i] || (i + 1) + "º") : "—";
            return (
              <div key={r.u} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 0", borderTop: i === 0 ? "none" : "1px solid var(--hairline)", cursor: r.a ? "pointer" : "default" }} onClick={() => { if (r.a) { setAvId(r.a.id); setSec("resumo"); } }}>
                <span style={{ width: 26, textAlign: "center", fontFamily: "var(--font-mono)", fontSize: 15, color: "var(--muted)" }}>{posEmoji}</span>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: D.accents[r.u] || "var(--muted)", flexShrink: 0 }}></span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: "block", fontFamily: "var(--font-display)", fontSize: 15, color: "var(--paper)" }}>{r.u}</span>
                  <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--muted-2)", marginTop: 1 }}>{r.a ? window.dateLabel(r.a.data) + " · " + r.a.turno : "sem avaliação finalizada"}</span>
                </span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 16, color: r.a ? notaCor(r.a.notaFinal) : "var(--muted-2)", whiteSpace: "nowrap" }}>{r.a ? (medEmoji[r.a.medalha] || "") + " " + r.a.notaFinal.toFixed(1) : "—"}</span>
              </div>
            );
          })}
        </Panel>

        {rascunhos.length > 0 && (
          <Panel title="Rascunhos em aberto" style={{ marginBottom: 20 }}>
            {rascunhos.map((a, i) => (
              <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid var(--hairline)" }}>
                <span style={{ flex: 1, minWidth: 0, fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--paper)" }}>{window.dateLabel(a.data)} · {a.unidade} · {a.turno}<span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--muted-2)", marginLeft: 8 }}>{a.supervisorNome}</span></span>
                <Button size="sm" variant="primary" onClick={() => { setAvId(a.id); setSec((tpl.setores[0] || {}).key || "resumo"); }}>Continuar</Button>
                <Button size="sm" variant="danger" onClick={() => delAv(a.id)}>×</Button>
              </div>
            ))}
          </Panel>
        )}

        <Panel title="Histórico" action={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)" }}>{lista.length} {lista.length === 1 ? "avaliação" : "avaliações"}</span>}>
          {lista.length === 0 && <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--muted-2)", textAlign: "center", padding: "16px 0" }}>Nenhuma avaliação ainda. Use “+ Nova avaliação”.</p>}
          {lista.map((a, i) => {
            const c = a.status === "final" ? null : window.qualidadeCalc(a, tpl, metasDe(a.unidade));
            const nota = a.status === "final" ? a.notaFinal : (c ? c.notaFinal : null);
            return (
              <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid var(--hairline)", cursor: "pointer" }} onClick={() => { setAvId(a.id); setSec("resumo"); }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: D.accents[a.unidade] || "var(--muted)", flexShrink: 0 }}></span>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--paper)" }}>{window.dateLabel(a.data)} · {a.unidade} · {a.turno}</span>
                  <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--muted-2)", marginTop: 1 }}>{a.supervisorNome}{a.travado ? " · ⚠ trava crítica" : ""}</span>
                </span>
                {a.status === "final"
                  ? <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: notaCor(nota), whiteSpace: "nowrap" }}>{medEmoji[a.medalha] || ""} {nota === null ? "—" : nota.toFixed(1)}</span>
                  : <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.05em", textTransform: "uppercase", color: "var(--brass)", background: "var(--fill-accent)", borderRadius: "var(--radius-pill)", padding: "2px 8px" }}>Prévia</span>}
              </div>
            );
          })}
        </Panel>

        {/* ---- Nova avaliação ---- */}
        <Dialog open={!!novaDlg} title="Nova avaliação" onClose={() => setNovaDlg(null)} width={460}
          footer={<><Button onClick={() => setNovaDlg(null)}>Cancelar</Button><Button variant="solid" onClick={criar}>Iniciar</Button></>}>
          {novaDlg && (
            <div style={{ display: "grid", gap: 16 }}>
              <Select label="Unidade" value={novaDlg.unidade} onChange={(v) => setNovaDlg({ ...novaDlg, unidade: v })} options={D.units} />
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                <Input label="Data" type="date" value={novaDlg.data} onChange={(v) => setNovaDlg({ ...novaDlg, data: v })} inputStyle={{ colorScheme: "dark" }} />
                <Select label="Turno" value={novaDlg.turno} onChange={(v) => setNovaDlg({ ...novaDlg, turno: v })} options={[{ value: "abertura", label: "Abertura" }, { value: "meio", label: "Meio do dia" }, { value: "fechamento", label: "Fechamento" }]} />
              </div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--muted-2)", margin: 0 }}>Supervisor: <b style={{ color: "var(--paper)" }}>{(user && user.nome) || "—"}</b>. Pendências abertas da última visita entram automaticamente no plano de ação.</p>
            </div>
          )}
        </Dialog>

        {/* ---- Configurar (Master) ---- */}
        <Dialog open={!!cfgDlg} title="Configurar avaliação" onClose={() => setCfgDlg(null)} width={700}
          footer={<><Button onClick={() => setCfgDlg(null)}>Cancelar</Button><Button variant="solid" onClick={salvarCfg}>Salvar (v{cfgDlg ? (Number(tpl.version) || 1) + 1 : ""})</Button></>}>
          {cfgDlg && (
            <div style={{ display: "grid", gap: 16, maxHeight: 480, overflow: "auto", paddingRight: 4 }}>
              {cfgDlg.tpl.setores.map((s, si) => (
                <div key={s.key} style={{ border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)", padding: 12 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                    <span style={{ flex: 1, fontFamily: "var(--font-display)", fontSize: 15, color: "var(--paper)" }}>{s.nome}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--muted-2)" }}>peso</span>
                    <input value={s.peso} onChange={(e) => cfgSet((n) => { n.tpl.setores[si].peso = e.target.value; })} style={{ width: 48, background: "var(--ink)", border: "1px solid var(--hairline-strong)", borderRadius: 6, color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 12, padding: "4px 7px", textAlign: "right" }} />
                  </div>
                  {s.grupos
                    ? s.grupos.map((g, gi) => (
                        <div key={g.key} style={{ marginTop: 6 }}>
                          <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--brass)", padding: "6px 0 2px" }}>{g.nome}</div>
                          {g.itens.map((it, ii) => cfgItemRow(it,
                            (v) => cfgSet((n) => { n.tpl.setores[si].grupos[gi].itens[ii].label = v; }),
                            () => cfgSet((n) => { const x = n.tpl.setores[si].grupos[gi].itens[ii]; x.critico = !x.critico; }),
                            () => cfgSet((n) => { n.tpl.setores[si].grupos[gi].itens.splice(ii, 1); })
                          ))}
                          {addBtn(() => cfgSet((n) => { n.tpl.setores[si].grupos[gi].itens.push({ key: g.key + "_" + window.uid().slice(-5), label: "Novo item", critico: false }); }))}
                        </div>
                      ))
                    : (s.itens || []).map((it, ii) => cfgItemRow(it,
                        (v) => cfgSet((n) => { n.tpl.setores[si].itens[ii].label = v; }),
                        () => cfgSet((n) => { const x = n.tpl.setores[si].itens[ii]; x.critico = !x.critico; }),
                        () => cfgSet((n) => { n.tpl.setores[si].itens.splice(ii, 1); })
                      ))}
                  {!s.grupos && addBtn(() => cfgSet((n) => { (n.tpl.setores[si].itens = n.tpl.setores[si].itens || []).push({ key: s.key + "_" + window.uid().slice(-5), label: "Novo item", critico: false }); }))}
                </div>
              ))}
              <div style={{ border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)", padding: 12 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--paper)", marginBottom: 10 }}>Pesos dos KPIs · medalhas · CMV</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(120px, 1fr))", gap: 10 }}>
                  {[["faturamento", "Peso faturamento"], ["cmv", "Peso CMV"], ["satisfacao", "Peso satisfação"]].map((p) => (
                    <Input key={p[0]} label={p[1]} value={String(cfgDlg.tpl.pesosKpi[p[0]])} onChange={(v) => cfgSet((n) => { n.tpl.pesosKpi[p[0]] = v; })} />
                  ))}
                  {[["ouro", "Corte Ouro"], ["prata", "Corte Prata"], ["bronze", "Corte Bronze"]].map((p) => (
                    <Input key={p[0]} label={p[1]} value={String(cfgDlg.tpl.medalhas[p[0]])} onChange={(v) => cfgSet((n) => { n.tpl.medalhas[p[0]] = parseFloat(v) || 0; })} />
                  ))}
                  <Input label="Penalidade CMV (pts/ponto)" value={String(cfgDlg.tpl.cmvPenalidade)} onChange={(v) => cfgSet((n) => { n.tpl.cmvPenalidade = parseFloat(v) || 5; })} />
                  <Input label="Nota máx. c/ trava crítica" value={String(cfgDlg.tpl.travaNota)} onChange={(v) => cfgSet((n) => { n.tpl.travaNota = parseFloat(v) || 69; })} />
                </div>
              </div>
              <div style={{ border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)", padding: 12 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 15, color: "var(--paper)", marginBottom: 10 }}>Metas por unidade</div>
                {D.units.map((u) => (
                  <div key={u} style={{ display: "grid", gridTemplateColumns: "110px repeat(4, 1fr)", gap: 8, alignItems: "center", padding: "6px 0" }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: D.accents[u] }}>{u}</span>
                    {[["fatDiario", "Fat. diário"], ["cmvPct", "CMV %"], ["google", "Google"], ["ifood", "iFood"]].map((p) => (
                      <input key={p[0]} title={p[1]} placeholder={p[1]} value={String((cfgDlg.metas[u] || {})[p[0]] !== undefined ? (cfgDlg.metas[u] || {})[p[0]] : "")} onChange={(e) => cfgSet((n) => { if (!n.metas[u]) n.metas[u] = {}; n.metas[u][p[0]] = e.target.value; })} style={{ minWidth: 0, background: "var(--ink)", border: "1px solid var(--hairline)", borderRadius: 6, color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 11.5, padding: "5px 8px", textAlign: "right" }} />
                    ))}
                  </div>
                ))}
              </div>
            </div>
          )}
        </Dialog>
      </div>
    );
  }

  /* ═══════════ VISTA: AVALIAÇÃO ABERTA ═══════════ */
  const setorAtivo = (tpl.setores || []).find((s) => s.key === sec) || null;
  const kpisV = av.kpis || {};
  const scoreTag = (v) => <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: v === null ? "var(--muted-2)" : notaCor(v) }}>{v === null ? "—" : Math.round(v)}</span>;

  // linha de item (reutilizada por setor flat e por grupos da Produção)
  const renderItemRow = (it, topBorder, produzido) => {
    const st = (av.itens[it.key] || {}).estado || "pendente";
    const okLbl = produzido ? "Produzido" : "OK";
    const nokLbl = produzido ? "Não" : "NOK";
    return (
      <div key={it.key} style={{ padding: "10px 0", borderTop: topBorder ? "1px solid var(--hairline)" : "none" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
          <span style={{ flex: "1 1 240px", minWidth: 0, display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-body)", fontSize: 13.5, color: st === "pendente" ? "var(--muted)" : "var(--paper)" }}>
            <span title={st === "pendente" ? "Não preenchido" : (st === "ok" ? "OK" : "NOK")} style={{ width: 7, height: 7, borderRadius: "50%", flexShrink: 0, background: st === "ok" ? "var(--jade)" : st === "nok" ? "var(--clay)" : "var(--sand)", boxShadow: st === "pendente" ? "0 0 0 3px rgba(212,180,120,0.14)" : "none" }}></span>
            <span style={{ minWidth: 0 }}>{it.label}{it.critico && <span title="Item crítico: NOK trava a nota" style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--clay)", border: "1px solid var(--clay)", borderRadius: "var(--radius-pill)", padding: "1px 7px", marginLeft: 8, verticalAlign: "1px" }}>crítico</span>}</span>
          </span>
          <span style={{ display: "flex", gap: 6, flexShrink: 0 }}>
            <button disabled={final} onClick={() => setItem(it.key, { estado: "ok" })} style={estBtn(st === "ok", "var(--jade)")}>{okLbl}</button>
            <button disabled={final} onClick={() => { setItem(it.key, { estado: "nok" }); }} style={estBtn(st === "nok", "var(--clay)")}>{nokLbl}</button>
            <button disabled={final} onClick={() => setItem(it.key, { estado: "pendente" })} style={estBtn(st === "pendente", "var(--sand)")}>Pendente</button>
            {st === "nok" && !final && <button title="Adicionar ao plano de ação" onClick={() => setAcaoDlg({ itemKey: it.key, label: it.label, descricao: "", acao: "", responsavel: "", prazo: "" })} style={{ background: "none", border: "1px dashed var(--hairline-strong)", borderRadius: "var(--radius-pill)", color: "var(--muted)", fontFamily: "var(--font-mono)", fontSize: 10, padding: "5px 10px", cursor: "pointer" }}>+ ação</button>}
          </span>
        </div>
        {(st === "nok" || (av.itens[it.key] || {}).obs) && (
          <input disabled={final} value={(av.itens[it.key] || {}).obs || ""} onChange={(e) => setItem(it.key, { obs: e.target.value })} placeholder="Observação…" style={{ width: "100%", marginTop: 7, background: "var(--ink)", border: "1px solid var(--hairline)", borderRadius: 7, color: "var(--paper)", fontFamily: "var(--font-body)", fontSize: 12.5, padding: "7px 10px", boxSizing: "border-box" }} />
        )}
      </div>
    );
  };
  // legenda "falta preencher" sob um campo de KPI obrigatório vazio
  const reqCap = (vazio) => vazio ? <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.03em", color: "var(--sand)", marginTop: 5 }}>▲ falta preencher</div> : null;
  const semMetaFat = !(metasDe(av.unidade).fatDiario > 0);

  return (
    /* key própria (ver comentário na vista inicial): desmonte limpo home↔avaliação. */
    <div key={"ql-av-" + av.id} style={{ padding: mobile ? "18px 14px 40px" : "26px 32px 48px" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, flexWrap: "wrap", marginBottom: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
          <button onClick={() => setAvId(null)} title="Voltar" style={{ background: "none", border: "1px solid var(--hairline)", borderRadius: 8, color: "var(--muted)", padding: "6px 9px", cursor: "pointer" }}><i data-lucide="arrow-left" style={{ width: 15, height: 15, strokeWidth: 1.8 }}></i></button>
          <SectionTitle style={{ margin: 0 }} meta={window.dateLabel(av.data) + " · " + av.turno + " · " + av.supervisorNome}>{av.unidade}</SectionTitle>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          {final
            ? <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: notaCor(av.notaFinal) }}>{medEmoji[av.medalha] || ""} {av.notaFinal === null ? "—" : av.notaFinal.toFixed(1)} · FINAL</span>
            : <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.05em", textTransform: "uppercase", color: "var(--brass)", background: "var(--fill-accent)", borderRadius: "var(--radius-pill)", padding: "4px 11px" }}>Prévia · {calc.notaFinal === null ? "—" : calc.notaFinal.toFixed(1)}</span>}
        </div>
      </div>

      {final && <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", marginBottom: 14, background: "var(--fill-positive)", border: "1px solid var(--hairline)", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--muted)" }}><i data-lucide="lock" style={{ width: 13, height: 13, strokeWidth: 1.8 }}></i>Avaliação finalizada — somente leitura.{isMaster && <button onClick={reabrir} style={{ marginLeft: "auto", background: "none", border: "1px solid var(--hairline-strong)", borderRadius: "var(--radius-pill)", color: "var(--muted)", fontFamily: "var(--font-mono)", fontSize: 10.5, padding: "5px 12px", cursor: "pointer" }}>Reabrir (Master)</button>}</div>}

      {/* sub-navegação */}
      <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 16 }}>
        {(tpl.setores || []).map((s) => {
          const ps = calc.porSetor.find((x) => x.key === s.key) || {};
          return <button key={s.key} onClick={() => setSec(s.key)} style={segBtn(sec === s.key)}>{s.nome} {ps.pendentes > 0 ? "· " + ps.pendentes + "⏳" : (ps.score !== null ? "· " + Math.round(ps.score) : "")}</button>;
        })}
        {(function () { const nk = calc.faltando.filter((f) => f.tipo !== "setor").length; return <button onClick={() => setSec("kpis")} style={segBtn(sec === "kpis")}>KPIs{nk > 0 ? " · " + nk + "⏳" : ""}</button>; })()}
        <button onClick={() => setSec("resumo")} style={segBtn(sec === "resumo")}>Resumo</button>
      </div>

      {/* ---- SETOR ---- */}
      {setorAtivo && (
        <Panel title={setorAtivo.nome} action={scoreTag((calc.porSetor.find((x) => x.key === setorAtivo.key) || {}).score !== undefined ? (calc.porSetor.find((x) => x.key === setorAtivo.key) || {}).score : null)}>
          {setorAtivo.grupos
            ? setorAtivo.grupos.map((g) => {
                const feitos = (g.itens || []).filter((it) => (av.itens[it.key] || {}).estado === "ok").length;
                return (
                  <div key={g.key} style={{ marginTop: 4 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 0 5px", borderTop: "1px solid var(--hairline-strong)" }}>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--brass)" }}>{g.nome}</span>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--muted-2)" }}>{feitos}/{(g.itens || []).length}</span>
                    </div>
                    {(g.itens || []).map((it, i) => renderItemRow(it, i > 0, setorAtivo.producao))}
                  </div>
                );
              })
            : (setorAtivo.itens || []).map((it, i) => renderItemRow(it, i > 0, setorAtivo.producao))}
          {(setorAtivo.perguntas || []).length > 0 && (
            <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px solid var(--hairline-strong)" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--muted-2)", marginBottom: 10 }}>Avaliação do setor</div>
              {(setorAtivo.perguntas || []).map((p) => (
                <div key={p.key} style={{ marginBottom: 10 }}>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--muted)", marginBottom: 5 }}>{p.label}</div>
                  <input disabled={final} value={av.respostas[p.key] || ""} onChange={(e) => setResp(p.key, e.target.value)} placeholder="Responder…" style={{ width: "100%", background: "var(--ink)", border: "1px solid var(--hairline)", borderRadius: 7, color: "var(--paper)", fontFamily: "var(--font-body)", fontSize: 12.5, padding: "8px 10px", boxSizing: "border-box" }} />
                </div>
              ))}
            </div>
          )}
        </Panel>
      )}

      {/* ---- KPIs ---- */}
      {sec === "kpis" && (
        <div style={{ display: "grid", gap: 14 }}>
          <Panel title="Faturamento" action={scoreTag(calc.kpis.faturamento)}>
            <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr 1fr", gap: 14 }}>
              <div><Input label="Faturamento de hoje" prefix="R$" value={kpisV.fatHoje || ""} onChange={(v) => setKpi("fatHoje", v)} placeholder="0,00" disabled={final} />{reqCap(!kpisV.fatHoje)}</div>
              <div><div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 7 }}>Meta da unidade</div><div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: semMetaFat ? "var(--clay)" : "var(--paper)", padding: "8px 0" }}>{semMetaFat ? "não definida" : window.BRL(metasDe(av.unidade).fatDiario)}</div></div>
              <Select label="Tendência" value={kpisV.tendencia || ""} onChange={(v) => setKpi("tendencia", v)} options={[{ value: "acima", label: "Acima da meta" }, { value: "na_meta", label: "Na meta" }, { value: "abaixo", label: "Abaixo da meta" }]} placeholder="—" />
            </div>
            {semMetaFat && <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12, padding: "9px 12px", background: "rgba(193,84,63,0.10)", border: "1px solid var(--clay)", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-body)", fontSize: 12, color: "var(--clay)" }}><i data-lucide="alert-triangle" style={{ width: 13, height: 13, strokeWidth: 1.8, flexShrink: 0 }}></i>Meta de faturamento não definida — o score fica em “—” até a meta ser preenchida{isMaster ? " em ⚙ Configurar › Metas por unidade." : ". Peça ao gestor para configurá-la."}</div>}
          </Panel>
          <Panel title="CMV" action={scoreTag(calc.kpis.cmv)}>
            <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr 1fr", gap: 14 }}>
              <div><Input label="CMV semanal (%)" value={kpisV.cmvSemanal || ""} onChange={(v) => setKpi("cmvSemanal", v)} placeholder="0,0" disabled={final} />{reqCap(!kpisV.cmvSemanal && !kpisV.cmvMensal)}</div>
              <Input label="CMV mensal (%)" value={kpisV.cmvMensal || ""} onChange={(v) => setKpi("cmvMensal", v)} placeholder="0,0" disabled={final} />
              <div><div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 7 }}>Meta CMV</div><div style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--paper)", padding: "8px 0" }}>{metasDe(av.unidade).cmvPct}%</div></div>
            </div>
          </Panel>
          <Panel title="Satisfação" action={scoreTag(calc.kpis.satisfacao)}>
            <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: 14 }}>
              <div><Input label={"Google (meta " + metasDe(av.unidade).google + ")"} value={kpisV.googleNota || ""} onChange={(v) => setKpi("googleNota", v)} placeholder="0,0" disabled={final} />{reqCap(!kpisV.googleNota)}</div>
              <Input label="Nº avaliações Google" value={kpisV.googleN || ""} onChange={(v) => setKpi("googleN", v)} placeholder="0" disabled={final} />
              <div><Input label={"iFood (meta " + metasDe(av.unidade).ifood + ")"} value={kpisV.ifoodNota || ""} onChange={(v) => setKpi("ifoodNota", v)} placeholder="0,0" disabled={final} />{reqCap(!kpisV.ifoodNota)}</div>
              <Input label="Nº avaliações iFood" value={kpisV.ifoodN || ""} onChange={(v) => setKpi("ifoodN", v)} placeholder="0" disabled={final} />
            </div>
          </Panel>
          {(tpl.perguntasKpi || []).length > 0 && (
            <Panel title="Análise dos indicadores">
              {(tpl.perguntasKpi || []).map((p, i) => (
                <div key={p.key} style={{ marginTop: i === 0 ? 0 : 12 }}>
                  <div style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--muted)", marginBottom: 5 }}>{p.label}</div>
                  <input disabled={final} value={av.respostas[p.key] || ""} onChange={(e) => setResp(p.key, e.target.value)} placeholder="Responder…" style={{ width: "100%", background: "var(--ink)", border: "1px solid var(--hairline)", borderRadius: 7, color: "var(--paper)", fontFamily: "var(--font-body)", fontSize: 12.5, padding: "8px 10px", boxSizing: "border-box" }} />
                </div>
              ))}
            </Panel>
          )}
        </div>
      )}

      {/* ---- RESUMO ---- */}
      {sec === "resumo" && (
        <div style={{ display: "grid", gap: 14 }}>
          <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: 12 }}>
            {calc.porSetor.map((s) => <StatCard key={s.key} label={s.nome} value={s.score === null ? "—" : Math.round(s.score) + ""} accent={notaCor(s.score)} />)}
            <StatCard label="Faturamento" value={calc.kpis.faturamento === null ? "—" : Math.round(calc.kpis.faturamento) + ""} accent={notaCor(calc.kpis.faturamento)} />
            <StatCard label="CMV" value={calc.kpis.cmv === null ? "—" : Math.round(calc.kpis.cmv) + ""} accent={notaCor(calc.kpis.cmv)} />
            <StatCard label="Satisfação" value={calc.kpis.satisfacao === null ? "—" : Math.round(calc.kpis.satisfacao) + ""} accent={notaCor(calc.kpis.satisfacao)} />
            <StatCard label={final ? "Nota final" : "Nota (prévia)"} value={(final ? av.notaFinal : calc.notaFinal) === null ? "—" : (final ? av.notaFinal : calc.notaFinal).toFixed(1)} accent={notaCor(final ? av.notaFinal : calc.notaFinal)} />
          </div>

          {calc.travado && <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 13px", background: "rgba(193,84,63,0.12)", border: "1px solid var(--clay)", borderRadius: "var(--radius-sm)", fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--clay)" }}><i data-lucide="alert-triangle" style={{ width: 14, height: 14, strokeWidth: 1.8, flexShrink: 0 }}></i>Item crítico reprovado — nota travada em no máximo {tpl.travaNota || 69}.</div>}
          {!calc.completo && !final && (
            <Panel title="Falta preencher" action={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--sand)" }}>{calc.faltando.length} pendência{calc.faltando.length === 1 ? "" : "s"}</span>}>
              {calc.faltando.map((f, idx) => (
                <div key={f.tipo + (f.key || f.campo || idx)} onClick={() => setSec(f.tipo === "setor" ? f.key : "kpis")} title="Ir para preencher" style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 0", borderTop: idx === 0 ? "none" : "1px solid var(--hairline)", cursor: "pointer" }}>
                  <span style={{ width: 7, height: 7, borderRadius: "50%", flexShrink: 0, background: f.tipo === "meta" ? "var(--clay)" : "var(--sand)" }}></span>
                  <span style={{ flex: 1, minWidth: 0, fontFamily: "var(--font-body)", fontSize: 13, color: "var(--paper)" }}>{f.nome}<span style={{ color: "var(--muted-2)" }}>{f.tipo === "setor" ? " — " + f.qtd + " " + (f.qtd === 1 ? "item não preenchido" : "itens não preenchidos") : (f.tipo === "meta" ? " — meta ausente" : " — valor não preenchido")}</span></span>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--muted-2)", whiteSpace: "nowrap" }}>{f.tipo === "setor" ? "abrir setor ›" : "abrir KPIs ›"}</span>
                </div>
              ))}
              <div style={{ marginTop: 10, paddingTop: 10, borderTop: "1px solid var(--hairline-strong)", fontFamily: "var(--font-body)", fontSize: 11.5, color: "var(--muted-2)" }}>Complete todos os itens acima para poder finalizar a avaliação.</div>
            </Panel>
          )}

          <Panel title="Plano de ação" action={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)" }}>{(av.acoes || []).filter((a) => a.status === "aberto").length} aberta(s)</span>}>
            {(av.acoes || []).length === 0 && <p style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--muted-2)", margin: "6px 0" }}>Nenhuma ação registrada. Itens NOK podem gerar ações (botão “+ ação”).</p>}
            {(av.acoes || []).map((a, i) => (
              <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 0", borderTop: i === 0 ? "none" : "1px solid var(--hairline)" }}>
                <button disabled={final} onClick={() => toggleAcao(a.id)} title={a.status === "aberto" ? "Marcar como resolvida" : "Reabrir"} style={{ width: 20, height: 20, borderRadius: 6, background: a.status === "resolvido" ? "var(--jade)" : "transparent", border: "1px solid " + (a.status === "resolvido" ? "var(--jade)" : "var(--hairline-strong)"), color: "var(--ink)", cursor: final ? "default" : "pointer", flexShrink: 0, fontSize: 12, lineHeight: 1 }}>{a.status === "resolvido" ? "✓" : ""}</button>
                <span style={{ flex: 1, minWidth: 0 }}>
                  <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: 13, color: "var(--paper)", textDecoration: a.status === "resolvido" ? "line-through" : "none", opacity: a.status === "resolvido" ? 0.55 : 1 }}>{a.descricao}{a.acao ? " — " + a.acao : ""}</span>
                  <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--muted-2)", marginTop: 1 }}>{a.responsavel || "sem responsável"}{a.prazo ? " · até " + window.dateLabel(a.prazo) : ""}{a.origemAvaliacaoId ? " · ↩ visita anterior" : ""}</span>
                </span>
              </div>
            ))}
          </Panel>

          {calc.ocorrencias.length > 0 && (
            <Panel title="Ocorrências (itens NOK)">
              {calc.ocorrencias.map((o, i) => (
                <div key={o.itemKey} style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 0", borderTop: i === 0 ? "none" : "1px solid var(--hairline)" }}>
                  <span style={{ width: 7, height: 7, borderRadius: "50%", background: o.critico ? "var(--clay)" : "var(--sand)", flexShrink: 0 }}></span>
                  <span style={{ flex: 1, fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--paper)" }}>{o.setor} · {o.label}{o.obs ? <span style={{ color: "var(--muted-2)" }}> — {o.obs}</span> : null}</span>
                  {o.critico && <span style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--clay)" }}>CRÍTICO</span>}
                </div>
              ))}
            </Panel>
          )}

          {!final && (
            <button onClick={finalizar} disabled={!calc.completo}
              style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, width: "100%", padding: "12px", borderRadius: "var(--radius-sm)", border: "none", cursor: calc.completo ? "pointer" : "not-allowed", background: calc.completo ? "var(--jade)" : "var(--surface-2)", color: calc.completo ? "var(--ink)" : "var(--muted-2)", fontFamily: "var(--font-mono)", fontSize: 12.5, fontWeight: 600, letterSpacing: "0.03em" }}>
              <i data-lucide="check-circle-2" style={{ width: 15, height: 15, strokeWidth: 2 }}></i>
              {calc.completo ? "Finalizar avaliação · nota " + (calc.notaFinal === null ? "—" : calc.notaFinal.toFixed(1)) : "Complete os itens e KPIs para finalizar"}
            </button>
          )}
        </div>
      )}

      {/* ---- Nova ação (item NOK) ---- */}
      <Dialog open={!!acaoDlg} title="Adicionar ao plano de ação" onClose={() => setAcaoDlg(null)} width={500}
        footer={<><Button onClick={() => setAcaoDlg(null)}>Cancelar</Button><Button variant="solid" onClick={salvarAcao}>Adicionar</Button></>}>
        {acaoDlg && (
          <div style={{ display: "grid", gap: 14 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)" }}>{acaoDlg.label}</div>
            <Input label="Descrição do problema" value={acaoDlg.descricao} onChange={(v) => setAcaoDlg({ ...acaoDlg, descricao: v })} placeholder={acaoDlg.label} />
            <Input label="Ação corretiva" value={acaoDlg.acao} onChange={(v) => setAcaoDlg({ ...acaoDlg, acao: v })} placeholder="O que será feito" />
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <Input label="Responsável" value={acaoDlg.responsavel} onChange={(v) => setAcaoDlg({ ...acaoDlg, responsavel: v })} placeholder="Quem" />
              <Input label="Prazo" type="date" value={acaoDlg.prazo} onChange={(v) => setAcaoDlg({ ...acaoDlg, prazo: v })} inputStyle={{ colorScheme: "dark" }} />
            </div>
          </div>
        )}
      </Dialog>
    </div>
  );
}

window.AvaliacaoQualidade = AvaliacaoQualidade;
