"use client";

import { useEffect, useRef, useState } from "react";
import { Check, Loader2, AlertCircle } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

export interface SaveResult {
  ok: boolean;
  message?: string;
  error?: string;
}

interface SaveButtonProps {
  /** Runs the section's Server Action and reports back. */
  onSave: () => Promise<SaveResult>;
  disabled?: boolean;
}

type Status = "idle" | "saving" | "saved" | "error";

/**
 * Footer save action for a settings section. Calls the section's Server
 * Action, then shows a brief success or error message instead of the old
 * unconditional "Saved" flash.
 */
export function SaveButton({ onSave, disabled }: SaveButtonProps) {
  const [status, setStatus] = useState<Status>("idle");
  const [message, setMessage] = useState("");
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(() => {
    return () => {
      if (timer.current) clearTimeout(timer.current);
    };
  }, []);

  const handleSave = async () => {
    if (status === "saving") return;
    setStatus("saving");
    const result = await onSave();
    if (result.ok) {
      setMessage(result.message ?? "Saved");
      setStatus("saved");
    } else {
      setMessage(result.error ?? "Something went wrong. Please try again.");
      setStatus("error");
    }
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => setStatus("idle"), 2800);
  };

  return (
    <div className="flex items-center justify-end gap-3">
      {message && status !== "idle" && (
        <span
          className={cn(
            "text-sm",
            status === "error"
              ? "text-destructive"
              : "text-muted-foreground",
          )}
        >
          {message}
        </span>
      )}

      <Button
        size="sm"
        onClick={handleSave}
        disabled={disabled || status === "saving"}
      >
        {status === "saving" ? (
          <>
            <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
            Saving…
          </>
        ) : status === "saved" ? (
          <>
            <Check className="h-4 w-4 mr-1.5" />
            Saved
          </>
        ) : status === "error" ? (
          <>
            <AlertCircle className="h-4 w-4 mr-1.5" />
            Save changes
          </>
        ) : (
          "Save changes"
        )}
      </Button>
    </div>
  );
}