"use client";

import { motion } from "framer-motion";
import { CircleOff } from "lucide-react";
import { Card, CardContent } from "@/app/shadcn_components/ui/card";
import type { ClassifiedDeal } from "./types";

const REMOVED_FROM_BOOKINGS_COLUMNS: (keyof ClassifiedDeal)[] = [
  "dealname",
  "landlordPropertyId",
  "outcomeNotes",
  "propertyHaltedDate",
  "propertyHaltedReason",
];
const REMOVED_FROM_BOOKINGS_LABELS: Partial<Record<keyof ClassifiedDeal, string>> = {
  dealname: "Address",
  landlordPropertyId: "Ref",
  outcomeNotes: "Outcome Notes",
  propertyHaltedDate: "Halted Date",
  propertyHaltedReason: "Halted Reason",
};

const REMOVED_FROM_PROGRAM_COLUMNS: (keyof ClassifiedDeal)[] = [
  "dealname",
  "landlordPropertyId",
  "batchDescription",
  "coordinator",
  "propertyHaltedDate",
  "propertyHaltedReason",
];
const REMOVED_FROM_PROGRAM_LABELS: Partial<Record<keyof ClassifiedDeal, string>> = {
  dealname: "Address",
  landlordPropertyId: "Ref",
  batchDescription: "Group",
  coordinator: "Coordinator",
  propertyHaltedDate: "Halted Date",
  propertyHaltedReason: "Halted Reason",
};

interface ExcludedFromPipelinePanelProps {
  deals: ClassifiedDeal[];
  onOpenTable: (
    stage: string,
    deals: ClassifiedDeal[],
    columns?: (keyof ClassifiedDeal)[],
    columnLabels?: Partial<Record<keyof ClassifiedDeal, string>>,
    breakdown?: Record<string, ClassifiedDeal[]>,
  ) => void;
}

export default function ExcludedFromPipelinePanel({
  deals,
  onOpenTable,
}: ExcludedFromPipelinePanelProps) {
  const removedFromBookings = deals.filter(
    (d) => d.displayStage === "Removed from Bookings",
  );
  const removedFromProgram = deals.filter(
    (d) => d.displayStage === "Removed from Program",
  );

  if (removedFromBookings.length === 0 && removedFromProgram.length === 0) return null;

  return (
    <Card className="border border-slate-200 shadow-sm">
      <CardContent className="p-6">
        <div className="flex items-center gap-2 mb-1">
          <CircleOff className="h-4 w-4 text-slate-500" />
          <h3 className="text-base font-semibold text-slate-700">
            Halted or Removed
          </h3>
        </div>
        <p className="text-sm text-gray-500 mb-5">
          Properties no longer being progressed — either halted before a survey, or removed from the project entirely.
        </p>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {removedFromBookings.length > 0 && (
            <motion.button
              whileHover={{ scale: 1.02 }}
              onClick={() =>
                onOpenTable(
                  "Removed from Bookings",
                  removedFromBookings,
                  REMOVED_FROM_BOOKINGS_COLUMNS,
                  REMOVED_FROM_BOOKINGS_LABELS,
                )
              }
              className="group text-left rounded-xl border border-slate-200 bg-gradient-to-br from-slate-50 to-white p-4 hover:border-slate-300 hover:shadow-md transition-all duration-200"
            >
              <p className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-2 leading-tight">
                Removed from Bookings
              </p>
              <p className="text-2xl font-bold text-slate-800">
                {removedFromBookings.length}
              </p>
              <p className="text-xs text-slate-500 mt-0.5">
                Removed from the bookings list before a survey took place
              </p>
            </motion.button>
          )}
          {removedFromProgram.length > 0 && (
            <motion.button
              whileHover={{ scale: 1.02 }}
              onClick={() =>
                onOpenTable(
                  "Removed from Program",
                  removedFromProgram,
                  REMOVED_FROM_PROGRAM_COLUMNS,
                  REMOVED_FROM_PROGRAM_LABELS,
                )
              }
              className="group text-left rounded-xl border border-slate-200 bg-gradient-to-br from-slate-50 to-white p-4 hover:border-slate-300 hover:shadow-md transition-all duration-200"
            >
              <p className="text-xs font-semibold text-slate-600 uppercase tracking-wide mb-2 leading-tight">
                Removed from Program
              </p>
              <p className="text-2xl font-bold text-slate-800">
                {removedFromProgram.length}
              </p>
              <p className="text-xs text-slate-500 mt-0.5">
                Removed from the project entirely
              </p>
            </motion.button>
          )}
        </div>
      </CardContent>
    </Card>
  );
}
