'use client'

import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { SparklesIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline'
import { Suspense } from 'react'

function AuthCodeErrorContent() {
  const searchParams = useSearchParams()
  const error = searchParams.get('error')
  const description = searchParams.get('description')

  const getErrorMessage = () => {
    switch (error) {
      case 'no_code':
        return 'No authorization code received from Google. This usually means the OAuth flow was cancelled or interrupted.'
      case 'exchange_failed':
        return `Failed to exchange authorization code for session: ${description || 'Unknown error'}`
      case 'no_session':
        return 'Session could not be created despite successful code exchange. This might be a Supabase configuration issue.'
      case 'access_denied':
        return 'You denied access to the application. Please try again and grant the necessary permissions.'
      case 'unexpected':
        return `An unexpected error occurred: ${description || 'Unknown error'}`
      default:
        return description || 'An unknown authentication error occurred.'
    }
  }

  const getTroubleshootingTips = () => {
    switch (error) {
      case 'no_code':
        return [
          'Make sure you complete the Google login process',
          'Check if popup blockers are preventing the OAuth window',
          'Verify redirect URLs in Google Cloud Console'
        ]
      case 'exchange_failed':
        return [
          'Check Google OAuth credentials in Supabase dashboard',
          'Verify GOOGLE_CLIENT_SECRET environment variable',
          'Ensure Google OAuth consent screen is configured'
        ]
      case 'no_session':
        return [
          'Check Supabase Google provider configuration',
          'Verify environment variables are loaded correctly',
          'Check browser console for additional errors'
        ]
      default:
        return [
          'Google OAuth is not configured properly',
          'Environment variables are missing',
          'Redirect URLs don\'t match in Google Console'
        ]
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-teal-900 to-cyan-900 flex items-center justify-center">
      <div className="max-w-lg w-full bg-slate-800/50 backdrop-blur-sm rounded-lg shadow-2xl border border-teal-600/20 p-8 text-center">
        <div className="flex justify-center mb-4">
          <ExclamationTriangleIcon className="h-12 w-12 text-amber-400" />
        </div>
        
        <h1 className="text-2xl font-bold text-white mb-4">Authentication Error</h1>
        
        <div className="text-sm text-slate-300 bg-slate-700/30 rounded-lg p-4 mb-6">
          <div className="font-medium text-amber-300 mb-2">Error Details:</div>
          <div className="text-left">
            {error && (
              <div className="mb-2">
                <span className="font-medium">Code:</span> <code className="text-teal-400">{error}</code>
              </div>
            )}
            <div className="text-slate-200">{getErrorMessage()}</div>
          </div>
        </div>
        
        <div className="text-left text-sm text-slate-300 bg-slate-700/20 rounded-lg p-4 mb-6">
          <div className="font-medium text-teal-400 mb-2">Troubleshooting Tips:</div>
          <ul className="space-y-1">
            {getTroubleshootingTips().map((tip, index) => (
              <li key={index}>• {tip}</li>
            ))}
          </ul>
        </div>
        
        <div className="space-y-3">
          <Link
            href="/"
            className="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-gradient-to-r from-teal-700 to-cyan-700 hover:from-teal-800 hover:to-cyan-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-600 transform hover:scale-105 transition-all duration-200"
          >
            <SparklesIcon className="w-4 h-4 mr-2" />
            Return to Home
          </Link>
          
          <button
            onClick={() => window.location.reload()}
            className="w-full inline-flex items-center justify-center px-4 py-2 border border-slate-600/50 text-sm font-medium rounded-md text-slate-200 bg-slate-700/50 hover:bg-slate-600/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-600 transition-all duration-200"
          >
            Try Again
          </button>
        </div>
        
        <div className="mt-6 pt-6 border-t border-slate-600/30">
          <p className="text-xs text-slate-400">
            Check the browser console and server logs for more detailed error information.
          </p>
        </div>
      </div>
    </div>
  )
}

function ErrorPageSkeleton() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-teal-900 to-cyan-900 flex items-center justify-center">
      <div className="max-w-lg w-full bg-slate-800/50 backdrop-blur-sm rounded-lg shadow-2xl border border-teal-600/20 p-8 text-center">
        <div className="flex justify-center mb-4">
          <ExclamationTriangleIcon className="h-12 w-12 text-amber-400 animate-pulse" />
        </div>
        <div className="h-8 bg-slate-700/50 rounded mb-4 animate-pulse"></div>
        <div className="h-32 bg-slate-700/30 rounded mb-6 animate-pulse"></div>
        <div className="h-24 bg-slate-700/20 rounded mb-6 animate-pulse"></div>
        <div className="space-y-3">
          <div className="h-10 bg-slate-700/50 rounded animate-pulse"></div>
          <div className="h-10 bg-slate-700/30 rounded animate-pulse"></div>
        </div>
      </div>
    </div>
  )
}

export default function AuthCodeErrorPage() {
  return (
    <Suspense fallback={<ErrorPageSkeleton />}>
      <AuthCodeErrorContent />
    </Suspense>
  )
}