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