'use client';

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useRouter } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';
import { apiClient } from '@/lib/api-client';
import { useBookingStore } from '@/lib/booking-store';
import { Station } from '@/types';
import { MapPin, Users, Search, Plus, Minus, ChevronDown } from 'lucide-react';
import { useState } from 'react';
import ModernDatePicker from '@/components/ModernDatePicker';

const searchSchema = z.object({
  tripType: z.enum(['ONE_WAY', 'ROUND_TRIP']),
  originStationId: z.string().min(1, 'Please select a departure station'),
  destinationStationId: z.string().min(1, 'Please select an arrival station'),
  departureDate: z.string().min(1, 'Please select a departure date'),
  returnDate: z.string().optional(),
  adultCount: z.number().min(1, 'At least 1 adult is required').max(9, 'Maximum 9 adults allowed'),
  childCount: z.number().min(0, 'Cannot be negative').max(9, 'Maximum 9 children allowed'),
  nationality: z.enum(['ETHIOPIAN', 'DJIBOUTIAN', 'OTHER']),
}).refine((data) => {
  if (!data.originStationId || !data.destinationStationId) return true;
  return data.originStationId !== data.destinationStationId;
}, {
  message: 'Origin and destination must be different',
  path: ['destinationStationId'],
});

type SearchForm = z.infer<typeof searchSchema>;

interface SearchWidgetProps {
  fullWidth?: boolean;
  onSearch?: () => void;
}

