'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/auth-store';
import { LogIn, UserPlus, Shield, Clock } from 'lucide-react';

export default function AuthCheckPage() {
  const router = useRouter();
  const { isAuthenticated, initialize } = useAuthStore();

  useEffect(() => {
    initialize();
  }, [initialize]);

  useEffect(() => {
    if (isAuthenticated) {
      router.push('/booking/passengers');
    }
  }, [isAuthenticated, router]);

  const handleSignIn = () => {
    router.push('/login?redirect=/booking/passengers');
  };

  const handleGuest = () => {
    router.push('/booking/passengers');
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-primary-50 dark:from-gray-900 dark:to-gray-800 py-12">
      <div className="container mx-auto px-4">
        <div className="max-w-5xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12 animate-fade-in">
            <h1 className="section-title">Continue your booking</h1>
            <p className="section-subtitle mt-2">
              Sign in to access saved profiles or continue as a guest
            </p>
          </div>

          {/* Options Grid */}
          <div className="grid md:grid-cols-2 gap-8 mb-8">
            {/* Sign In Option */}
            <div 
              onClick={handleSignIn}
              className="card-interactive group"
            >
              <div className="text-center">
                <div className="w-20 h-20 bg-gradient-to-br from-primary to-primary-700 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:shadow-xl transition-shadow">
                  <LogIn className="w-10 h-10 text-white" />
                </div>
                <h2 className="text-2xl font-bold mb-3 text-gray-900 dark:text-gray-100">Sign in</h2>
                <p className="text-gray-600 dark:text-gray-400 mb-6 text-balance">
                  Access your saved passenger profiles and booking history for faster checkout
                </p>
                
                {/* Benefits */}
                <div className="space-y-3 mb-6 text-left">
                  <div className="flex items-start gap-3">
                    <div className="w-5 h-5 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-primary dark:text-gray-300  text-xs">✓</span>
                    </div>
                    <span className="text-sm text-gray-700 dark:text-gray-300">Saved passenger details</span>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-5 h-5 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-primary dark:text-gray-300 text-xs">✓</span>
                    </div>
                    <span className="text-sm text-gray-700 dark:text-gray-300">View booking history</span>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-5 h-5 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <span className="text-primary dark:text-gray-300  text-xs">✓</span>
                    </div>
                    <span className="text-sm text-gray-700 dark:text-gray-300">Faster future bookings</span>
                  </div>
                </div>

                <button className="btn-primary w-full text-center">
                  Sign in to continue
                </button>
              </div>
            </div>

            {/* Guest Option */}
            <div 
              onClick={handleGuest}
              className="card-interactive group"
            >
              <div className="text-center">
                <div className="w-20 h-20 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-600 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg group-hover:shadow-xl transition-shadow">
                  <UserPlus className="w-10 h-10 text-gray-700 dark:text-gray-300" />
                </div>
                <h2 className="text-2xl font-bold mb-3 text-gray-900 dark:text-gray-100">Continue as guest</h2>
                <p className="text-gray-600 dark:text-gray-400 mb-6 text-balance">
                  Book without an account. You can create one after completing your booking
                </p>
                
                {/* Benefits */}
                <div className="space-y-3 mb-6 text-left">
                  <div className="flex items-start gap-3">
                    <div className="w-5 h-5 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <Clock className="w-3 h-3 text-gray-600 dark:text-gray-400" />
                    </div>
                    <span className="text-sm text-gray-700 dark:text-gray-300">Quick checkout process</span>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-5 h-5 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <Shield className="w-3 h-3 text-gray-600 dark:text-gray-400" />
                    </div>
                    <span className="text-sm text-gray-700 dark:text-gray-300">No account required</span>
                  </div>
                  <div className="flex items-start gap-3">
                    <div className="w-5 h-5 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5">
                      <UserPlus className="w-3 h-3 text-gray-600 dark:text-gray-400" />
                    </div>
                    <span className="text-sm text-gray-700 dark:text-gray-300">Create account later (optional)</span>
                  </div>
                </div>

                <button className="btn-secondary w-full text-center">
                  Continue as guest
                </button>
              </div>
            </div>
          </div>

          {/* Back Link */}
          <div className="text-center">
            <button 
              onClick={() => router.push('/booking/results')} 
              className="btn-ghost"
            >
              ← Back to Results
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
