"use client";

import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { Suspense } from "react";

function ErrorContent() {
  const searchParams = useSearchParams();
  const error = searchParams.get("error");

  const errorMessages: Record<string, { title: string; description: string }> = {
    Configuration: {
      title: "Yapılandırma Hatası",
      description: "Authentication sisteminde bir yapılandırma hatası oluştu.",
    },
    AccessDenied: {
      title: "Erişim Reddedildi",
      description: "Bu kaynağa erişim izniniz yok.",
    },
    Verification: {
      title: "Doğrulama Hatası",
      description: "Doğrulama linki geçersiz veya süresi dolmuş.",
    },
    OAuthSignin: {
      title: "OAuth Giriş Hatası",
      description: "OAuth sağlayıcısına bağlanırken bir hata oluştu.",
    },
    OAuthCallback: {
      title: "OAuth Callback Hatası",
      description: "OAuth callback işlemi başarısız oldu.",
    },
    OAuthCreateAccount: {
      title: "Hesap Oluşturma Hatası",
      description: "OAuth ile hesap oluşturulurken bir hata oluştu.",
    },
    EmailCreateAccount: {
      title: "Email Hesap Oluşturma Hatası",
      description: "Email ile hesap oluşturulurken bir hata oluştu.",
    },
    Callback: {
      title: "Callback Hatası",
      description: "Authentication callback işlemi başarısız oldu.",
    },
    OAuthAccountNotLinked: {
      title: "Hesap Bağlantısı Hatası",
      description:
        "Bu email adresi zaten farklı bir yöntemle kayıtlı. Lütfen o yöntemle giriş yapın.",
    },
    EmailSignin: {
      title: "Email Giriş Hatası",
      description: "Email doğrulama linki gönderilemedi.",
    },
    CredentialsSignin: {
      title: "Giriş Başarısız",
      description: "Email veya şifreniz hatalı. Lütfen tekrar deneyin.",
    },
    SessionRequired: {
      title: "Oturum Gerekli",
      description: "Bu sayfaya erişmek için giriş yapmanız gerekiyor.",
    },
    Default: {
      title: "Bir Hata Oluştu",
      description: "Beklenmeyen bir hata oluştu. Lütfen tekrar deneyin.",
    },
  };

  const errorInfo = error ? errorMessages[error] || errorMessages.Default : errorMessages.Default;

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
      <div className="max-w-md w-full space-y-8">
        <div className="text-center">
          <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
            <svg
              className="h-6 w-6 text-red-600"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
          </div>
          <h2 className="mt-6 text-center text-3xl font-bold text-gray-900">
            {errorInfo.title}
          </h2>
          <p className="mt-2 text-center text-sm text-gray-600">{errorInfo.description}</p>
          {error && (
            <p className="mt-2 text-center text-xs text-gray-500">
              Hata kodu: {error}
            </p>
          )}
        </div>

        <div className="mt-8 space-y-3">
          <Link
            href="/auth/login"
            className="block w-full text-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
          >
            Giriş Sayfasına Dön
          </Link>
          <Link
            href="/auth/register"
            className="block w-full text-center py-2 px-4 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
          >
            Yeni Hesap Oluştur
          </Link>
          <Link
            href="/"
            className="block w-full text-center py-2 px-4 text-sm font-medium text-blue-600 hover:text-blue-500"
          >
            Ana Sayfaya Dön
          </Link>
        </div>
      </div>
    </div>
  );
}

export default function AuthErrorPage() {
  return (
    <Suspense fallback={
      <div className="min-h-screen flex items-center justify-center bg-gray-50">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Yükleniyor...</p>
        </div>
      </div>
    }>
      <ErrorContent />
    </Suspense>
  );
}