"use client";

import Image from "next/image";
import Link from "next/link";
import { HiAcademicCap, HiChevronRight } from "react-icons/hi";
import errorImage from "@/../public/404.svg";
import { useCallback } from "react";

interface ErrorBoundaryProps {
  error: Error;
  reset: () => void;
}

type QuickLinkItem = {
  id: string;
  icon: React.ReactNode;
  title: string;
  href: string;
  description: string;
};

export const ErrorBoundary = ({ error, reset }: ErrorBoundaryProps) => {
  const handleReset = useCallback(() => {
    reset();
  }, [reset]);

  // Quick links data array for DRY principle
  const quickLinks: QuickLinkItem[] = [
    {
      id: "home",
      icon: (
        <HiAcademicCap className="h-6 w-6 text-blue-500" aria-hidden="true" />
      ),
      title: "Create your opinion",
      href: "/",
      description:
        "Please try again later or contact support if the problem persists.",
    },
  ];

  return (
    <div role="alert" aria-live="assertive">
      <main className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 flex flex-row justify-center h-[600px] max-sm:h-[600px] max-md:h-[700px] max-md:flex-col items-center">
        {/* Error Illustration */}
        <div className="w-[50%] max-md:w-[30%] max-sm:w-[38%] max-sm:mt-16 max-md:mt-28 mx-auto">
          <Image
            src={errorImage}
            alt="Error illustration"
            className="w-full"
            width={1000}
            height={1000}
            priority
          />
        </div>

        {/* Error Content */}
        <div className="max-w-xl mx-auto py-16 sm:py-24 pr-8 max-md:mb-14 max-sm:mb-8 max-sm:-mt-10">
          <div className="text-center">
            <p className="mt-2 text-2xl font-semibold text-grey-1 italic">
              Something went wrong.
            </p>
            <h1 className="mt-2 max-md:mt-0 max-md:text-3xl text-4xl font-extrabold text-red-500 tracking-tight sm:text-5xl">
              {error.message}
            </h1>
          </div>

          <div className="mt-12">
            <h2 className="text-sm font-semibold text-grey-1 tracking-wide uppercase">
              Quick links
            </h2>

            <ul
              role="list"
              className="mt-4 border-t border-b border-bordercolor divide-y divide-bordercolor"
            >
              {quickLinks.map((link) => (
                <li
                  key={link.id}
                  className="relative py-6 flex items-start space-x-4"
                >
                  <div className="flex-shrink-0">
                    <span className="flex items-center justify-center h-12 w-12 rounded-lg bg-secondary border border-bordercolor">
                      {link.icon}
                    </span>
                  </div>
                  <div className="min-w-0 flex-1">
                    <h3 className="text-base font-medium text-white">
                      <Link
                        href={link.href}
                        className="rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                        aria-label={link.title}
                      >
                        <span className="absolute inset-0" aria-hidden="true" />
                        <p className="text-blue-600">{link.title}</p>
                      </Link>
                    </h3>
                    <p className="text-base text-grey-1">{link.description}</p>
                  </div>
                  <div className="flex-shrink-0 self-center">
                    <HiChevronRight
                      className="h-5 w-5 text-textcolor"
                      aria-hidden="true"
                    />
                  </div>
                </li>
              ))}
            </ul>

            <div className="mt-10 flex items-center justify-center gap-x-6">
              <button
                onClick={handleReset}
                className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-5 rounded transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                aria-label="Try again"
              >
                Try again
              </button>
              <p className="text-blue-600 -mr-3 -ml-3">or</p>
              <Link
                href="/"
                className="hover:text-blue-600 flex flex-row items-center gap-0 bg-blue-500 hover:bg-blue-700 text-white py-2 px-3 rounded transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
                aria-label="Go back home"
              >
                Go back home
              </Link>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};