"use client";
import { formatNumber } from "@/app/utils";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/app/shadcn_components/ui/drawer";
import { CheckIcon } from "@heroicons/react/24/outline";
import type { AugmentedRec } from "./recommendation-types";

interface AlternativesDrawerProps {
  isOpen: boolean;
  onClose: () => void;
  categoryLabel: string;
  recs: AugmentedRec[];
  selected: AugmentedRec | null;
  displaySelected: AugmentedRec | null;
  onSelect: (rec: AugmentedRec) => void;
  isPending: boolean;
}

export default function AlternativesDrawer({
  isOpen,
  onClose,
  categoryLabel,
  recs,
  displaySelected,
  onSelect,
  isPending,
}: AlternativesDrawerProps) {
  const alternatives = recs.filter((r) => !r.alreadyInstalled);

  return (
    <Drawer open={isOpen} onOpenChange={(open) => !open && onClose()}>
      <DrawerContent className="max-h-[80vh]">
        <DrawerHeader className="px-6 pt-4 pb-3 border-b border-gray-100">
          <DrawerTitle className="font-manrope text-xl font-bold text-brandblue">
            {categoryLabel}
          </DrawerTitle>
          <p className="text-sm text-gray-400 mt-0.5">
            {alternatives.length} option
            {alternatives.length !== 1 ? "s" : ""} available — select to update
            the plan
          </p>
        </DrawerHeader>

        <div className="overflow-y-auto px-6 py-4 space-y-2 pb-10">
          {alternatives.map((rec) => {
            const isSelected = displaySelected?.id === rec.id;
            return (
              <button
                key={String(rec.id)}
                disabled={isPending}
                onClick={() => {
                  onSelect(rec);
                  onClose();
                }}
                className={`w-full text-left p-5 rounded-xl border transition-colors ${
                  isSelected
                    ? "border-brandblue bg-brandblue/5"
                    : "border-gray-100 bg-white hover:bg-gray-50"
                } disabled:opacity-50`}
              >
                <div className="flex items-start justify-between gap-4">
                  <div className="flex items-start gap-3 flex-1 min-w-0">
                    <div
                      className={`mt-0.5 w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-colors ${
                        isSelected
                          ? "border-brandblue bg-brandblue"
                          : "border-gray-300"
                      }`}
                    >
                      {isSelected && (
                        <CheckIcon className="w-3 h-3 text-white" />
                      )}
                    </div>
                    <div className="min-w-0">
                      <p className="font-semibold text-brandblue text-sm leading-snug">
                        {rec.description}
                      </p>
                      <div className="flex items-center gap-3 mt-1.5">
                        {rec.sapPoints !== null && rec.sapPoints > 0 && (
                          <span className="text-xs text-gray-400 font-medium">
                            SAP +{rec.sapPoints.toFixed(1)}
                          </span>
                        )}
                        {rec.energyCostSavings !== null &&
                          rec.energyCostSavings > 0 && (
                            <span className="text-xs text-gray-400 font-medium">
                              £{formatNumber(rec.energyCostSavings)}/yr saved
                            </span>
                          )}
                      </div>
                    </div>
                  </div>
                  <div className="text-right flex-shrink-0">
                    <p className="font-manrope font-bold text-brandblue">
                      £{formatNumber(rec.estimatedCost ?? 0)}
                    </p>
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </DrawerContent>
    </Drawer>
  );
}
