"use client";

import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardFooter,
} from "@/app/shadcn_components/ui/card";
import { motion } from "framer-motion";
import { FileQuestion, AlertTriangle, TrendingDown } from "lucide-react";
import type { EpcCoverageCounts } from "./types";

export function EpcQualityCards({
  epcCoverage,
  total,
  expiredEpcs,
  likelyDowngrades,
}: {
  epcCoverage: EpcCoverageCounts;
  total: number;
  expiredEpcs: number;
  likelyDowngrades: number;
}) {
  // Homes with no certificate at all — neither lodged nor historical.
  const missing = epcCoverage.withoutEpc;
  const pctMissing = total > 0 ? (missing / total) * 100 : 0;

  // Expired EPCs
  const pctExpired = total > 0 ? (expiredEpcs / total) * 100 : 0;

  // Likely downgrades
  const pctDowngrades = total > 0 ? (likelyDowngrades / total) * 100 : 0;

  const cards = [
    {
      key: "missing",
      title: "Homes Without an EPC",
      icon: FileQuestion,
      color: "text-red-600",
      value: missing,
      subtitle: `${pctMissing.toFixed(1)}% have no EPC on record`,
      barColor: "bg-red-500",
      barWidth: pctMissing,
      gradient: "bg-gradient-to-br from-white to-red-50/20",
    },
    {
      key: "expired",
      title: "Expired EPCs",
      icon: AlertTriangle,
      color: "text-amber-600",
      value: expiredEpcs,
      subtitle: `${pctExpired.toFixed(1)}% of homes have expired EPCs`,
      barColor: "bg-amber-500",
      barWidth: pctExpired,
      gradient: "bg-gradient-to-br from-white to-amber-50/20",
    },
    {
      key: "downgrades",
      title: "Likely EPC Downgrades",
      icon: TrendingDown,
      color: "text-brandblue",
      value: likelyDowngrades,
      subtitle: `${pctDowngrades.toFixed(1)}% likely EPC score reductions`,
      barColor: "bg-brandblue",
      barWidth: pctDowngrades,
      gradient: "bg-gradient-to-br from-white to-blue-50/20",
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
      {cards.map((c) => {
        const Icon = c.icon;
        return (
          <Card
            key={c.key}
            className={`relative h-full flex flex-col border border-gray-100 ${c.gradient} hover:shadow-md hover:-translate-y-0.5 transition-all`}
          >
            {/* Header */}
            <CardHeader className="flex flex-row items-center gap-2 pb-1">
              <div className="p-1.5 rounded-md bg-gray-100">
                <motion.div whileHover={{ scale: 1.1 }} className="p-1">
                  <Icon className={`h-4 w-4 ${c.color}`} />
                </motion.div>
              </div>
              <CardTitle className="text-md font-medium text-gray-600">
                {c.title}
              </CardTitle>
            </CardHeader>

            {/* Content */}
            <CardContent className="flex flex-col pb-2">
              <div className="text-2xl font-semibold text-brandblue">
                {c.value}
              </div>

              {/* Mini bar */}
              <div className="w-full mt-3 bg-gray-200 rounded-full h-2">
                <div
                  className={`h-2 rounded-full ${c.barColor}`}
                  style={{ width: `${c.barWidth}%` }}
                />
              </div>
            </CardContent>

            {/* Footer */}
            <CardFooter className="pt-0 pb-4">
              <p className="text-xs text-gray-500">{c.subtitle}</p>
            </CardFooter>
          </Card>
        );
      })}
    </div>
  );
}
