"use client";

import { AlertTriangle, CheckCircle2, Info, Loader2, XCircle } from "lucide-react";

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

type PageStateVariant =
  | "error"
  | "empty"
  | "warning"
  | "info"
  | "success"
  | "loading";

const pageStateStyles: Record<
  PageStateVariant,
  { border: string; bg: string; icon: typeof Info; iconColor: string }
> = {
  error: {
    border: "border-[#f53f3f]",
    bg: "bg-[#fff1f0]",
    icon: XCircle,
    iconColor: "text-[#f53f3f]",
  },
  empty: {
    border: "border-[#e5e6eb]",
    bg: "bg-[#f7f8fa]",
    icon: Info,
    iconColor: "text-[#8f959e]",
  },
  warning: {
    border: "border-[#ff7d00]",
    bg: "bg-[#fff7e8]",
    icon: AlertTriangle,
    iconColor: "text-[#ff7d00]",
  },
  info: {
    border: "border-[#3370ff]",
    bg: "bg-[#eef4ff]",
    icon: Info,
    iconColor: "text-[#3370ff]",
  },
  success: {
    border: "border-[#00b42a]",
    bg: "bg-[#f0fbf5]",
    icon: CheckCircle2,
    iconColor: "text-[#00b42a]",
  },
  loading: {
    border: "border-[#e5e6eb]",
    bg: "bg-[#f7f8fa]",
    icon: Loader2,
    iconColor: "text-[#8f959e]",
  },
};

export type PageStateProps = {
  variant?: PageStateVariant;
  title: string;
  description?: string;
  actionLabel?: string;
  onAction?: () => void;
  actionDisabled?: boolean;
  layout?: "compact" | "center" | "card";
  className?: string;
};

export function PageState({
  variant = "empty",
  title,
  description,
  actionLabel,
  onAction,
  actionDisabled = false,
  layout = "compact",
  className,
}: PageStateProps) {
  const styles = pageStateStyles[variant];
  const isCentered = layout === "center" || layout === "card";
  const Icon = styles.icon;
  const iconSizeClass = isCentered ? "h-10 w-10" : "h-5 w-5";
  const iconClassName = cn(
    iconSizeClass,
    styles.iconColor,
    variant === "loading" && "animate-spin"
  );
  const cardClassName =
    layout === "card" ? "bg-white border border-[#e5e6eb]" : undefined;

  return (
    <div
      className={cn(
        "rounded-lg border p-4",
        styles.border,
        styles.bg,
        isCentered && "flex flex-col items-center text-center p-8",
        cardClassName,
        className
      )}
    >
      <div className={cn("flex items-center gap-3", isCentered && "flex-col")}>
        <Icon className={iconClassName} />
        <div>
          <p className="text-sm font-medium text-[#1f2329]">{title}</p>
          {description ? (
            <p className="text-sm text-[#646a73]">{description}</p>
          ) : null}
        </div>
      </div>
      {actionLabel && onAction ? (
        <div className={cn(isCentered ? "mt-4" : "mt-3")}>
          <Button
            variant={variant === "error" ? "destructive" : "outline"}
            className={variant === "error" ? "h-8" : "h-8 border-[#e5e6eb]"}
            onClick={onAction}
            disabled={actionDisabled}
          >
            {actionLabel}
          </Button>
        </div>
      ) : null}
    </div>
  );
}