import { Link } from 'react-router-dom'
import { ThemeToggleButton } from '../../components/common/ThemeToggleButton'

export const ServerErrorPage = () => {
  return (
    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-white p-6 dark:bg-gray-900 z-1">
      {/* Theme Toggle */}
      <div className="absolute left-6 top-6 z-50">
        <ThemeToggleButton />
      </div>

      {/* Grid Background */}
      <div className="absolute inset-0 overflow-hidden">
        <div className="pointer-events-none absolute inset-0 overflow-hidden opacity-40 dark:opacity-20">
          <svg
            className="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 text-gray-200 dark:text-gray-800"
            viewBox="0 0 500 500"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <pattern id="grid500" width="50" height="50" patternUnits="userSpaceOnUse">
                <path d="M 50 0 L 0 0 0 50" fill="none" stroke="currentColor" strokeWidth="0.5" />
              </pattern>
            </defs>
            <rect width="500" height="500" fill="url(#grid500)" />
          </svg>
        </div>
      </div>

      <div className="relative z-10 mx-auto max-w-[550px] text-center">
        {/* Image */}
        <img
          src="/images/error/500.svg"
          alt="500"
          className="mx-auto mb-10 dark:hidden"
        />
        <img
          src="/images/error/500-dark.svg"
          alt="500"
          className="mx-auto mb-10 hidden dark:block"
        />

        {/* Content */}
        <h2 className="mb-3 text-3xl font-semibold text-gray-800 dark:text-white sm:text-4xl">
          خطای سرور!
        </h2>
        <p className="mb-8 text-base text-gray-500 dark:text-gray-400">
          متأسفانه مشکلی در سرور رخ داده است. تیم فنی ما در حال بررسی این مشکل است. لطفاً چند دقیقه دیگر مجدداً تلاش کنید.
        </p>

        {/* Actions */}
        <div className="flex flex-wrap items-center justify-center gap-4">
          <Link
            to="/"
            className="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-6 py-3 text-sm font-medium text-white shadow-theme-xs transition hover:bg-brand-600"
          >
            <svg className="h-5 w-5" 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>
            بازگشت به صفحه اصلی
          </Link>
          <button
            onClick={() => window.location.reload()}
            className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-6 py-3 text-sm font-medium text-gray-700 shadow-theme-xs transition hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
          >
            <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            تلاش مجدد
          </button>
        </div>
      </div>
    </div>
  )
}
