"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";
import { PRIMARY_COLOR, PRIMARY_COLOR_HOVER } from "@/lib/common";

export interface FooterDataItem {
  label: string;
  value: string | number;
}

export interface FloatingFooterProps {
  data: FooterDataItem[];
  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 = () => (cancelHref ? router.push(cancelHref) : router.back());

  return (
    <div
      className={cn(
        "fixed bottom-0 left-0 w-full border-t border-slate-200/80 transition-all duration-200",
        "shadow-[0_-4px_24px_-4px_rgba(0,0,0,0.08)]",
        sidebarOverlayActive
          ? "z-30 bg-white/70 backdrop-blur-md pointer-events-none"
          : "z-40 bg-white/95 backdrop-blur-sm"
      )}
    >
      <div
        className={cn(
          "container mx-auto px-3 py-2 flex flex-col gap-2 transition-opacity duration-200 sm:px-5 sm:py-3",
          sidebarOverlayActive ? "opacity-60" : "opacity-100"
        )}
      >
        <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
          {/* Left: Cancel */}
          <button
            type="button"
            onClick={handleCancel}
            className="flex w-full items-center justify-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5 text-[11px] font-medium text-slate-600 shadow-sm transition-all hover:border-slate-300 hover:bg-slate-50 sm:w-auto sm:px-4 sm:py-2 sm:text-xs"
          >
            <X size={14} aria-hidden />
            Cancel
          </button>

          {/* Right: Summary + Save */}
          <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-5">
            {data.length > 0 && (
              <dl className="grid w-full grid-cols-2 gap-x-4 gap-y-0.5 text-[10px] md:min-w-[280px] md:text-xs">
                {data.map((item, idx) => {
                  const emphasize = item.label.toLowerCase().includes("net");
                  return (
                    <React.Fragment key={idx}>
                      <dt
                        className={cn(
                          "truncate text-slate-500",
                          emphasize && "font-semibold text-slate-700"
                        )}
                      >
                        {item.label}
                      </dt>
                      <dd
                        className={cn(
                          "text-right tabular-nums text-slate-700",
                          emphasize && "font-bold"
                        )}
                        style={emphasize ? { color: PRIMARY_COLOR } : undefined}
                      >
                        {item.value}
                      </dd>
                    </React.Fragment>
                  );
                })}
              </dl>
            )}

            <button
              type="button"
              onClick={onSave}
              disabled={isSaving}
              aria-busy={isSaving}
              className={cn(
                "relative flex w-full items-center justify-center gap-1.5 overflow-hidden rounded-lg px-4 py-1.5 text-[11px] font-semibold text-white shadow-sm transition-all sm:w-auto sm:px-5 sm:py-2 sm:text-xs",
                isSaving ? "cursor-not-allowed opacity-70" : "hover:brightness-110 active:scale-[0.98]"
              )}
              style={{
                background: isSaving
                  ? PRIMARY_COLOR
                  : `linear-gradient(135deg, ${PRIMARY_COLOR} 0%, ${PRIMARY_COLOR_HOVER} 100%)`,
                boxShadow: isSaving ? "none" : "0 4px 14px -2px rgba(66,139,77,0.35)",
              }}
            >
              {!isSaving && (
                <span
                  className="pointer-events-none absolute inset-0 -translate-x-full skew-x-[-12deg] bg-white/20"
                  style={{ animation: "shimmer 2.4s ease-in-out infinite" }}
                  aria-hidden
                />
              )}
              {isSaving ? (
                <>
                  <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
                  {savingLabel}
                </>
              ) : (
                <>
                  <Save size={14} aria-hidden />
                  {saveLabel}
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}