'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useAuthStore } from '@/lib/auth-store';
import { useBookingStore } from '@/lib/booking-store';
import { UserPlus, ChevronLeft, LogIn } from 'lucide-react';

function Tooltip({ children, content }: { children: React.ReactNode; content: string[] }) {
  const [visible, setVisible] = useState(false);

  return (
    <div
      className="relative"
      onMouseEnter={() => setVisible(true)}
      onMouseLeave={() => setVisible(false)}
      onFocus={() => setVisible(true)}
      onBlur={() => setVisible(false)}
    >
      {children}
      <div
        role="tooltip"
        className={`absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-52 bg-gray-900 dark:bg-gray-700 text-white text-xs rounded-lg px-3 py-2.5 shadow-xl pointer-events-none transition-all duration-150 z-50 ${
          visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-1'
        }`}
      >
        <ul className="space-y-1">
          {content.map((item, i) => (
            <li key={i} className="flex items-center gap-1.5">
              <span className="text-green-400 flex-shrink-0">✓</span>
              {item}
            </li>
          ))}
        </ul>
        {/* Arrow */}
        <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-700" />
      </div>
    </div>
  );
}

export default function AuthCheckPage() {
  const router = useRouter();
  const { isAuthenticated, initialize } = useAuthStore();
  const searchCriteria = useBookingStore((s) => s.searchCriteria);

  const buildResultsUrl = () => {
    if (!searchCriteria) return '/booking/results';
    const params = new URLSearchParams({
      tripType: searchCriteria.tripType,
      origin: searchCriteria.originStationId,
      destination: searchCriteria.destinationStationId,
      date: searchCriteria.departureDate,
      adults: searchCriteria.adultCount.toString(),
      children: searchCriteria.childCount.toString(),
      nationality: searchCriteria.nationality,
    });
    if (searchCriteria.returnDate) params.set('returnDate', searchCriteria.returnDate);
    if (searchCriteria.promoCode) params.set('promoCode', searchCriteria.promoCode);
    return `/booking/results?${params}`;
  };

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

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

  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col items-center justify-center px-4">
      <div className="w-full max-w-sm">
        <h1 className="text-2xl font-bold text-center text-gray-900 dark:text-gray-100 mb-1">
          Continue your booking
        </h1>
        <p className="text-sm text-center text-gray-500 dark:text-gray-400 mb-8">
          Choose how you&apos;d like to proceed
        </p>

        <div className="flex flex-col gap-3">
          <Tooltip content={[
            'No account required',
            'Quick checkout',
            'Create account later (optional)',
          ]}>
            <button
              onClick={() => router.push('/booking/passengers')}
              className="w-full flex items-center justify-center gap-2.5 px-5 py-3.5 bg-primary hover:bg-primary/90 active:scale-[0.98] text-white font-semibold rounded-xl transition-all shadow-md shadow-primary/20"
            >
              <UserPlus className="w-5 h-5 flex-shrink-0" />
              Continue as guest
            </button>
          </Tooltip>

          <Tooltip content={[
            'Saved passenger details',
            'View booking history',
            'Faster future bookings',
          ]}>
            <button
              onClick={() => router.push('/login?redirect=/booking/passengers')}
              className="w-full flex items-center justify-center gap-2.5 px-5 py-3.5 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 active:scale-[0.98] text-gray-800 dark:text-gray-100 font-semibold rounded-xl border border-gray-200 dark:border-gray-700 transition-all shadow-sm"
            >
              <LogIn className="w-5 h-5 flex-shrink-0" />
              SignIn or Register
            </button>
          </Tooltip>
        </div>

        <div className="mt-8 text-center">
          <button
            onClick={() => router.push(buildResultsUrl())}
            className="inline-flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
          >
            <ChevronLeft className="w-4 h-4" />
            Back to results
          </button>
        </div>
      </div>
    </div>
  );
}
