"use client";

import React from "react";
import { X, Save, Loader2 } from "lucide-react";
import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import { useSidebarOverlay } from "@/context/SidebarContext";

interface FooterData {
  label: string;
  value: string | number;
}

interface FloatingFooterProps {
  data: FooterData[];
  onSave: () => void;
  cancelHref?: string;
  isSaving?: boolean;
  saveLabel?: string;
  savingLabel?: string;
}

export default function FloatingFooter({
  data,
  onSave,
  cancelHref,
  isSaving = false,
  saveLabel = "Save",
  savingLabel = "Saving...",
}: FloatingFooterProps) {
  const router = useRouter();
  const sidebarOverlayActive = useSidebarOverlay();

  const handleCancel = () => {
    if (cancelHref) {
      router.push(cancelHref);
    } else {
      router.back();
    }
  };

  const containerClass = cn(
    "fixed bottom-0 left-0 w-full border-t border-gray-200 shadow-lg transition-all duration-200",
    sidebarOverlayActive
      ? "z-30 bg-white/70 backdrop-blur-md pointer-events-none"
      : "z-40 bg-white"
  );

  const contentClass = cn(
    "container mx-auto px-2.5 py-1.5 flex flex-col gap-2 transition-opacity duration-200 sm:px-4 sm:py-2.5",
    sidebarOverlayActive ? "opacity-60" : "opacity-100"
  );

  const cancelButtonClass = cn(
    "flex w-full items-center justify-center gap-1.5 rounded-lg bg-gray-200 px-2.5 py-1 text-[11px] font-medium text-gray-700 transition-all hover:bg-gray-300 sm:w-auto sm:px-4 sm:py-2 sm:text-sm"
  );

  const saveButtonClass = cn(
    "flex w-full items-center justify-center gap-1.5 rounded-lg px-2.5 py-1 text-[11px] font-semibold text-white transition-all sm:w-auto sm:px-4 sm:py-2 sm:text-sm",
    isSaving ? "bg-indigo-300 cursor-not-allowed" : "bg-indigo-600 hover:bg-indigo-500"
  );

  return (
    <div className={containerClass}>
      <div className={contentClass}>
        <div className="flex flex-col gap-1.5 md:flex-row md:items-center md:justify-between">
          {/* Left: Cancel Button */}
          <div className="flex flex-col gap-1.5 sm:flex-row">
            <button
              type="button"
              onClick={handleCancel}
              className={cancelButtonClass}
            >
              <X size={16} aria-hidden />
              Cancel
            </button>
          </div>

          {/* Center / Right: Data + Save */}
          <div className="flex flex-col gap-1.5 md:flex-row md:items-center md:justify-end md:gap-5">
            <dl className="grid w-full grid-cols-2 gap-x-2.5 gap-y-0.5 text-[11px] text-gray-700 md:min-w-[320px] md:text-sm">
              {data.map((item, idx) => {
                const emphasize = item.label.toLowerCase().includes("net");
                return (
                  <React.Fragment key={idx}>
                    <dt className={cn("truncate", emphasize && "font-semibold")}>{item.label}</dt>
                    <dd className={cn("text-right", emphasize && "font-semibold")}>{item.value}</dd>
                  </React.Fragment>
                );
              })}
            </dl>

            <button
              type="button"
              onClick={onSave}
              disabled={isSaving}
              aria-busy={isSaving}
              className={saveButtonClass}
            >
              {isSaving ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin" aria-hidden />
                  {savingLabel}
                </>
              ) : (
                <>
                  <Save size={16} aria-hidden />
                  {saveLabel}
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}