// "use client"

// import { zodResolver } from "@hookform/resolvers/zod"
// import { useForm } from "react-hook-form"
// import { z } from "zod"

// import { Button } from "@/app/_components/ui/button"
// import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/app/_components/ui/form"
// import { Input } from "@/app/_components/ui/input"
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/app/_components/ui/select"
// import { useState } from "react"
// import { User } from "./column"
// import { updateUser } from "../../user-management/action"
// import { toast } from "@/app/_hooks/use-toast"

// const userFormSchema = z.object({
//   email: z.string().email({ message: "Please enter a valid email address" }),
//   first_name: z.string().nullable(),
//   last_name: z.string().nullable(),
//   role: z.enum(["user", "admin", "moderator"]),
// })

// type UserFormValues = z.infer<typeof userFormSchema>

// interface UserFormProps {
//   user: User
// }

// export function UserForm({ user }: UserFormProps) {
//   const [isSubmitting, setIsSubmitting] = useState(false)

//   const form = useForm<UserFormValues>({
//     resolver: zodResolver(userFormSchema),
//     defaultValues: {
//       email: user.email,
//       first_name: user.first_name,
//       last_name: user.last_name,
//       role: user.role as "user" | "admin" | "moderator",
//     },
//   })

//   async function onSubmit(data: UserFormValues) {
//     try {
//       setIsSubmitting(true)
//       await updateUser(user.id, data)
//       toast({
//         title: "User updated",
//         description: "The user" + user.email + " has been updated.",
//       })
//     } catch (error) {
//       toast({
//         title: "Failed to update user",
//         description: "An error occurred while updating the user.",
//         variant: "destructive",
//       })
//       console.error(error)
//     } finally {
//       setIsSubmitting(false)
//     }
//   }

//   return (
//     <Form {...form}>
//       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
//         <FormField
//           control={form.control}
//           name="email"
//           render={({ field }) => (
//             <FormItem>
//               <FormLabel className="text-white">Email</FormLabel>
//               <FormControl>
//                 <Input
//                   {...field}
//                   className="bg-[#1c1c1c] border-[#2a2a2a] text-white focus-visible:ring-[#2a2a2a] focus-visible:ring-offset-0"
//                 />
//               </FormControl>
//               <FormDescription className="text-gray-400">This is the user's email address.</FormDescription>
//               <FormMessage />
//             </FormItem>
//           )}
//         />
//         <div className="grid grid-cols-2 gap-4">
//           <FormField
//             control={form.control}
//             name="first_name"
//             render={({ field }) => (
//               <FormItem>
//                 <FormLabel className="text-white">First Name</FormLabel>
//                 <FormControl>
//                   <Input
//                     {...field}
//                     value={field.value || ""}
//                     className="bg-[#1c1c1c] border-[#2a2a2a] text-white focus-visible:ring-[#2a2a2a] focus-visible:ring-offset-0"
//                   />
//                 </FormControl>
//                 <FormMessage />
//               </FormItem>
//             )}
//           />
//           <FormField
//             control={form.control}
//             name="last_name"
//             render={({ field }) => (
//               <FormItem>
//                 <FormLabel className="text-white">Last Name</FormLabel>
//                 <FormControl>
//                   <Input
//                     {...field}
//                     value={field.value || ""}
//                     className="bg-[#1c1c1c] border-[#2a2a2a] text-white focus-visible:ring-[#2a2a2a] focus-visible:ring-offset-0"
//                   />
//                 </FormControl>
//                 <FormMessage />
//               </FormItem>
//             )}
//           />
//         </div>
//         <FormField
//           control={form.control}
//           name="role"
//           render={({ field }) => (
//             <FormItem>
//               <FormLabel className="text-white">Role</FormLabel>
//               <Select onValueChange={field.onChange} defaultValue={field.value}>
//                 <FormControl>
//                   <SelectTrigger className="bg-[#1c1c1c] border-[#2a2a2a] text-white focus:ring-[#2a2a2a] focus:ring-offset-0">
//                     <SelectValue placeholder="Select a role" />
//                   </SelectTrigger>
//                 </FormControl>
//                 <SelectContent className="bg-[#1c1c1c] border-[#2a2a2a] text-white">
//                   <SelectItem value="user">User</SelectItem>
//                   <SelectItem value="admin">Admin</SelectItem>
//                   <SelectItem value="moderator">Moderator</SelectItem>
//                 </SelectContent>
//               </Select>
//               <FormDescription className="text-gray-400">The user's role determines their permissions.</FormDescription>
//               <FormMessage />
//             </FormItem>
//           )}
//         />
//         <Button type="submit" disabled={isSubmitting} className="bg-emerald-600 hover:bg-emerald-700 text-white">
//           {isSubmitting ? "Saving..." : "Save changes"}
//         </Button>
//       </form>
//     </Form>
//   )
// }