import React from "react";
import { Link, useNavigate } from "react-router";
import { Button } from "~/components/ui/button";

interface NotFoundProps {
  title?: string;
  message?: string;
  showBackButton?: boolean;
}

export function NotFound({
  title = "صفحه یافت نشد",
  message = "متأسفانه صفحه‌ای که به دنبال آن هستید وجود ندارد یا منتقل شده است.",
  showBackButton = true,
}: NotFoundProps) {
  const navigate = useNavigate();

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

  const handleGoHome = () => {
    navigate("/dashboard");
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 flex items-center justify-center" dir="rtl">
      <div className="max-w-md w-full px-6 py-8 text-center">
        {/* 404 Illustration */}
        <div className="mb-8">
          <div className="mx-auto w-64 h-64 bg-gradient-to-br from-green-100 to-blue-100 dark:from-green-900/20 dark:to-blue-900/20 rounded-full flex items-center justify-center">
            <div className="text-center">
              <div className="text-6xl font-bold text-green-500 mb-2">404</div>
              <svg
                className="w-16 h-16 text-gray-400 mx-auto"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6-4h6m2 5.291A7.962 7.962 0 0112 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8a7.962 7.962 0 01-2 5.291z"
                />
              </svg>
            </div>
          </div>
        </div>

        {/* Error Message */}
        <div className="mb-8">
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4 font-persian">
            {title}
          </h1>
          <p className="text-gray-600 dark:text-gray-400 leading-relaxed font-persian">
            {message}
          </p>
        </div>

        {/* Action Buttons */}
        <div className="space-y-4">
          <Button
            onClick={handleGoHome}
            className="w-full font-persian bg-green-500 hover:bg-green-600"
          >
            <svg
              className="w-4 h-4 ml-2"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
              />
            </svg>
            بازگشت به داشبورد
          </Button>

          {showBackButton && (
            <Button
              variant="outline"
              onClick={handleGoBack}
              className="w-full font-persian"
            >
              <svg
                className="w-4 h-4 ml-2"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M10 19l-7-7m0 0l7-7m-7 7h18"
                />
              </svg>
              بازگشت به صفحه قبل
            </Button>
          )}
        </div>

        {/* Additional Help Links */}
        <div className="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4 font-persian">
            یا می‌توانید به این صفحات بروید:
          </p>
          <div className="flex flex-col space-y-2">
            <Link
              to="/dashboard"
              className="text-green-600 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300 text-sm font-persian transition-colors"
            >
              • داشبورد اصلی
            </Link>
            <Link
              to="/dashboard/projects"
              className="text-green-600 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300 text-sm font-persian transition-colors"
            >
              • مدیریت پروژه‌ها
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

// Specialized 404 component for authenticated users
export function AuthenticatedNotFound() {
  return (
    <NotFound
      title="صفحه یافت نشد"
      message="صفحه‌ای که به دنبال آن هستید در سیستم مدیریت وجود ندارد. ممکن است آدرس اشتباه وارد کرده باشید یا صفحه حذف شده باشد."
    />
  );
}

// Specialized 404 component for public pages
export function PublicNotFound() {
  return (
    <NotFound
      title="صفحه یافت نشد"
      message="متأسفانه صفحه‌ای که به دنبال آن هستید وجود ندارد."
      showBackButton={false}
    />
  );
}