"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useRouter } from "next/navigation"
import * as React from "react"

import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"
import { myfieldSchema, type MyFieldFormValues } from "@/lib/validations"
import { createField, updateField } from "@/services/myfields"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

// Define the type for the fields we pass from the server
interface MyFieldsFormProps {
  values?: Record<string, any> // Add this line to accept values for editing
}

export function MyFieldsForm({ values }: MyFieldsFormProps) {
  // Now that we are in a Client Component, we can use State and Handlers!
  const [formData, setFormData] = React.useState<Record<string, any>>({})

  const id = values?.id ?? (values as any)?.id

  

  const router = useRouter()
  const defaultValues = values
    ? {
        ...values,
        note: values.note ?? "",
        options: Array.isArray(values.options)
          ? values.options.join(",")
          : typeof values.options === "string"
          ? values.options
          : "",
      }
    : {
        name: "",
        label: "",
        module: "",
        is_required: 0,
        type: "",
        options: "",
        note: "",
        status: 1,
      }

  const form = useForm<MyFieldFormValues>({
    resolver: zodResolver(myfieldSchema) as any,
      defaultValues: {
      ...defaultValues,
      is_required: Number(defaultValues.is_required),
      status: Number(defaultValues.status),
      type: defaultValues.type as any,
      note: defaultValues.note ?? "",
  }
  })

  React.useEffect(() => {
    form.trigger("options")
  }, [form.watch("type")])

  async function onSubmit(values: MyFieldFormValues) {
    let res: any
    if (id) {
      res = await updateField(id, values)
    } else {
      // Handle create logic here, e.g., call createField API
      res = await createField(values)
    }

    if (res.success) {
      toast.success("Field updated successfully!")
      router.refresh()
    } else {
      toast.error(res.error)
    }
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <Card>
          <CardContent className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
            <FormField
              control={form.control}
              name={"name"}
              render={({ field: formField }) => (
                <FormItem className="flex flex-col gap-2">
                  <FormLabel>Field name</FormLabel>
                  <FormControl>
                    <Input
                      type={"text"}
                      placeholder={"Field name"}
                      {...formField}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name={"label"}
              render={({ field: formField }) => (
                <FormItem className="flex flex-col gap-2">
                  <FormLabel>Field label</FormLabel>
                  <FormControl>
                    <Input
                      type={"text"}
                      placeholder={"Field label"}
                      {...formField}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name={"module"}
              render={({ field: formField, fieldState }) => (
                <FormItem className="flex flex-col gap-2">
                  <FormLabel>{"Module"}</FormLabel>
                  <FormControl>
                    <select
                      value={String(formField.value || "")}
                      onChange={(e) => formField.onChange(e.target.value)}
                      className={`rounded border px-3 py-2 ${
                        fieldState.error ? "border-red-500" : "border-gray-300"
                      }`}
                    >
                      <option value="" disabled>
                        Select Module
                      </option>
                      <option value={"cabs"}>Cabs</option>
                      <option value={"foods"}>Foods</option>
                      <option value={"hotels"}>Hotels</option>
                      <option value={"others"}>Others</option>
                    </select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name={"is_required"}
              render={({ field: formField, fieldState }) => (
                <FormItem className="flex flex-col gap-2">
                  <FormLabel>{"Is Required"}</FormLabel>
                  <FormControl>
                    <select
                      value={String(formField.value || "")}
                      onChange={(e) => formField.onChange(e.target.value)}
                      className={`rounded border px-3 py-2 ${
                        fieldState.error ? "border-red-500" : "border-gray-300"
                      }`}
                    >
                      <option value={1}>Yes</option>
                      <option value={0}>No</option>
                    </select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name={"type"}
              render={({ field: formField, fieldState }) => (
                <FormItem className="flex flex-col gap-2">
                  <FormLabel>{"Type"}</FormLabel>
                  <FormControl>
                    <select
                      value={String(formField.value || "")}
                      onChange={(e) => formField.onChange(e.target.value)}
                      className={`rounded border px-3 py-2 ${
                        fieldState.error ? "border-red-500" : "border-gray-300"
                      }`}
                    >
                      <option value="" disabled>
                        Select Type
                      </option>
                      <option value={"text"}>Text</option>
                      <option value={"number"}>Number</option>
                      <option value={"textarea"}>Textarea</option>
                      <option value={"select"}>Select</option>
                      <option value={"multiselect"}>Multi Select</option>
                      <option value={"date"}>Date</option>
                      <option value={"checkbox"}>Checkbox</option>
                      <option value={"radio"}>Radio</option>
                      <option value={"file"}>File</option>
                      <option value={"color"}>Color</option>
                      <option value={"email"}>Email</option>
                      <option value={"url"}>URL</option>
                      <option value={"password"}>Password</option>
                      <option value={"hidden"}>Hidden</option>
                      <option value={"readonly"}>Read Only</option>
                      <option value={"richtext"}>Rich Text</option>
                    </select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {form.watch("type") === "select" ||
            form.watch("type") === "multiselect" ? (
              <FormField
                control={form.control}
                name="options"
                render={({ field: formField }) => (
                  <FormItem className="flex flex-col gap-2">
                    <FormLabel>Field Options</FormLabel>

                    <FormControl>
                      <Input
                        type="text"
                        placeholder="Field options (comma separated)"
                        {...formField}
                      />
                    </FormControl>

                    <FormMessage />
                  </FormItem>
                )}
              />
            ) : null}

            <FormField
              control={form.control}
              name={"note"}
              render={({ field: formField }) => (
                <FormItem className="flex flex-col gap-2">
                  <FormLabel>{"Field Note"}</FormLabel>
                  <FormControl>
                    <Textarea placeholder={"Field Note"} {...formField} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
                control={form.control}
              name={"status"}
              render={({ field: formField, fieldState }) => (
                <FormItem className="flex flex-col gap-2">
                  <FormLabel>{"Status"}</FormLabel>
                  <FormControl>
                 <Select
                      value={String(formField.value || "")}
                      onValueChange={(value) => formField.onChange(Number(value))}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select Status" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="1">Enable</SelectItem>
                        <SelectItem value="0">Disable</SelectItem>
                      </SelectContent>
                    </Select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
          </CardContent>
          <CardFooter>
            <Button type="submit" disabled={form.formState.isSubmitting}>
              {form.formState.isSubmitting
                ? id
                  ? "Updating..."
                  : "Creating..."
                : id
                  ? "Update"
                  : "Create"}
            </Button>
          </CardFooter>
        </Card>
      </form>
    </Form>
  )
}