"use client";

import type { ForecastDimensionRow } from "./types";
import { cn } from "@/lib/utils";

type ForecastDimensionPanelProps = {
  title: string;
  subtitle: string;
  rows: ForecastDimensionRow[];
  emptyMessage: string;
};

export function ForecastDimensionPanel({
  title,
  subtitle,
  rows,
  emptyMessage,
}: ForecastDimensionPanelProps) {
  if (rows.length === 0) {
    return (
      <div className="bg-white rounded-xl border border-border p-6 shadow-sm">
        <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
          {title}
        </h3>
        <p className="text-[11px] text-gray-700 font-medium mb-4 uppercase tracking-tight">
          {subtitle}
        </p>
        <p className="text-sm text-gray-600">{emptyMessage}</p>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-xl border border-border p-6 shadow-sm">
      <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
        {title}
      </h3>
      <p className="text-[11px] text-gray-700 font-medium mb-5 uppercase tracking-tight">
        {subtitle}
      </p>

      <div className="space-y-4">
        {rows.map((row) => {
          const barColor =
            row.pct >= 90 ? "#22C55E" : row.pct >= 70 ? "#6C63FF" : "#F59E0B";
          return (
            <div key={row.id} className="flex flex-col gap-2">
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-center gap-2 min-w-0">
                  <div
                    className="size-2.5 rounded-full shrink-0"
                    style={{ backgroundColor: row.color }}
                  />
                  <span className="text-[13px] font-bold text-gray-700 truncate">
                    {row.name}
                  </span>
                  {row.isBest ? (
                    <span className="text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-600 shrink-0">
                      Best
                    </span>
                  ) : null}
                  {row.isFurthestFromTarget ? (
                    <span className="text-[9px] font-extrabold uppercase tracking-wider px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 shrink-0">
                      Furthest
                    </span>
                  ) : null}
                </div>
                <span
                  className="text-[14px] font-extrabold font-['Lexend_Deca'] shrink-0"
                  style={{ color: barColor }}
                >
                  {row.pct}%
                </span>
              </div>

              <div className="h-1.5 w-full bg-bg rounded-full overflow-hidden">
                <div
                  className="h-full rounded-full transition-all duration-700 ease-out"
                  style={{
                    width: `${Math.min(row.pct, 100)}%`,
                    backgroundColor: barColor,
                  }}
                />
              </div>

              <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-[10px] font-bold text-gray-700 font-['Lexend_Deca'] uppercase">
                <span>Attained: ${row.attained}M</span>
                <span>Target: ${row.target}M</span>
                <span>Pipeline: ${row.pipeline}M</span>
                <span className={cn(row.isFurthestFromTarget && "text-amber-700")}>
                  Gap: ${row.gapToTarget}M
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}