'use client';

import React, { useEffect, useMemo } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from '@/components/ui/form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { Building, Clock, MapPin } from 'lucide-react';
import { DistrictsHelpers, ProjectStatusHelpers, ProjectTypeHelpers, PostOrderEnum } from '@/config/enums';

const sortOptions = [
  { value: PostOrderEnum.PUBLISHED_AT, label: 'ÅR' },
  { value: PostOrderEnum.TITLE, label: 'A-Å' }
];

const schema = z.object({
  sort: z.string().optional(),
  city: z.string().optional(),
  type: z.string().optional(),
  status: z.string().optional()
});

export type FilterFormValues = z.infer<typeof schema>;

export default function ProjectForm() {
  const router = useRouter();
  const searchParams = useSearchParams();

  const defaultValues = useMemo<FilterFormValues>(
    () => ({
      city: (searchParams?.get('city') ?? 'all') as string,
      type: (searchParams?.get('type') ?? 'all') as string,
      status: (searchParams?.get('status') ?? 'all') as string,
      sort: (searchParams?.get('sort') ?? sortOptions[0].value) as string
    }),
    [searchParams]
  );

  const form = useForm<FilterFormValues>({
    resolver: zodResolver(schema),
    defaultValues,
    mode: 'onChange'
  });

  useEffect(() => {
    form.reset(defaultValues);
  }, [defaultValues, form]);

  useEffect(() => {
    const subscription = form.watch((values) => {
      const params = new URLSearchParams();

      if (values.sort) params.set('sort', values.sort);
      if (values.city) params.set('city', values.city);
      if (values.type) params.set('type', values.type);
      if (values.status) params.set('status', values.status);

      const queryString = params.toString();
      const pathname =
        typeof window !== 'undefined' ? window.location.pathname : '/';

      const nextUrl = queryString ? `${pathname}?${queryString}` : pathname;
      router.replace(nextUrl);
    });

    return () => subscription.unsubscribe();
  }, [form, router]);

  return (
    <Form {...form}>
      <form
        className='flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-end sm:justify-between sm:gap-5'
        onSubmit={(e) => e.preventDefault()}
      >
        <FormField
          control={form.control}
          name='sort'
          render={({ field }) => (
            <FormItem className='flex-shrink-0 sm:w-22'>
              <FormLabel className='text-sm font-medium text-neutral-800 uppercase'>
                SORTÉR
              </FormLabel>
              <FormControl>
                <Select onValueChange={field.onChange} value={field.value}>
                  <SelectTrigger className='relative w-full bg-neutral-200 font-serif text-neutral-900 [&>svg]:!text-neutral-900 [&>svg]:!opacity-100'>
                    <SelectValue placeholder='Vælg sortere' />
                  </SelectTrigger>
                  <SelectContent>
                    {sortOptions.map((o) => (
                      <SelectItem key={o.value} value={o.value}>
                        {o.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name='city'
          render={({ field }) => (
            <FormItem className='min-w-0 flex-1'>
              <FormLabel className='text-sm font-medium text-neutral-800 uppercase'>
                BYDEL
              </FormLabel>
              <FormControl>
                <Select onValueChange={field.onChange} value={field.value}>
                  <SelectTrigger className='relative w-full truncate bg-neutral-200 pl-8 font-serif text-neutral-900 [&>svg]:!text-neutral-900 [&>svg]:!opacity-100'>
                    <MapPin className='absolute top-2 left-2 block size-4' />
                    <SelectValue defaultValue="" placeholder='Vælg bydel' />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Alle</SelectItem>

                    {DistrictsHelpers.values().map((district) => (
                      <SelectItem key={district} value={district}>
                        {DistrictsHelpers.getLabel(district)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name='type'
          render={({ field }) => (
            <FormItem className='min-w-0 flex-1'>
              <FormLabel className='text-sm font-medium text-neutral-800 uppercase'>
                TYPE
              </FormLabel>
              <FormControl>
                <Select onValueChange={field.onChange} value={field.value}>
                  <SelectTrigger className='relative w-full truncate bg-neutral-200 pl-8 font-serif text-neutral-900 [&>svg]:!text-neutral-900 [&>svg]:!opacity-100'>
                    <Building className='absolute top-2 left-2 block size-4' />
                    <SelectValue placeholder='Vælg type' />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Alle</SelectItem>

                    {ProjectTypeHelpers.values().map((projectType) => (
                      <SelectItem key={projectType} value={projectType}>
                        {ProjectTypeHelpers.getLabel(projectType)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name='status'
          render={({ field }) => (
            <FormItem className='min-w-0 flex-1'>
              <FormLabel className='text-sm font-medium text-neutral-800 uppercase'>
                STATUS
              </FormLabel>
              <FormControl>
                <Select onValueChange={field.onChange} value={field.value}>
                  <SelectTrigger className='relative w-full truncate bg-neutral-200 pl-8 font-serif text-neutral-900 [&>svg]:!text-neutral-900 [&>svg]:!opacity-100'>
                    <Clock className='absolute top-2 left-2 block size-4' />
                    <SelectValue placeholder='Vælg status' />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">Alle</SelectItem>
                    {ProjectStatusHelpers.values().map((status) => (
                      <SelectItem key={status} value={status}>
                        {ProjectStatusHelpers.getLabel(status)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
      </form>
    </Form>
  );
}