import { ExclamationTriangleIcon, ArrowPathIcon } from "@heroicons/react/24/outline";
import { Button } from "./button";
import { cn } from "@/lib/utils";

interface ErrorStateProps {
  title?: string;
  message?: string;
  onRetry?: () => void;
  retryLabel?: string;
  className?: string;
  variant?: "page" | "card" | "inline";
}

export function ErrorState({
  title = "Something went wrong",
  message = "An unexpected error occurred. Please try again.",
  onRetry,
  retryLabel = "Try again",
  className,
  variant = "card",
}: ErrorStateProps) {
  const baseClasses = "flex flex-col items-center justify-center text-center";

  const variantClasses = {
    page: "min-h-[400px] py-12",
    card: "bg-white border border-red-200 rounded-[var(--cp-card-radius)] p-[var(--cp-card-padding)] shadow-[var(--cp-card-shadow)]",
    inline: "bg-red-50 border border-red-200 rounded-md p-4",
  };

  const iconSizes = {
    page: "h-16 w-16",
    card: "h-12 w-12",
    inline: "h-5 w-5",
  };

  const titleSizes = {
    page: "text-xl",
    card: "text-lg",
    inline: "text-sm",
  };

  const messageSizes = {
    page: "text-base",
    card: "text-sm",
    inline: "text-sm",
  };

  return (
    <div className={cn(baseClasses, variantClasses[variant], className)}>
      <div className={cn("text-red-500 mb-4", variant === "inline" && "flex-shrink-0")}>
        <ExclamationTriangleIcon className={iconSizes[variant]} />
      </div>

      <div className={variant === "inline" ? "ml-3 flex-1" : ""}>
        <h3 className={cn("font-semibold text-red-800 mb-2", titleSizes[variant])}>{title}</h3>

        <p className={cn("text-red-700 mb-4 max-w-md", messageSizes[variant])}>{message}</p>

        {onRetry && (
          <Button
            onClick={onRetry}
            variant="outline"
            size={variant === "inline" ? "sm" : "default"}
            className="text-red-700 border-red-300 hover:bg-red-50"
          >
            <ArrowPathIcon className="h-4 w-4 mr-2" />
            {retryLabel}
          </Button>
        )}
      </div>
    </div>
  );
}

export function NetworkErrorState({ onRetry }: { onRetry?: () => void }) {
  return (
    <ErrorState
      title="Connection Error"
      message="Unable to connect to the server. Please check your internet connection and try again."
      onRetry={onRetry}
      retryLabel="Reconnect"
    />
  );
}

export function NotFoundErrorState({ resourceName = "resource" }: { resourceName?: string }) {
  return (
    <ErrorState
      title="Not Found"
      message={`The ${resourceName} you're looking for could not be found.`}
      variant="page"
    />
  );
}

export function PermissionErrorState() {
  return (
    <ErrorState
      title="Access Denied"
      message="You don't have permission to access this resource."
      variant="page"
    />
  );
}
