'use client';

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

function ErrorContent() {
  const params = useSearchParams();
  const error = params.get('error');

  const messages: Record<string, string> = {
    AccessDenied: 'Only @broadcom.com accounts are allowed.',
    Configuration: 'Auth is not configured yet. Set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in .env.local.',
    Default: 'An authentication error occurred.',
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-[#F4F6F8]">
      <div className="w-full max-w-sm bg-white rounded-2xl shadow-xl border border-gray-100 p-8 text-center">
        <div className="w-14 h-14 mx-auto mb-4 rounded-full bg-red-50 flex items-center justify-center">
          <svg className="w-7 h-7 text-red-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" /></svg>
        </div>
        <h1 className="text-lg font-bold text-[#1B1D36] mb-2">Access Denied</h1>
        <p className="text-sm text-gray-500 mb-6">{messages[error || ''] || messages.Default}</p>
        <Link href="/auth/signin" className="inline-block px-6 py-2.5 bg-[#0098C7] text-white text-sm font-semibold rounded-xl hover:bg-[#007ba3] transition">
          Try Again
        </Link>
      </div>
    </div>
  );
}

export default function AuthErrorPage() {
  return (
    <Suspense fallback={<div className="min-h-screen flex items-center justify-center">Loading...</div>}>
      <ErrorContent />
    </Suspense>
  );
}