"use client";

import { ColumnDef } from "@tanstack/react-table";
import { ArrowUpDown } from "lucide-react";
import { Button } from "@/app/shadcn_components/ui/button";
import { formatNumber, getEpcColorClass, sapToEpc } from "@/app/utils";
import StatusBadge from "@/app/components/StatusBadge";
import { PlanWithTotals } from "./utils";

const EpcLetterBubble = ({ letter }: { letter: string }) => {
  return (
    <div
      className={`inline-flex items-center justify-center w-6 h-6 rounded-full ${getEpcColorClass(
        letter
      )} text-white text-m font-bold shadow-outline-black`}
    >
      {letter}
    </div>
  );
};

export const planColumns: ColumnDef<PlanWithTotals>[] = [
  {
    accessorKey: "landlordPropertyId",
    header: ({ column }) => (
      <Button
        variant="ghost"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Property Reference
        <ArrowUpDown className="ml-2 h-4 w-4" />
      </Button>
    ),
    cell: ({ row }) => (
      <div className="text-gray-700 text-center">
        {row.original.landlordPropertyId || "—"}
      </div>
    ),
  },
  {
    accessorKey: "address",
    header: ({ column }) => (
      <Button
        variant="ghost"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Address
        <ArrowUpDown className="ml-2 h-4 w-4" />
      </Button>
    ),
    cell: ({ row }) => (
      <div className="text-gray-700 text-center text-sm">
        {row.original.address || "—"}
      </div>
    ),
  },
  {
    accessorKey: "postcode",
    header: ({ column }) => (
      <Button
        variant="ghost"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Postcode
        <ArrowUpDown className="ml-2 h-4 w-4" />
      </Button>
    ),
    cell: ({ row }) => (
      <div className="text-gray-700 text-center">
        {row.original.postcode || "—"}
      </div>
    ),
  },

  {
    accessorKey: "fundingScheme",
    header: () => <div className="text-center">Funding Scheme</div>,
    cell: ({ row }) => (
      <div className="flex justify-center">
        {row.original.fundingScheme ? (
          <StatusBadge
            status={String(row.original.fundingScheme).toUpperCase()}
            isProperty={false}
          />
        ) : (
          <span className="text-gray-500 text-center">None</span>
        )}
      </div>
    ),
  },
  {
    accessorKey: "planType",
    header: ({ column }) => (
      <Button
        variant="ghost"
        onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
      >
        Work Type
        <ArrowUpDown className="ml-2 h-4 w-4" />
      </Button>
    ),
    cell: ({ row }) => (
      <div className="font-medium text-gray-800 text-center">
        {String(row.original.planType).replaceAll("_", " ")}
      </div>
    ),
  },
  {
    accessorKey: "totalFunding",
    header: () => <div className="text-center">Total Funding</div>,
    cell: ({ row }) => (
      <div className="flex items-center justify-center gap-1">
        <span className="font-medium">
          £{formatNumber(row.original.totalFunding || 0)}
        </span>
      </div>
    ),
  },
  {
    accessorKey: "totalCarbonSavings",
    header: () => <div className="text-center">Carbon Savings</div>,
    cell: ({ row }) => (
      <div className="flex items-center justify-center gap-1">
        <span className="font-medium text-center">
          {((row.original.totalCarbonSavings || 0) * 1000).toFixed(2)} kgCO₂e
        </span>
      </div>
    ),
  },
  {
    accessorKey: "totalBillSavings",
    header: () => <div className="text-center">Bill Savings</div>,
    cell: ({ row }) => (
      <div className="flex items-center justify-center gap-1">
        <span className="font-medium text-center">
          £{formatNumber(row.original.totalBillSavings || 0)}
        </span>
      </div>
    ),
  },
  {
    accessorKey: "clientContribution",
    header: () => <div className="text-center">Investment</div>,
    cell: ({ row }) => (
      <div className="flex items-center justify-center gap-1">
        <span className="font-semibold text-center">
          £{formatNumber(row.original.clientContribution || 0)}
        </span>
      </div>
    ),
    sortingFn: "alphanumeric",
  },
  {
    accessorKey: "currentEpc",
    header: () => <div className="flex justify-center">Current EPC Rating</div>,
    cell: ({ row }) => {
      return (
        <div className="text-gray-700 font-medium flex justify-center">
          {<EpcLetterBubble letter={row.original.currentEpcRating || ""} />}
        </div>
      );
    },
  },
  {
    accessorKey: "targetEpc",
    header: () => <div className="flex justify-center">Expected EPC</div>,
    cell: ({ row }) => {
      const currentSapPoints = row.original.currentSapPoints || 0;

      const expectedSapPoints = row.original.totalRecommendationSapPoints || 0;

      const expectedEpc = sapToEpc(currentSapPoints + expectedSapPoints);

      return (
        <div className="text-gray-700 font-medium flex justify-center">
          {<EpcLetterBubble letter={expectedEpc || ""} />}
        </div>
      );
    },
  },
];
