/* ============================================================
   PCP — Meta mensal de vendas e projeção pela média diária
   ============================================================ */

function Metas({ app }) {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const timer = setInterval(() => setNow(new Date()), 60000);
    return () => clearInterval(timer);
  }, []);
  const year = now.getFullYear();
  const month = now.getMonth();
  const today = now.getDate();
  const monthKey = `${year}-${String(month + 1).padStart(2, "0")}`;
  const workspaceId = (app.ws && app.ws.id) || "default";
  const saved = ((app.prefs && app.prefs.metasMensais) || {})[workspaceId] || 0;
  const [draft, setDraft] = useState(saved ? String(saved) : "");
  useEffect(() => { setDraft(saved ? String(saved) : ""); }, [workspaceId, saved]);

  // Só lançamentos de vendas recebidas, com data completa, entram no mês.
  // Datas antigas sem ano não podem ser atribuídas a um mês com segurança.
  const salesByDay = Array(today).fill(0);
  (app.lancamentos || []).forEach((l) => {
    if (l.tipo !== "entrada" || l.status !== "pago") return;
    if (!(l.cat === "Vendas" || l.cat === "Vendas marketplace" || l.origem === "pedido" || l.origem === "marketplace_import")) return;
    const date = String(l.data || "");
    if (!/^\d{4}-\d{2}-\d{2}$/.test(date) || !date.startsWith(monthKey + "-")) return;
    const day = Number(date.slice(8));
    const value = Number(l.valor);
    if (day >= 1 && day <= today && Number.isFinite(value) && value > 0) salesByDay[day - 1] += value;
  });

  const target = Number(String(draft).replace(",", "."));
  const validTarget = Number.isFinite(target) && target > 0;
  const total = salesByDay.reduce((sum, value) => sum + value, 0);
  const average = total / today; // inclui dias sem vendas
  const remaining = validTarget ? Math.max(0, target - total) : 0;
  const daysLeft = validTarget && average > 0 ? Math.ceil(remaining / average) : null;
  const achieved = validTarget && remaining === 0;
  const estimatedDate = daysLeft !== null && !achieved
    ? new Date(year, month, today + daysLeft) : null;
  const daysInMonth = new Date(year, month + 1, 0).getDate();
  const monthLabel = now.toLocaleDateString("pt-BR", { month: "long", year: "numeric" });
  const fmt = (value) => DB.BRL(value).replace("R$\u00a0", "R$ ");
  const dateLabel = (date) => date.toLocaleDateString("pt-BR", { day: "2-digit", month: "short", year: "numeric" }).replace(".", "");
  const save = () => {
    if (!validTarget) return app.toast("Informe uma meta maior que zero", "crit");
    app.setPref("metasMensais", { ...((app.prefs && app.prefs.metasMensais) || {}), [workspaceId]: target });
    app.toast("Meta de vendas salva", "ok");
  };

  const cumulative = [0];
  salesByDay.forEach((value) => cumulative.push(cumulative[cumulative.length - 1] + value));
  const horizon = validTarget ? Math.max(today + 2, Math.min(365, today + (daysLeft || 0))) : Math.max(today + 2, daysInMonth);
  const ceiling = Math.max(1, validTarget ? target : 0, total, average > 0 ? total + average * (horizon - today) : 0);
  const x = (day) => 52 + day / horizon * 672;
  const y = (value) => 212 - Math.min(value / ceiling, 1) * 184;
  const actualPath = cumulative.map((value, day) => `${day ? "L" : "M"} ${x(day).toFixed(1)} ${y(value).toFixed(1)}`).join(" ");
  const futureEnd = average > 0 && validTarget && !achieved ? Math.min(horizon, today + daysLeft) : today;
  const futureValue = Math.min(target || 0, total + average * (futureEnd - today));
  const horizonDate = new Date(year, month, horizon);

  return (
    <div className="view-inner">
      <div className="page-head">
        <div className="crumb">Gestão</div>
        <h1 className="page-title">Metas</h1>
        <p className="page-sub">Meta de vendas de {monthLabel} · previsão pelo ritmo diário</p>
      </div>

      <div className="card card-pad metas-setup">
        <div>
          <div className="metas-label">Meta de vendas</div>
          <div className="metas-help">Defina o faturamento que deseja alcançar. O progresso reinicia no primeiro dia de cada mês.</div>
        </div>
        <div className="metas-entry">
          <label className="input metas-input"><span>R$</span><input type="number" min="0.01" step="0.01" inputMode="decimal" value={draft} onChange={(e) => setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") save(); }} placeholder="10.000,00" aria-label="Valor da meta de vendas" /></label>
          <Btn variant="primary" icon="check" onClick={save}>Salvar meta</Btn>
        </div>
      </div>

      {validTarget ? <>
        <div className="metrics metas-metrics">
          <MetricCard icon="trendUp" label="Vendas no mês" value={fmt(total)} foot={`de ${fmt(target)} da meta`} state={achieved ? "ok" : undefined} />
          <MetricCard icon="chart" label="Média diária" value={fmt(average)} foot={`${today} ${today === 1 ? "dia corrido" : "dias corridos"}, incluindo dias sem vendas`} />
          <MetricCard icon="calendar" label={achieved ? "Meta atingida" : "Previsão de alcance"} value={achieved ? "Atingida" : estimatedDate ? dateLabel(estimatedDate) : "Sem previsão"} foot={achieved ? "vendas do mês acima da meta" : estimatedDate ? `em aproximadamente ${daysLeft} ${daysLeft === 1 ? "dia" : "dias"}` : "aguardando vendas registradas"} state={achieved ? "ok" : undefined} />
        </div>

        <div className="card metas-chart-card">
          <div className="card-head"><h3>Evolução das vendas</h3><span className="spacer" /><span className="sub">{monthLabel}</span></div>
          <div className="metas-chart-body">
            <div className="metas-progress-head"><strong>{Math.min(100, total / target * 100).toFixed(1).replace(".", ",")}% da meta</strong><span>Faltam {fmt(remaining)}</span></div>
            <div className="metas-progress"><div style={{ width: `${Math.min(100, total / target * 100)}%` }} /></div>
            <div className="metas-chart-legend"><span><i className="metas-dot actual" /> Vendas realizadas</span><span><i className="metas-dot forecast" /> Projeção pela média</span><span><i className="metas-dot goal" /> Meta</span></div>
            <div className="metas-chart-scroll">
              <svg className="metas-chart" viewBox="0 0 760 270" role="img" aria-label={`Vendas acumuladas ${fmt(total)}, meta ${fmt(target)}${estimatedDate ? `, previsão ${dateLabel(estimatedDate)}` : ""}`}>
                {[0, .5, 1].map((part) => <g key={part}><line x1="52" y1={y(ceiling * part)} x2="724" y2={y(ceiling * part)} className="metas-gridline" /><text x="58" y={y(ceiling * part) - 6} className="metas-axis">{fmt(ceiling * part)}</text></g>)}
                <line x1="52" y1={y(target)} x2="724" y2={y(target)} className="metas-goal-line" />
                <path d={actualPath} className="metas-actual-line" />
                {futureEnd > today && <line x1={x(today)} y1={y(total)} x2={x(futureEnd)} y2={y(futureValue)} className="metas-forecast-line" />}
                <circle cx={x(today)} cy={y(total)} r="5" className="metas-actual-point" />
                {futureEnd > today && <circle cx={x(futureEnd)} cy={y(futureValue)} r="5" className="metas-forecast-point" />}
                <text x="52" y="250" className="metas-axis">1º dia</text>
                <text x={x(today)} y="250" textAnchor="middle" className="metas-axis">Hoje</text>
                <text x="724" y="250" textAnchor="end" className="metas-axis">{dateLabel(horizonDate)}</text>
              </svg>
            </div>
            <p className="metas-note">A projeção usa as vendas recebidas neste mês divididas pelos dias corridos. Entradas sem data completa ficam fora do cálculo.{estimatedDate && (estimatedDate.getMonth() !== month || estimatedDate.getFullYear() !== year) ? " No ritmo atual, a meta seria atingida após o fim do mês." : ""}{daysLeft !== null && today + daysLeft > 365 ? " O gráfico mostra apenas os próximos 365 dias." : ""}</p>
          </div>
        </div>
      </> : <div className="card card-pad metas-empty"><Icon name="chart" size={28} /><h3>Defina sua primeira meta</h3><p>Insira um valor acima para ver o progresso de vendas e a previsão de alcance.</p></div>}
    </div>
  );
}

window.Metas = Metas;