"use client";

import { useId, useState } from "react";
import { TrendingUp } from "lucide-react";
import { IncomeView } from "./IncomeView";
import { SiteIncomeView } from "./SiteIncomeView";
import type { IncomeRow } from "@/lib/rows";
import type { SiteIncomeRow } from "@/lib/site-income";
import { cn } from "@/lib/utils";

export function IncomeOverview({ vehicleRows, siteRows, year, vehicleMonthIndex, siteMonthIndex }: { vehicleRows: IncomeRow[]; siteRows: SiteIncomeRow[]; year: number; vehicleMonthIndex: number; siteMonthIndex: number }) {
  const [group, setGroup] = useState<"vehicles" | "sites">("vehicles");
  const id = useId();
  const heading = <div className="min-w-0"><div className="mb-1 flex items-center gap-3"><div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-[#00798C]/15 to-[#003D5B]/15 text-[#00798C]"><TrendingUp className="h-5 w-5" /></div><h1 className="text-2xl font-semibold text-[#003D5B] dark:text-white">Income</h1></div><p className="text-sm text-gray-500 dark:text-gray-400">{group === "vehicles" ? "Project income per vehicle per month" : "Posted income per invoice site per month"} · {year}</p></div>;
  return <div className="min-w-0">
    <div role="group" aria-label="Group income by" className="mb-5 inline-flex max-w-full gap-1 rounded-xl bg-gray-100 p-1 dark:bg-white/5">
      {(["vehicles", "sites"] as const).map(value => <button key={value} type="button" onClick={() => setGroup(value)} aria-pressed={group === value} aria-controls={`${id}-panel`} className={cn("min-h-[44px] min-w-[44px] rounded-lg px-4 text-sm font-medium transition", group === value ? "bg-[#003D5B] text-white shadow-sm dark:bg-[#00798C]" : "text-gray-600 hover:bg-white dark:text-gray-400 dark:hover:bg-white/10")}>{value === "vehicles" ? "Vehicles" : "Sites"}</button>)}
    </div>
    <div id={`${id}-panel`}>{group === "vehicles" ? <IncomeView rows={vehicleRows} palette={{ income: "#00798C", profit: "#00798C", loss: "#D1495B" }} title={heading} monthIndex={vehicleMonthIndex} /> : <SiteIncomeView rows={siteRows} year={year} title={heading} monthIndex={siteMonthIndex} />}</div>
  </div>;
}