import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Home, ArrowLeft, FileQuestion } from 'lucide-react';

/**
 * NotFound Component
 *
 * Displays a 404 error page when users navigate to a non-existent route.
 * Provides navigation options to return to the home page or go back.
 */
const NotFound: React.FC = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const handleGoBack = () => {
    navigate(-1);
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4 py-16">
      <div className="max-w-md w-full text-center">
        {/* Illustration/Icon */}
        <div className="mb-8 flex justify-center">
          <div className="relative">
            <FileQuestion
              className="w-32 h-32 text-gray-300 dark:text-gray-700"
              strokeWidth={1.5}
              aria-hidden="true"
            />
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="text-6xl font-bold text-gray-400 dark:text-gray-600">
                404
              </span>
            </div>
          </div>
        </div>

        {/* Error Message */}
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">
          {t('errors.pageNotFound', 'Page Not Found')}
        </h1>

        <p className="text-lg text-gray-600 dark:text-gray-400 mb-8">
          {t('errors.pageNotFoundDescription', 'The page you are looking for does not exist or has been moved.')}
        </p>

        {/* Action Buttons */}
        <div className="flex flex-col sm:flex-row gap-4 justify-center">
          {/* Go Home Button */}
          <Link
            to="/"
            className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
          >
            <Home className="w-5 h-5" aria-hidden="true" />
            {t('navigation.goHome', 'Go Home')}
          </Link>

          {/* Go Back Button */}
          <button
            onClick={handleGoBack}
            className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-gray-200 text-gray-700 font-medium rounded-lg hover:bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-900"
          >
            <ArrowLeft className="w-5 h-5" aria-hidden="true" />
            {t('navigation.goBack', 'Go Back')}
          </button>
        </div>

        {/* Additional Help Text */}
        <p className="mt-8 text-sm text-gray-500 dark:text-gray-500">
          {t('errors.needHelp', 'Need help?')}{' '}
          <Link
            to="/support"
            className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 underline"
          >
            {t('navigation.contactSupport', 'Contact Support')}
          </Link>
        </p>
      </div>
    </div>
  );
};

export default NotFound;
