import { CardHeader, CardTitle } from "@/shadcn/ui/card";
import { Filter } from "lucide-react";
import {
  FunnelChart,
  Funnel,
  LabelList,
  Tooltip,
  ResponsiveContainer,
  Cell,
} from "recharts";

interface FunnelData {
  name: string;
  value: number;
}

interface Props {
  data?: FunnelData[];
}

// Refined Professional Palette
const funnelColors = ["#2563eb", "#7c3aed", "#0d9488", "#ea580c", "#16a34a"];

export default function ApplicationFunnel({ data }: Props) {
  const funnelData = data || [];

  return (
    <div className="relative overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm dark:border-gray-800 dark:bg-white/[0.03] ">
      <div className="p-6 pl-0">
        {/* Header Section */}
        <CardHeader>
          <CardTitle className="flex items-center">
            <Filter className="mr-2" />
            Total Application Status
          </CardTitle>
        </CardHeader>
        <p className="mb-4 pl-6">Total Application Status</p>

        {/* Chart Section */}
        <div className="mt-8 px-8 h-[350px] w-full">
          {funnelData.length > 0 ? (
            <ResponsiveContainer width="100%" height="100%">
              <FunnelChart>
                <Tooltip
                  cursor={{ fill: "transparent" }}
                  contentStyle={{
                    borderRadius: "12px",
                    border: "none",
                    boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1)",
                    fontSize: "12px",
                    fontWeight: "600",
                  }}
                />
                <Funnel
                  dataKey="value"
                  data={funnelData}
                  isAnimationActive
                >
                  {funnelData.map((entry, index) => (
                    <Cell
                      key={`cell-${index}`}
                      fill={funnelColors[index % funnelColors.length]}
                      fillOpacity={0.85}
                      className="hover:fill-opacity-100 transition-all duration-300"
                    />
                  ))}
                  <LabelList
                    position="right"
                    fill="currentColor"
                    className="fill-gray-500 dark:fill-gray-400 text-xs font-bold uppercase tracking-widest"
                    dataKey="name"
                  />
                </Funnel>
              </FunnelChart>
            </ResponsiveContainer>
          ) : (
            <div className="flex items-center justify-center h-full text-gray-500">
              No data available
            </div>
          )}
        </div>

        {/* Legend/Footer */}
        {funnelData.length > 0 && (
          <div className="mt-6 flex flex-wrap justify-center gap-x-6 gap-y-2 border-t border-gray-50 pt-4 dark:border-gray-800/50">
            {funnelData.map((item, i) => (
              <div key={i} className="flex items-center gap-2">
                <div
                  className="h-2 w-2 rounded-full"
                  style={{ backgroundColor: funnelColors[i % funnelColors.length] }}
                />
                <span className="text-xs font-medium text-gray-500 dark:text-gray-400">
                  {item.name}:
                </span>
                <span className="text-xs font-bold text-gray-900 dark:text-white">
                  {item.value}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}