mega-plant/components/MachineLineChart.tsx

"use client";

import {
  ComposedChart, Line, LineChart, Bar, AreaChart, Area, Cell,
  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
} from "recharts";
import { MONTH_NAMES } from "@/lib/data";
import { computeProfit } from "@/lib/profit";

export type ChartView = "lines" | "stack" | "profit";

type Props = {
  income: (number | null)[];
  fixed: (number | null)[];
  running: (number | null)[];
  view?: ChartView;
  incomeColor?: string;
  fixedColor?: string;
  runningColor?: string;
  profitColor?: string;
};

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 MachineLineChart({
  income, fixed, running,
  view = "lines",
  incomeColor, fixedColor, runningColor, profitColor,
}: Props) {
  const INC = incomeColor ?? readVar("--color-chart-income", "#0090A6");
  const FIX = fixedColor ?? readVar("--color-chart-fixed", "#BE851F");
  const RUN = runningColor ?? readVar("--color-chart-running", "#C13B4D");
  const PROF = profitColor ?? readVar("--color-chart-running", "#D1495B");

  const lastActual = Math.max(
    income.findLastIndex((v) => v != null),
    fixed.findLastIndex((v) => v != null),
    running.findLastIndex((v) => v != null),
  );
  const clipped = lastActual >= 0 ? lastActual + 1 : MONTH_NAMES.length;
  const months = MONTH_NAMES.slice(0, clipped);
  const data = months.map((m, i) => ({
    month: m,
    income: income[i] ?? null,
    fixed: fixed[i] ?? null,
    running: running[i] ?? null,
    profit: computeProfit({ income: income[i] ?? 0, fixed: fixed[i] ?? 0, running: running[i] ?? 0 }),
  }));

  const fmt = (v: number) =>
    new Intl.NumberFormat("en-ZA", { style: "currency", currency: "ZAR", maximumFractionDigits: 0, notation: "compact" }).format(v);

  if (view === "profit") {
    return (
      <div className="h-44 sm:h-52">
        <ResponsiveContainer width="100%" height="100%">
          <ComposedChart data={data} margin={{ top: 5, right: 10, left: 0, bottom: 0 }}>
            <CartesianGrid stroke="#f3f4f6" strokeDasharray="3 3" vertical={false} />
            <XAxis dataKey="month" stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} />
            <YAxis stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={fmt} width={60} />
            <Tooltip formatter={(v: number) => fmt(v)} />
            <Bar dataKey="profit" radius={[4, 4, 0, 0]} fill={INC}>
              {data.map((d, i) => (
                <Cell key={i} fill={d.profit >= 0 ? INC : RUN} />
              ))}
            </Bar>
          </ComposedChart>
        </ResponsiveContainer>
      </div>
    );
  }

  if (view === "stack") {
    return (
      <div className="h-44 sm:h-52">
        <ResponsiveContainer width="100%" height="100%">
          <ComposedChart data={data} margin={{ top: 5, right: 10, left: 0, bottom: 0 }} stackOffset="sign">
            <CartesianGrid stroke="#f3f4f6" strokeDasharray="3 3" vertical={false} />
            <XAxis dataKey="month" stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} />
            <YAxis stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={fmt} width={60} />
            <Tooltip formatter={(v: number) => fmt(v)} />
            <Bar dataKey="fixed" stackId="a" fill={FIX} radius={[0, 0, 0, 0]} />
            <Bar dataKey="running" stackId="a" fill={RUN} radius={[4, 4, 0, 0]} barSize={20} />
            <Line type="monotone" dataKey="income" stroke={INC} strokeWidth={2.5} dot={{ r: 3, fill: INC }} connectNulls={false} />
          </ComposedChart>
        </ResponsiveContainer>
      </div>
    );
  }

  // Round 4 Part A.5: default "Lines" view draws ACTUAL LINES (stroked, no fill).
  // The chart's whole purpose is to match the workbook — the workbook draws lines.
  return (
    <div className="h-44 sm:h-52">
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={data} margin={{ top: 5, right: 10, left: 0, bottom: 0 }}>
          <CartesianGrid stroke="#f3f4f6" strokeDasharray="3 3" vertical={false} />
          <XAxis dataKey="month" stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} />
          <YAxis stroke="#9ca3af" tick={{ fontSize: 10 }} tickLine={false} axisLine={false} tickFormatter={fmt} width={60} />
          <Tooltip formatter={(v: number) => fmt(v)} />
          <Line type="monotone" dataKey="income" stroke={INC} strokeWidth={2.5} dot={{ r: 3, fill: INC }} connectNulls={false} />
          <Line type="monotone" dataKey="fixed" stroke={FIX} strokeWidth={2.5} dot={{ r: 3, fill: FIX }} connectNulls={false} />
          <Line type="monotone" dataKey="running" stroke={RUN} strokeWidth={2.5} dot={{ r: 3, fill: RUN }} connectNulls={false} />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}