export function SearchWidget({ fullWidth = false, onSearch }: SearchWidgetProps) {
  const router = useRouter();
  const setSearchCriteria = useBookingStore((s) => s.setSearchCriteria);
  const [isPassengerOpen, setIsPassengerOpen] = useState(false);

  const { data: stations, isLoading } = useQuery<Station[]>({
    queryKey: ['stations'],
    queryFn: async () => await apiClient.get('/stations') as Station[],
  });

  const { register, handleSubmit, watch, setValue, clearErrors, formState: { errors } } = useForm<SearchForm>({
    // @ts-ignore - ZodEffects type compatibility issue
    resolver: zodResolver(searchSchema),
    mode: 'onSubmit',
    reValidateMode: 'onChange',
    defaultValues: {
      tripType: 'ONE_WAY',
      originStationId: '',
      destinationStationId: '',
      adultCount: 1,
      childCount: 0,
      nationality: 'ETHIOPIAN',
      departureDate: new Date().toISOString().split('T')[0],
    },
  });

  const originId = watch('originStationId');
  const adultCount = watch('adultCount');
  const childCount = watch('childCount');

  const onSubmit = (data: SearchForm) => {
    setSearchCriteria({
      ...data,
      adultCount: data.adultCount,
      childCount: data.childCount,
      nationality: data.nationality,
    });
    const params = new URLSearchParams({
      origin: data.originStationId,
      destination: data.destinationStationId,
      date: data.departureDate,
      adults: data.adultCount.toString(),
      children: data.childCount.toString(),
      nationality: data.nationality,
    });
    if (onSearch) onSearch();
    router.push(`/booking/results?${params}`);
  };

  return (
    <div className={fullWidth ? 'w-full' : 'w-full max-w-6xl mx-auto'}>
      <form onSubmit={handleSubmit(onSubmit)} className="bg-white/95 dark:bg-gray-800/95 rounded-2xl shadow-lg border border-gray-200/20 dark:border-gray-700/20 overflow-visible backdrop-blur-sm">
        <div className="p-6 md:p-8 overflow-visible">
          {/* Row 1: From, To, Date */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end mb-4">
            {/* From */}
            <div className="space-y-2 md:col-span-1">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">From</label>
              <div className="relative">
                <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-primary" />
                <select
                  {...register('originStationId', {
                    onChange: (e) => {
                      if (e.target.value) clearErrors('originStationId');
                    }
                  })}
                  className={`w-full pl-11 pr-4 py-3.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 ${
                    errors.originStationId ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600'
                  }`}
                  disabled={isLoading}
                >
                  <option value="">Select departure</option>
                  {stations?.map((s) => (
                    <option key={s.id} value={s.id}>{s.name}</option>
                  ))}
                </select>
              </div>
              {errors.originStationId && (
                <p className="text-red-600 dark:text-red-400 text-sm mt-1">{errors.originStationId.message}</p>
              )}
            </div>

            {/* To */}
            <div className="space-y-2 md:col-span-1">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">To</label>
              <div className="relative">
                <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-primary" />
                <select
                  {...register('destinationStationId', {
                    onChange: (e) => {
                      if (e.target.value) clearErrors('destinationStationId');
                    }
                  })}
                  className={`w-full pl-11 pr-4 py-3.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent disabled:bg-gray-50 dark:disabled:bg-gray-800 disabled:cursor-not-allowed text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 ${
                    errors.destinationStationId ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600'
                  }`}
                  disabled={isLoading}
                >
                  <option value="">Select arrival</option>
                  {stations?.map((s) => (
                    <option key={s.id} value={s.id} disabled={s.id === originId}>{s.name}</option>
                  ))}
                </select>
              </div>
              {errors.destinationStationId && (
                <p className="text-red-600 dark:text-red-400 text-sm mt-1">{errors.destinationStationId.message}</p>
              )}
            </div>

            {/* Date */}
            <div className="space-y-2 relative z-30 md:col-span-1">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Date</label>
              <ModernDatePicker
                value={watch('departureDate') ? new Date(watch('departureDate') + 'T00:00:00') : undefined}
                onChange={(date) => {
                  const year = date.getFullYear();
                  const month = String(date.getMonth() + 1).padStart(2, '0');
                  const day = String(date.getDate()).padStart(2, '0');
                  setValue('departureDate', `${year}-${month}-${day}`);
                  clearErrors('departureDate');
                }}
                minDate={new Date()}
                placeholder="Select date"
              />
              {errors.departureDate && (
                <p className="text-red-600 dark:text-red-400 text-sm mt-1">{errors.departureDate.message}</p>
              )}
            </div>
          </div>

          {/* Row 2: Passengers, Nationality, Promo Code */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 items-end mb-4">
            {/* Passengers Dropdown */}
            <div className="space-y-2 relative z-20">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Passengers</label>
              <button
                type="button"
                onClick={() => setIsPassengerOpen(!isPassengerOpen)}
                className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 flex items-center justify-between hover:border-primary transition-colors"
              >
                <span className="flex items-center gap-2">
                  <Users className="w-4 h-4 text-primary" />
                  {(adultCount || 1) + (childCount || 0)} Passenger{((adultCount || 1) + (childCount || 0)) !== 1 ? 's' : ''}
                </span>
                <ChevronDown className={`w-4 h-4 transition-transform text-primary ${isPassengerOpen ? 'rotate-180' : ''}`} />
              </button>

              {/* Passenger Dropdown Menu */}
              {isPassengerOpen && (
                <>
                  <div className="fixed inset-0 z-40" onClick={() => setIsPassengerOpen(false)} />
                  <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg z-50 p-4 space-y-4">
                    {/* Adults */}
                    <div>
                      <div className="flex items-center justify-between mb-2">
                        <div>
                          <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Adults</div>
                          <div className="text-xs text-gray-500 dark:text-gray-400">≥5 years</div>
                        </div>
                        <div className="flex items-center gap-2">
                          <button
                            type="button"
                            onClick={() => {
                              const current = adultCount || 1;
                              if (current > 1) setValue('adultCount', current - 1);
                            }}
                            className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
                            disabled={(adultCount || 1) <= 1}
                          >
                            <Minus className="w-4 h-4 text-primary" />
                          </button>
                          <span className="w-6 text-center font-semibold text-gray-900 dark:text-gray-100">{adultCount || 1}</span>
                          <button
                            type="button"
                            onClick={() => {
                              const current = adultCount || 1;
                              if (current < 9) setValue('adultCount', current + 1);
                            }}
                            className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
                            disabled={(adultCount || 1) >= 9}
                          >
                            <Plus className="w-4 h-4 text-primary" />
                          </button>
                        </div>
                      </div>
                    </div>

                    {/* Children */}
                    <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <div className="text-sm font-medium text-gray-900 dark:text-gray-100">Children</div>
                          <div className="text-xs text-gray-500 dark:text-gray-400">&lt;5 years • First free</div>
                        </div>
                        <div className="flex items-center gap-2">
                          <button
                            type="button"
                            onClick={() => {
                              const current = childCount || 0;
                              if (current > 0) setValue('childCount', current - 1);
                            }}
                            className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
                            disabled={(childCount || 0) <= 0}
                          >
                            <Minus className="w-4 h-4 text-primary" />
                          </button>
                          <span className="w-6 text-center font-semibold text-gray-900 dark:text-gray-100">{childCount || 0}</span>
                          <button
                            type="button"
                            onClick={() => {
                              const current = childCount || 0;
                              if (current < 9) setValue('childCount', current + 1);
                            }}
                            className="w-7 h-7 rounded-full border border-gray-300 dark:border-gray-600 flex items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
                            disabled={(childCount || 0) >= 9}
                          >
                            <Plus className="w-4 h-4 text-primary" />
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </>
              )}
            </div>

            {/* Nationality */}
            <div className="space-y-2">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Nationality</label>
              <select
                {...register('nationality')}
                className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100"
              >
                <option value="ETHIOPIAN">Ethiopian</option>
                <option value="DJIBOUTIAN">Djiboutian</option>
                <option value="OTHER">Other</option>
              </select>
            </div>

            {/* Promo Code */}
            <div className="space-y-2">
              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 text-left">Promo Code (Optional)</label>
              <input
                type="text"
                placeholder="Enter promo code"
                className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
              />
            </div>
          </div>

          {/* Row 3: Search Button */}
          <div>
            {/* Debug info - remove after testing */}
            {Object.keys(errors).length > 0 && (
              <div className="mb-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                <p className="text-sm font-medium text-red-800 dark:text-red-200 mb-1">Validation Errors:</p>
                <ul className="text-xs text-red-700 dark:text-red-300 list-disc list-inside">
                  {Object.entries(errors).map(([key, value]) => (
                    <li key={key}>{key}: {value?.message}</li>
                  ))}
                </ul>
              </div>
            )}
            <button
              type="submit"
              className="w-full bg-primary hover:bg-primary/90 text-white font-semibold py-3.5 px-6 rounded-lg transition-all duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-xl"
            >
              <Search className="w-5 h-5 text-white" />
              <span>Search Train</span>
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}
