"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "@/components/ui/button";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ITEM_TYPES, type ItemTypeValue } from "@/types";
import { PlusCircle } from "lucide-react";

const formSchema = z.object({
  locationRange: z.string().optional().describe("e.g., 1-5, A10, B1-B3"),
  aisle: z.string().optional().describe("e.g., 10, B2"),
  type: z.string().min(1, "Type is required."),
  description: z.string().max(500).optional(),
});

export type RangeFormInputData = z.infer<typeof formSchema>;

interface DataInputFormProps {
  onSubmit: (data: RangeFormInputData) => void;
  defaultValues?: Partial<RangeFormInputData>;
}

export function DataInputForm({ onSubmit, defaultValues }: DataInputFormProps) {
  const form = useForm<RangeFormInputData>({
    resolver: zodResolver(formSchema),
    defaultValues: defaultValues || {
      locationRange: "",
      aisle: "",
      type: "",
      description: "",
    },
  });

  function handleSubmit(values: RangeFormInputData) {
    onSubmit(values);
    // Reset form after submission, but preserve the 'type' value.
    form.reset({
      locationRange: "",
      aisle: "",
      type: values.type, // Keep the submitted type
      description: "",
    });
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <FormField
            control={form.control}
            name="locationRange"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Location Range (e.g., 1-5, A1, B10-B12)</FormLabel>
                <FormControl>
                  <Input autoFocus type="text" placeholder="e.g., 1-3 or A1 or C1-C5" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="aisle"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Aisle (Optional)</FormLabel>
                <FormControl>
                  <Input type="text" placeholder="e.g., 15 or C7" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
          
          <FormField
            control={form.control}
            name="type"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Type</FormLabel>
                <Select onValueChange={field.onChange} value={field.value || ""} defaultValue={field.value || ""}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Select a type" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    {ITEM_TYPES.map((itemType) => (
                      <SelectItem key={itemType.value} value={itemType.value}>
                        {itemType.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>
        
        <FormField
          control={form.control}
          name="description"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Description (Optional)</FormLabel>
              <FormControl>
                <Input
                  type="text"
                  placeholder="Enter a brief description (applies to all locations in range)"
                  {...field}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit" className="w-full sm:w-auto">
          <PlusCircle className="mr-2 h-4 w-4" /> Add Item(s) to List
        </Button>
      </form>
    </Form>
  );
}