"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";
import type { DealForecast } from "./types";

const CATEGORY_CLS: Record<string, string> = {
  Won: "bg-emerald-100 text-emerald-600",
  Commit: "bg-indigo-100 text-indigo-600",
  "Best Case": "bg-violet-100 text-violet-600",
  Pipeline: "bg-amber-100 text-amber-600",
};

type SortField = "deal" | "rep" | "stage" | "val" | "prob" | "weighted" | "category";
type SortDir = "asc" | "desc";

type ForecastDealsTableProps = {
  deals: DealForecast[];
};

function parseDealValue(val: string): number {
  const n = parseFloat(val);
  return Number.isFinite(n) ? n : 0;
}

function getWeighted(row: DealForecast): number {
  if (row.weighted) return parseDealValue(row.weighted);
  return (parseDealValue(row.val) * (row.effectiveP ?? row.prob)) / 100;
}

export function ForecastDealsTable({ deals }: ForecastDealsTableProps) {
  const [sortCol, setSortCol] = React.useState<SortField>("weighted");
  const [sortDir, setSortDir] = React.useState<SortDir>("desc");

  const sortedDeals = React.useMemo(() => {
    const rows = [...deals];
    rows.sort((a, b) => {
      let aVal: string | number;
      let bVal: string | number;
      switch (sortCol) {
        case "val":
          aVal = parseDealValue(a.val);
          bVal = parseDealValue(b.val);
          break;
        case "prob":
          aVal = a.effectiveP ?? a.prob;
          bVal = b.effectiveP ?? b.prob;
          break;
        case "weighted":
          aVal = getWeighted(a);
          bVal = getWeighted(b);
          break;
        default:
          aVal = a[sortCol];
          bVal = b[sortCol];
      }
      const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
      return sortDir === "asc" ? cmp : -cmp;
    });
    return rows;
  }, [deals, sortCol, sortDir]);

  const handleSort = (field: SortField) => {
    if (sortCol === field) {
      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
    } else {
      setSortCol(field);
      setSortDir(field === "deal" || field === "rep" || field === "stage" ? "asc" : "desc");
    }
  };

  const sortArrow = (field: SortField) => {
    if (sortCol !== field) return null;
    return sortDir === "asc" ? " ▲" : " ▼";
  };

  if (deals.length === 0) {
    return (
      <div className="bg-white rounded-xl border border-border shadow-sm p-6">
        <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
          Deal-Level Forecast
        </h3>
        <p className="text-[11px] text-gray-700 font-medium uppercase tracking-tight">
          Top deals by weighted value
        </p>
        <p className="mt-4 text-sm text-gray-600">No open pipeline deals in range.</p>
      </div>
    );
  }

  return (
    <div className="bg-white rounded-xl border border-border shadow-sm overflow-hidden">
      <div className="p-6 pb-3">
        <h3 className="text-[13px] font-extrabold text-text font-['Lexend'] mb-1">
          Deal-Level Forecast
        </h3>
        <p className="text-[11px] text-gray-700 font-medium uppercase tracking-tight">
          Top deals by weighted value · click column to sort
        </p>
      </div>
      <div className="overflow-x-auto scrollbar-themed px-2 pb-4">
        <Table variant="transparent">
          <TableHeader>
            <TableRow className="bg-bg/40 hover:bg-transparent cursor-default">
              <SortableHead field="deal" label="Deal" onSort={handleSort} arrow={sortArrow("deal")} />
              <SortableHead field="rep" label="Rep" onSort={handleSort} arrow={sortArrow("rep")} />
              <SortableHead field="stage" label="Stage" onSort={handleSort} arrow={sortArrow("stage")} />
              <SortableHead field="val" label="Value" onSort={handleSort} arrow={sortArrow("val")} />
              <SortableHead field="prob" label="Prob." onSort={handleSort} arrow={sortArrow("prob")} />
              <SortableHead field="weighted" label="Weighted" onSort={handleSort} arrow={sortArrow("weighted")} />
              <SortableHead field="category" label="Category" onSort={handleSort} arrow={sortArrow("category")} />
            </TableRow>
          </TableHeader>
          <TableBody className="text-[13px] font-['Lexend']">
            {sortedDeals.map((r) => {
              const weighted = getWeighted(r).toFixed(1);
              return (
                <TableRow key={`${r.deal}-${r.rep}`}>
                  <TableCell className="font-bold text-gray-700">{r.deal}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <div className="size-6 rounded-full bg-bg text-gray-700 text-[10px] font-bold flex items-center justify-center shrink-0">
                        {r.av}
                      </div>
                      <span className="text-[11px] font-semibold">
                        {r.rep.split(" ")[0]}
                      </span>
                    </div>
                  </TableCell>
                  <TableCell className="text-gray-700 text-[11px] font-medium">
                    {r.stage}
                  </TableCell>
                  <TableCell className="font-['Lexend_Deca'] font-extrabold text-accent">
                    $ {r.val}M
                  </TableCell>
                  <TableCell className="font-['Lexend_Deca'] font-bold text-gray-700">
                    {r.effectiveP ?? r.prob}%
                  </TableCell>
                  <TableCell className="font-['Lexend_Deca'] font-extrabold text-emerald-500">
                    $ {weighted}M
                  </TableCell>
                  <TableCell>
                    <span
                      className={cn(
                        "text-[9px] font-extrabold px-2.5 py-0.5 rounded-full uppercase tracking-wider",
                        CATEGORY_CLS[r.category] ?? CATEGORY_CLS.Pipeline,
                      )}
                    >
                      {r.category}
                    </span>
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

function SortableHead({
  field,
  label,
  onSort,
  arrow,
}: {
  field: SortField;
  label: string;
  onSort: (field: SortField) => void;
  arrow: string | null;
}) {
  return (
    <TableHead
      className="cursor-pointer select-none hover:text-text"
      onClick={() => onSort(field)}
    >
      {label}
      {arrow}
    </TableHead>
  );
}