mega-plant/components/DashboardCharts.tsx

"use client";

import {
  AreaChart, Area, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
  ResponsiveContainer, PieChart, Pie, Cell,
} from "recharts";
import { ZAR } from "@/lib/utils";

const pieColors = ["#30638E", "#00798C", "#EDAE49", "#003D5B", "#D1495B", "#EDAE49", "#00798C"];

// Read CSS vars for chart hues (Part A.4)
function readVar(name: string, fallback: string): string {
  if (typeof window === "undefined") return fallback;
  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
  return v || fallback;
}

export function IncomeAreaChart({ data }: { data: { month: string; income: number; fixed: number; running: number; isForecast: boolean }[] }) {
  // Part A.3 — clip to last actual month. Past months stay out so the chart doesn't flatline.
  const lastActualIdx = data.findLastIndex((m) => !m.isForecast && (m.income || m.fixed || m.running));
  const clipped = lastActualIdx >= 0 ? data.slice(0, lastActualIdx + 1) : data;
  const INC = readVar("--color-chart-income", "#0090A6");
  const FIX = readVar("--color-chart-fixed", "#BE851F");
  const RUN = readVar("--color-chart-running", "#C13B4D");
  return (
    <div className="h-72">
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart data={clipped} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id="gIncome" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={INC} stopOpacity={0.4} />
              <stop offset="100%" stopColor={INC} stopOpacity={0.02} />
            </linearGradient>
            <linearGradient id="gFixed" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={FIX} stopOpacity={0.35} />
              <stop offset="100%" stopColor={FIX} stopOpacity={0.02} />
            </linearGradient>
            <linearGradient id="gRunning" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={RUN} stopOpacity={0.3} />
              <stop offset="100%" stopColor={RUN} stopOpacity={0.02} />
            </linearGradient>
          </defs>
          <CartesianGrid stroke="#f3f4f6" strokeDasharray="3 3" vertical={false} />
          <XAxis dataKey="month" stroke="#9ca3af" tickLine={false} axisLine={false} />
          <YAxis stroke="#9ca3af" tickLine={false} axisLine={false} tickFormatter={(v) => `${(v / 1000).toFixed(0)}K`} />
          <Tooltip formatter={(v: number) => ZAR(v)} />
          <Area type="monotone" dataKey="income" stroke={INC} strokeWidth={2.5} fill="url(#gIncome)" />
          <Area type="monotone" dataKey="fixed" stroke={FIX} strokeWidth={2.5} fill="url(#gFixed)" />
          <Area type="monotone" dataKey="running" stroke={RUN} strokeWidth={2.5} fill="url(#gRunning)" />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

export function IncomeBarChart({ data }: { data: { month: string; income: number }[] }) {
  // Part A.3 — clip to last actual month. The IncomeAreaChart does the same; this matches.
  const lastActualIdx = data.findLastIndex((m) => m.income > 0);
  const clipped = lastActualIdx >= 0 ? data.slice(0, lastActualIdx + 1) : data;
  const INC = readVar("--color-chart-income", "#0090A6");
  return (
    <div className="h-64">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={clipped} margin={{ top: 5, right: 10, left: 0, bottom: 0 }}>
          <defs>
            <linearGradient id="gBar" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={INC} />
              <stop offset="100%" stopColor={INC} stopOpacity={0.5} />
            </linearGradient>
          </defs>
          <CartesianGrid stroke="#f3f4f6" strokeDasharray="3 3" vertical={false} />
          <XAxis dataKey="month" stroke="#9ca3af" tickLine={false} axisLine={false} />
          <YAxis stroke="#9ca3af" tickLine={false} axisLine={false} tickFormatter={(v) => `${(v / 1000).toFixed(0)}K`} />
          <Tooltip formatter={(v: number) => ZAR(v)} cursor={{ fill: "#f9fafb" }} />
          <Bar dataKey="income" fill="url(#gBar)" radius={[8, 8, 0, 0]} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

export function OverheadDonut({ data }: { data: { name: string; value: number }[] }) {
  return (
    <div className="h-52">
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie data={data} dataKey="value" nameKey="name" innerRadius={50} outerRadius={80} paddingAngle={2}>
            {data.map((_, i) => (
              <Cell key={i} fill={pieColors[i % pieColors.length]} />
            ))}
          </Pie>
          <Tooltip formatter={(v: number) => ZAR(v)} />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}

export const PIE_COLORS = pieColors;