"use client";

import type { ReactNode } from "react";

import Link from "next/link";
import { Loader2, RotateCcw, Save, X } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type Props = {
  /** Cancel target. Either an href OR an onCancel handler. Omit to hide Cancel button. */
  cancelHref?: string;
  onCancel?: () => void;
  cancelLabel?: string;
  /** When provided, shows a Reset button. */
  onReset?: () => void;
  resetLabel?: string;
  /** Save button label. */
  saveLabel?: string;
  /** Use type="button" with onSave instead of relying on form submit. */
  onSave?: () => void;
  /** Set to true while submission is in-flight to disable buttons and show spinner. */
  isSaving?: boolean;
  /** Slot for extra controls (e.g. "Save and create another"). Rendered before Cancel/Reset. */
  extra?: ReactNode;
  /** Optional left-aligned status text (e.g. unsaved changes indicator). */
  status?: ReactNode;
  className?: string;
};

export function FormSaveBar({
  cancelHref,
  onCancel,
  cancelLabel = "Cancel",
  onReset,
  resetLabel = "Reset",
  saveLabel = "Save changes",
  onSave,
  isSaving = false,
  extra,
  status,
  className,
}: Props) {
  const hasCancel = Boolean(cancelHref || onCancel);

  return (
    <div
      className={cn(
        "sticky bottom-0 z-10 -mx-4 mt-4 flex flex-wrap items-center justify-between gap-2 border-t bg-background/95 px-4 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/80 md:-mx-6 md:px-6",
        className,
      )}
    >
      <div className="mr-auto min-h-5 text-muted-foreground text-xs">
        {status ?? null}
      </div>
      <div className="flex flex-wrap items-center justify-end gap-2">
        {extra}
        {onReset ? (
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="h-8 gap-1.5"
            onClick={onReset}
            disabled={isSaving}
          >
            <RotateCcw className="size-3.5" />
            {resetLabel}
          </Button>
        ) : null}
        {hasCancel ? (
          cancelHref ? (
            <Button
              type="button"
              variant="outline"
              size="sm"
              className="h-8 gap-1.5"
              disabled={isSaving}
              asChild
            >
              <Link href={cancelHref}>
                <X className="size-3.5" />
                {cancelLabel}
              </Link>
            </Button>
          ) : (
            <Button
              type="button"
              variant="outline"
              size="sm"
              className="h-8 gap-1.5"
              onClick={onCancel}
              disabled={isSaving}
            >
              <X className="size-3.5" />
              {cancelLabel}
            </Button>
          )
        ) : null}
        <Button
          type={onSave ? "button" : "submit"}
          size="sm"
          className="h-8 min-w-[120px] gap-1.5"
          onClick={onSave}
          disabled={isSaving}
        >
          {isSaving ? (
            <>
              <Loader2 className="size-3.5 animate-spin" />
              Saving…
            </>
          ) : (
            <>
              <Save className="size-3.5" />
              {saveLabel}
            </>
          )}
        </Button>
      </div>
    </div>
  );
}