"use client";

import { ArrowPathIcon, ArrowRightIcon } from "@heroicons/react/24/outline";

function getEpcHex(letter: string | null | undefined): string {
  switch (letter?.toUpperCase()) {
    case "A": return "#117d58";
    case "B": return "#2da55c";
    case "C": return "#8dbd40";
    case "D": return "#f7cd14";
    case "E": return "#f3a96a";
    case "F": return "#ef8026";
    case "G": return "#e41e3b";
    default:  return "#9ca3af";
  }
}

interface StickyImpactBarProps {
  hasPendingChanges: boolean;
  pendingCount: number;
  savedSap: number;
  savedEpc: string;
  projectedSap: number;
  projectedEpc: string;
  projectedCo2: number;
  projectedHeatDemand: number;
  projectedCost: number;
  projectedContingency: number;
  onSaveAll: () => void;
  onDiscard: () => void;
  isPending: boolean;
}

function formatNumber(n: number): string {
  return n.toLocaleString("en-GB", { maximumFractionDigits: 0 });
}

export default function StickyImpactBar({
  hasPendingChanges,
  pendingCount,
  savedSap,
  savedEpc,
  projectedSap,
  projectedEpc,
  projectedCo2,
  projectedHeatDemand,
  projectedCost,
  projectedContingency,
  onSaveAll,
  onDiscard,
  isPending,
}: StickyImpactBarProps) {
  return (
    <div
      className={`fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/95 backdrop-blur-md shadow-[0_-8px_30px_rgba(0,0,0,0.08)] transition-transform duration-300 ${
        hasPendingChanges ? "translate-y-0" : "translate-y-full"
      }`}
    >
      <div className="max-w-[1400px] mx-auto px-6 py-4 flex items-center gap-4 flex-wrap">
        {/* Left: pending count badge */}
        <span className="text-xs font-bold px-3 py-1.5 rounded-full bg-amber-100 text-amber-700 shrink-0">
          {pendingCount} unsaved {pendingCount === 1 ? "change" : "changes"}
        </span>

        {/* Center: metric chips */}
        <div className="flex items-center gap-3 flex-1 flex-wrap">
          {/* SAP */}
          <div className="px-3 py-2 bg-gray-50 rounded-lg border border-gray-100 flex items-center gap-2">
            <div>
              <p className="text-[9px] font-bold uppercase tracking-widest text-gray-400 mb-0.5">SAP</p>
              <div className="flex items-center gap-1.5">
                <span className="text-sm font-black text-gray-400 font-manrope">
                  {savedSap.toFixed(1)}
                </span>
                <ArrowRightIcon className="w-3 h-3 text-gray-300" />
                <span className="text-sm font-black text-brandblue font-manrope">
                  {projectedSap.toFixed(1)}
                </span>
              </div>
            </div>
          </div>

          {/* EPC */}
          <div className="px-3 py-2 bg-gray-50 rounded-lg border border-gray-100 flex items-center gap-2">
            <div>
              <p className="text-[9px] font-bold uppercase tracking-widest text-gray-400 mb-0.5">EPC</p>
              <div className="flex items-center gap-1.5">
                <span
                  className="text-sm font-black font-manrope"
                  style={{ color: getEpcHex(savedEpc) }}
                >
                  {savedEpc}
                </span>
                <ArrowRightIcon className="w-3 h-3 text-gray-300" />
                <span
                  className="text-sm font-black font-manrope"
                  style={{ color: getEpcHex(projectedEpc) }}
                >
                  {projectedEpc}
                </span>
              </div>
            </div>
          </div>

          {/* CO₂ */}
          <div className="px-3 py-2 bg-gray-50 rounded-lg border border-gray-100">
            <p className="text-[9px] font-bold uppercase tracking-widest text-gray-400 mb-0.5">CO₂ saved</p>
            <p className="text-sm font-black text-brandblue font-manrope">
              {projectedCo2.toFixed(1)} t/yr
            </p>
          </div>

          {/* Heat demand — hidden when zero */}
          {projectedHeatDemand > 0 && (
            <div className="px-3 py-2 bg-gray-50 rounded-lg border border-gray-100">
              <p className="text-[9px] font-bold uppercase tracking-widest text-gray-400 mb-0.5">Heat demand</p>
              <p className="text-sm font-black text-brandblue font-manrope">
                {projectedHeatDemand.toFixed(0)} kWh/yr
              </p>
            </div>
          )}

          {/* Cost — hidden when zero */}
          {projectedCost > 0 && (
            <div className="px-3 py-2 bg-gray-50 rounded-lg border border-gray-100">
              <p className="text-[9px] font-bold uppercase tracking-widest text-gray-400 mb-0.5">Est. Cost</p>
              <p className="text-sm font-black text-brandblue font-manrope">
                £{formatNumber(projectedCost)}
              </p>
            </div>
          )}

          {/* Contingency — hidden when zero */}
          {projectedContingency > 0 && (
            <div className="px-3 py-2 bg-gray-50 rounded-lg border border-gray-100">
              <p className="text-[9px] font-bold uppercase tracking-widest text-gray-400 mb-0.5">Contingency</p>
              <p className="text-sm font-black text-brandbrown font-manrope">
                ~£{formatNumber(projectedContingency)}
              </p>
            </div>
          )}
        </div>

        {/* Right: action buttons */}
        <div className="flex items-center gap-2 shrink-0">
          {isPending && (
            <ArrowPathIcon className="w-4 h-4 animate-spin text-gray-400" />
          )}
          <button
            disabled={isPending}
            onClick={onDiscard}
            className="px-4 py-2 rounded-lg border border-gray-200 text-gray-600 font-bold text-sm hover:bg-gray-50 transition-colors disabled:opacity-40"
          >
            Discard
          </button>
          <button
            disabled={isPending}
            onClick={onSaveAll}
            className="px-4 py-2 rounded-lg bg-brandblue text-white font-bold text-sm hover:bg-blue-700 transition-colors disabled:opacity-40"
          >
            Save all changes
          </button>
        </div>
      </div>
    </div>
  );
}
