"use client"
import React from 'react';
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { ChevronDown } from "lucide-react"
import { Input } from '../ui/input';

const filterSchema = z.object({
  jobTitle: z.string().optional(),
  jobType: z.string().optional(),
  location: z.string().optional(),
  salary: z.object({
    min: z.string().optional(),
    max: z.string().optional(),
  }).optional(),
  status: z.string().optional(),
  enhancedData: z.string().optional(),
});

const JobFilterForm = () => {


  const form = useForm<z.infer<typeof filterSchema>>({
    resolver: zodResolver(filterSchema),
  });


  // Form submission handler
  const onSubmit = (data: z.infer<typeof filterSchema>) => {
    // Add your filter logic here
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <h2 className="font-semibold text-base theme-color mb-4">Filters</h2>
        <Separator />

        <FormField
          control={form.control}
          name="jobTitle"
          render={({ field }) => (
            <FormItem className="space-y-2">
              <FormLabel className="text-sm font-medium theme-color">Job title</FormLabel>
              <FormControl>
                <Input placeholder='Enter title' onChange={field.onChange} />
              </FormControl>
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="jobType"
          render={({ field }) => (
            <FormItem className="space-y-2">
              <FormLabel className="text-sm font-medium theme-color">Job type</FormLabel>
              <Select
                onValueChange={field.onChange}
                defaultValue={field.value || undefined}
              >
                <FormControl>
                  <SelectTrigger className="w-full text-xs font-normal theme-color bg-white border [&>svg:first-of-type]:hidden">
                    <SelectValue placeholder="Select Job Type" />
                    <ChevronDown className="h-4 w-4 opacity-50" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="full_time">Full time</SelectItem>
                  <SelectItem value="part_time">Part time</SelectItem>
                  <SelectItem value="contract_temp">Contract/Temp</SelectItem>
                  <SelectItem value="casual_vacation">Casual/Vacation</SelectItem>
                </SelectContent>
              </Select>

            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="location"
          render={({ field }) => (
            <FormItem className="space-y-2">
              <FormLabel className="text-sm font-medium theme-color">Location</FormLabel>
              <FormControl>
                <Input placeholder='Enter location' onChange={field.onChange} />
              </FormControl>
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="salary"
          render={({ field }) => (
            <FormItem className="space-y-2">
              <FormLabel className="text-sm font-medium theme-color">Salary</FormLabel>
              <div className="flex space-x-2">
                {/* Input for Minimum Salary */}
                <FormControl>
                  <Input
                    type="string"
                    className="w-full text-xs font-normal theme-color bg-white border rounded px-2 py-1"
                    placeholder="Min Salary"
                    value={field.value?.min || ""}
                    onChange={(e) =>
                      field.onChange({
                        ...field.value,
                        min: e.target.value ? (e.target.value) : null,
                      })
                    }
                  />
                </FormControl>

                {/* Input for Maximum Salary */}
                <FormControl>
                  <Input
                    type="string"
                    className="w-full text-xs font-normal theme-color bg-white border rounded px-2 py-1"
                    placeholder="Max Salary"
                    value={field.value?.max || ""}
                    onChange={(e) =>
                      field.onChange({
                        ...field.value,
                        max: e.target.value ? e.target.value : null,
                      })
                    }
                  />
                </FormControl>
              </div>
            </FormItem>
          )}
        />


        <FormField
          control={form.control}
          name="status"
          render={({ field }) => (
            <FormItem className="space-y-2">
              <FormLabel className="text-sm font-medium theme-color">Status</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value || undefined}>
                <FormControl>
                  <SelectTrigger className="w-full text-xs font-normal theme-color bg-white border [&>svg:first-of-type]:hidden">
                    <SelectValue placeholder="Select Status" />
                    <ChevronDown className="h-4 w-4 opacity-50" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="noAnwere">No Answer</SelectItem>
                  <SelectItem value="lvm">LVM</SelectItem>
                  <SelectItem value="email">Emailed</SelectItem>
                  <SelectItem value="call">Called</SelectItem>
                  <SelectItem value="incorrectDetails">Incorrect Details</SelectItem>
                  <SelectItem value="convertedLeadToCrm">Converted Lead To CRM </SelectItem>
                </SelectContent>
              </Select>
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="enhancedData"
          render={({ field }) => (
            <FormItem className="space-y-2">
              <FormLabel className="text-sm font-medium theme-color">Enhanced data</FormLabel>
              <Select onValueChange={field.onChange} defaultValue={field.value || undefined}>
                <FormControl>
                  <SelectTrigger className="w-full text-xs font-normal theme-color bg-white border [&>svg:first-of-type]:hidden">
                    <SelectValue placeholder="Select enhanced type" />
                    <ChevronDown className="h-4 w-4 opacity-50" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="all">All</SelectItem>
                  <SelectItem value="view">View</SelectItem>
                  <SelectItem value="enhanced">Enhanced</SelectItem>
                </SelectContent>
              </Select>
            </FormItem>
          )}
        />

        <div className="flex justify-end mt-5">
          <Button
            type="submit"
            className="w-[126px] h-10 theme-background hover:bg-[#2A2B3B]/90 text-white"
          >
            Save changes
          </Button>
        </div>
      </form>
    </Form>
  )
}

export default JobFilterForm