/* ANISAN — Planejado × Realizado. Edit monthly goals (planejado/realizado) and
   per-unit monthly targets; persisted via the store. */

function Metas({ unit, period }) {
  const store = window.useStore();
  const data = store.data;
  const D = window.ANISAN_DATA;

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

  const real = data.metas.realizado;
  const plan = data.metas.planejado;
  // Planejamento anual: sempre Jan–Dez, independente do filtro de período global.
  const mIdx = D.meses.map((_, i) => i);
  const totReal = mIdx.reduce((s, i) => s + real[i], 0);
  const totPlan = mIdx.reduce((s, i) => s + plan[i], 0);
  const pctTotal = Math.round((totReal / totPlan) * 100);

  const setMeta = (campo, i, raw) => store.set(d => { d.metas[campo][i] = window.parseBRL(raw); }, "metas");
  const setMetaUnidade = (u, raw) => store.set(d => { d.metaMesUnidade[u] = window.parseBRL(raw); }, "metaMesUnidade");

  return (
    <div style={{ padding: mobile ? "18px 14px 40px" : "26px 32px 48px" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 14, marginBottom: 22 }}>
        <SectionTitle style={{ margin: 0 }}>Planejado × Realizado</SectionTitle>
        <Badge accent={pctTotal >= 100 ? "var(--jade)" : "var(--brass)"} variant="tint">{pctTotal}% da meta anual</Badge>
      </div>

      <div style={{ display: "flex", gap: 24, alignItems: "flex-start", flexWrap: "wrap", marginBottom: 22 }}>
        <Panel title="Faturamento — meta × realizado" action={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)" }}>{D.meses[0]}–{D.meses[D.meses.length - 1]} · {window.YEAR}</span>} style={{ flex: 2, minWidth: 440 }}>
          {mIdx.length > 0
            ? <GroupedBars labels={mIdx.map(i => D.meses[i])} a={mIdx.map(i => real[i])} b={mIdx.map(i => plan[i])} aColor="var(--brass)" bColor="var(--surface-2)" aLabel="Realizado" bLabel="Planejado" height={210} />
            : <p style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--muted-2)", padding: "60px 0", textAlign: "center" }}>Nenhum mês no período selecionado.</p>}
        </Panel>

        <Panel title="Cumprimento · acumulado" style={{ flex: 1, minWidth: 280 }}>
          <Donut pct={pctTotal} label={window.BRLk(totReal)} sub={"meta " + window.BRLk(totPlan)} color={pctTotal >= 100 ? "var(--jade)" : "var(--brass)"} />
        </Panel>
      </div>

      <div style={{ display: "flex", gap: 24, alignItems: "flex-start", flexWrap: "wrap" }}>
        <Panel title="Editar metas mensais" action={<span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--muted-2)" }}>toque para editar</span>} style={{ flex: 2, minWidth: 440 }}>
          <div style={{ display: "flex", fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--muted-2)", padding: "0 0 10px", borderBottom: "1px solid var(--hairline)" }}>
            <span style={{ flex: 1 }}>Mês</span>
            <span style={{ width: 150, textAlign: "right" }}>Planejado</span>
            <span style={{ width: 150, textAlign: "right" }}>Realizado</span>
            <span style={{ width: 64, textAlign: "right" }}>%</span>
          </div>
          {D.meses.map((m, i) => {
            const p = Math.round((real[i] / (plan[i] || 1)) * 100);
            return (
              <div key={m} style={{ display: "flex", alignItems: "center", padding: "9px 0", borderBottom: i < D.meses.length - 1 ? "1px solid var(--hairline)" : "none" }}>
                <span style={{ flex: 1, fontFamily: "var(--font-body)", fontSize: 14, color: "var(--paper)" }}>{m}</span>
                <span style={{ width: 150, display: "flex", justifyContent: "flex-end" }}>
                  <MoneyInput value={plan[i]} onChange={(raw) => setMeta("planejado", i, raw)} face="mono" size={13} dashed align="right" width={120} prefix="R$" accent="var(--muted)" />
                </span>
                <span style={{ width: 150, display: "flex", justifyContent: "flex-end" }}>
                  <MoneyInput value={real[i]} onChange={(raw) => setMeta("realizado", i, raw)} face="mono" size={13} dashed align="right" width={120} prefix="R$" accent="var(--brass)" />
                </span>
                <span style={{ width: 64, textAlign: "right", fontFamily: "var(--font-mono)", fontSize: 12.5, color: p >= 100 ? "var(--jade)" : "var(--clay)" }}>{p}%</span>
              </div>
            );
          })}
        </Panel>

        <Panel title="Meta mensal por unidade" style={{ flex: 1, minWidth: 300 }}>
          {D.units.map((u, i) => (
            <div key={u} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "12px 0", borderTop: i === 0 ? "none" : "1px solid var(--hairline)" }}>
              <span style={{ display: "flex", alignItems: "center", gap: 9, fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--paper)" }}>
                <span style={{ width: 9, height: 9, borderRadius: "50%", background: D.accents[u] }}></span>{u}
              </span>
              <MoneyInput value={data.metaMesUnidade[u]} onChange={(raw) => setMetaUnidade(u, raw)} face="mono" size={13} dashed align="right" width={110} prefix="R$" accent={D.accents[u]} />
            </div>
          ))}
          <p style={{ fontFamily: "var(--font-body)", fontSize: 12, color: "var(--muted)", lineHeight: 1.6, margin: "14px 0 0" }}>
            A meta da unidade alimenta o anel “Meta do mês” no Painel.
          </p>
        </Panel>
      </div>
    </div>
  );
}

window.Metas = Metas;