"use client";

import { usePathname } from "next/navigation";
import Button from "./ui/Button";
import Image from "next/image";

interface SomethingWentWrongProps {
  image?: string;
  title?: string;
  description?: string;
  buttonText?: string;
  buttonHref?: string;
  onClick?: () => void;
  loading?: boolean;
  className?: string;
  variant?: "page" | "section" | "inline";
  retryText?: string;
  onRetry?: () => void;
}

export default function SomethingWentWrong({
  image = "/images/error-state.svg",
  title = "Something went wrong",
  description = "We couldn't complete your request. Please try again or return to the home page.",
  buttonText = "Return to Home",
  buttonHref = "/",
  onClick,
  loading = false,
  className,
  variant = "page",
  retryText = "Try again",
  onRetry,
}: SomethingWentWrongProps) {
  const pathname = usePathname();

  const variantClassName =
    variant === "page"
      ? pathname.includes("/admin")
        ? "min-h-[calc(100vh-4rem)] lg:min-h-[calc(100vh-5rem)]"
        : "pb-8 pt-36 md:pt-40 xl:pt-44 2xl:pt-48"
      : variant === "section"
        ? "rounded-2xl glass-card-v2 px-6 py-10 md:px-8 md:py-12"
        : "rounded-xl border border-[#E5DFFF] bg-white/70 px-4 py-5";

  const imageWidth = variant === "page" ? "w-40 sm:w-48 md:w-56 lg:w-64 xl:w-72" : "w-24 sm:w-28 md:w-32";
  const headingClassName =
    variant === "page"
      ? "text-2xl lg:text-3xl 2xl:text-4xl 2xl:leading-11"
      : variant === "section"
        ? "text-xl md:text-2xl"
        : "text-lg md:text-xl";
  const descriptionClassName =
    variant === "page" ? "text-base sm:text-lg 2xl:text-lg 2xl:leading-7" : "text-sm md:text-base";

  return (
    <section
      className={`relative flex w-full items-center justify-center px-4 ${variantClassName} ${className ?? ""}`}
      role="status"
      aria-live="polite"
    >
      <div className="mx-auto w-full max-w-2xl text-center">
        <div className="mb-6 flex justify-center sm:mb-8">
          <Image
            src={image}
            alt=""
            aria-hidden="true"
            width={280}
            height={280}
            priority={variant === "page"}
            className={`h-auto ${imageWidth}`}
          />
        </div>

        <h2 className={`mt-4 font-heading font-medium capitalize leading-tight text-heading ${headingClassName}`}>
          {title}
        </h2>

        <p className={`mx-auto mt-4 text-text md:mt-5 ${descriptionClassName}`}>
          {description}
        </p>

        {(onRetry || buttonText) && (
          <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
            {onRetry && (
              <Button
                onClick={onRetry}
                loading={loading}
                className="w-full sm:w-auto"
                buttonClassName="w-full min-w-0 sm:min-w-[180px]"
              >
                {retryText}
              </Button>
            )}

            {buttonText && (
              <Button
                href={buttonHref}
                onClick={onClick}
                className="w-full sm:w-auto"
                buttonClassName="w-full min-w-0 sm:min-w-[180px]"
              >
                {buttonText}
              </Button>
            )}
          </div>
        )}
      </div>
    </section>
  );
}