"use client";

import { KPICard } from "@/components/ui/kpi-card";
import { fmtForecastMillions } from "./forecast-format";

type ForecastDashboardKpisProps = {
  heroPct: number;
  heroAttained: number;
  heroTarget: number;
  heroProjected: number;
  commit: number;
  pipeline: number;
  daysLeft: number;
  period: string;
};

export function ForecastDashboardKpis({
  heroPct,
  heroAttained,
  heroTarget,
  heroProjected,
  commit,
  pipeline,
  daysLeft,
  period,
}: ForecastDashboardKpisProps) {
  const projectedPct =
    heroTarget > 0 ? Math.round((heroProjected / heroTarget) * 100) : 0;
  const gap = Math.max(heroTarget - heroAttained, 0);

  return (
    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
      <KPICard
        label="Quota Attainment"
        value={`${heroPct}%`}
        change={
          heroPct >= 100
            ? "At or above target"
            : `${100 - heroPct} pts to goal`
        }
        isUp={heroPct >= 70}
        subtext={`${fmtForecastMillions(heroAttained)} of ${fmtForecastMillions(heroTarget)} · ${period}`}
      />
      <KPICard
        label="Projected Revenue"
        value={fmtForecastMillions(heroProjected)}
        change={`${projectedPct}% of quota`}
        isUp={projectedPct >= heroPct}
        subtext="Weighted pipeline + closed"
      />
      <KPICard
        label="Commit"
        value={fmtForecastMillions(commit)}
        subtext={`Pipeline gap: ${fmtForecastMillions(gap)}`}
      />
      <KPICard
        label="Open Pipeline"
        value={fmtForecastMillions(pipeline)}
        subtext={
          daysLeft > 0 ? `${daysLeft} days left in period` : "Period complete"
        }
      />
    </div>
  );
}