"use client";

import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/app/shadcn_components/ui/tooltip";

const EPC_BANDS = [
  { band: "A", range: "92–100", color: "#117d58", desc: "Exceptional, near-zero energy bills, usually new-builds or eco-homes." },
  { band: "B", range: "81–91", color: "#2da55c", desc: "Very efficient, often featuring solar panels, high-grade insulation, and modern heating." },
  { band: "C", range: "69–80", color: "#8dbd40", desc: "Good, above-average efficiency; common target for retrofitting existing homes." },
  { band: "D", range: "55–68", color: "#f7cd14", desc: "Average, the typical rating for many homes in the UK." },
  { band: "E", range: "39–54", color: "#f3a96a", desc: "Below average, likely requires better insulation and boiler upgrades." },
  { band: "F", range: "21–38", color: "#ef8026", desc: "Poor, high energy costs and lower energy performance." },
  { band: "G", range: "1–20",  color: "#e41e3b", desc: "Very poor, least efficient, high energy costs." },
];

export function EpcInfoTooltip() {
  return (
    <TooltipProvider delayDuration={200}>
      <Tooltip>
        <TooltipTrigger asChild>
          <button
            className="inline-flex items-center justify-center w-4 h-4 rounded-full text-gray-400 hover:text-brandblue transition-colors focus:outline-none"
            aria-label="EPC and SAP score explanation"
          >
            <QuestionMarkCircleIcon className="w-4 h-4" />
          </button>
        </TooltipTrigger>
        <TooltipContent
          side="right"
          className="max-w-xs p-0 overflow-hidden border-gray-200 shadow-xl"
          sideOffset={8}
        >
          <div className="px-4 pt-3 pb-2 bg-gray-50 border-b border-gray-100">
            <p className="text-xs font-bold text-gray-700 uppercase tracking-widest">EPC Rating Bands</p>
            <p className="text-[11px] text-gray-400 mt-0.5">Based on the SAP score (1–100)</p>
          </div>
          <div className="divide-y divide-gray-50">
            {EPC_BANDS.map(({ band, range, color, desc }) => (
              <div key={band} className="flex items-start gap-3 px-4 py-2.5">
                <span
                  className="shrink-0 w-6 h-6 rounded-md flex items-center justify-center text-white text-xs font-black leading-none mt-0.5"
                  style={{ backgroundColor: color }}
                >
                  {band}
                </span>
                <div className="min-w-0">
                  <p className="text-[11px] font-bold text-gray-700">{range}</p>
                  <p className="text-[11px] text-gray-400 leading-snug mt-0.5">{desc}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="px-4 py-2.5 bg-gray-50 border-t border-gray-100">
            <p className="text-[11px] text-gray-400 leading-snug">
              <span className="font-semibold text-gray-600">SAP score</span> — Standard Assessment Procedure. A government-approved method for rating the energy performance of homes on a scale of 1 to 100.
            </p>
          </div>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}
