"use client";

import { useTranslations } from "next-intl";
import { Check, Loader2 } from "lucide-react";

import { Button } from "@/components/ui/button";
import type { ProjectSaveStatus } from "@/lib/project-save-status";
import { cn } from "@/lib/utils";

interface ProjectSaveIndicatorProps {
  status: ProjectSaveStatus;
  onRetry?: () => void;
  className?: string;
}

export function ProjectSaveIndicator({
  status,
  onRetry,
  className,
}: ProjectSaveIndicatorProps) {
  const t = useTranslations("auto.componentsStudioProjectSaveIndicator");

  if (status === "idle") return null;

  if (status === "pending" || status === "saving") {
    return (
      <span
        className={cn(
          "flex items-center gap-1.5 text-xs text-gray-400",
          className
        )}
        aria-live="polite"
      >
        <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
        {t("saving")}
      </span>
    );
  }

  if (status === "saved") {
    return (
      <span
        className={cn(
          "flex items-center gap-1 text-xs font-medium text-green-400",
          className
        )}
        aria-live="polite"
      >
        <Check className="h-3.5 w-3.5" aria-hidden />
        {t("saved")}
      </span>
    );
  }

  if (status === "local") {
    return (
      <span
        className={cn("text-xs font-medium text-gray-400", className)}
        aria-live="polite"
      >
        {t("localSave")}
      </span>
    );
  }

  return (
    <span className={cn("flex items-center gap-2", className)} aria-live="polite">
      <span className="text-xs text-red-400">{t("saveFailed")}</span>
      {onRetry ? (
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="h-7 border-[#2a2d3e] bg-[#1a1d2e] px-2 text-xs text-gray-200 hover:bg-[#252938]"
          onClick={onRetry}
        >
          {t("retry")}
        </Button>
      ) : null}
    </span>
  );
}
