path: root/lib/roles/table/update-roles-sheet.tsx

"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { toast } from "sonner"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
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,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
  SelectGroup,
} from "@/components/ui/select"
// import your MultiSelect or other role selection
import { RoleView, userRoles, type UserView } from "@/db/schema/users"
import { getAllCompanies, modifiUser } from "@/lib/admin-users/service"
import { modifiRole } from "../services"
import { updateRoleSchema, UpdateRoleSchema } from "../validations"
import { Check, ChevronsUpDown, Loader } from "lucide-react"
import { Textarea } from "@/components/ui/textarea"
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover"
import {
  Command,
  CommandInput,
  CommandList,
  CommandGroup,
  CommandItem,
  CommandEmpty,
} from "@/components/ui/command"
import { Company } from "@/db/schema/companies"
import { cn } from "@/lib/utils"

export interface UpdateRoleSheetProps
  extends React.ComponentPropsWithRef<typeof Sheet> {
  role: RoleView | null
}

const domainOptions = [
  { value: "partners", label: "협력업체" },
  { value: "evcp", label: "삼성중공업" },
]



export function UpdateRolesSheet({ role, ...props }: UpdateRoleSheetProps) {
  const [isUpdatePending, startUpdateTransition] = React.useTransition()
  const [companies, setCompanies] = React.useState<Company[]>([])  // 회사 목록

  React.useEffect(() => {
    getAllCompanies().then((res) => {
      setCompanies(res)
    })
  }, [])


  // 1) RHF 설정
  const form = useForm<UpdateRoleSchema>({
    resolver: zodResolver(updateRoleSchema),
    defaultValues: {
      name: role?.name ?? "",
      description: role?.description ?? "",
      domain:  (role?.domain === "evcp" || role?.domain === "partners")
      ? role?.domain
      : undefined,
    },
  })

  // 2) user prop 바뀔 때마다 form.reset
  React.useEffect(() => {
    if (role) {
      form.reset({
        name: role.name,
        description: role.description,
        domain: role.domain as "evcp" | "partners" | undefined,
      })
    }
  }, [role, form])

  const selectedDomain = form.watch("domain")

  
  // 3) onSubmit
  async function onSubmit(input: UpdateRoleSchema) {
    startUpdateTransition(async () => {
      if (!role) return

      const { error } = await modifiRole({
        id: role.id, // user.userId
        ...input,
      })

      if (error) {
        toast.error(error)
        return
      }

      // 성공 시
      form.reset()
      props.onOpenChange?.(false)
      toast.success("User updated successfully!")
    })
  }

  return (
    <Sheet {...props}>
      <SheetContent className="flex flex-col gap-6 sm:max-w-md" style={{width:1000, maxWidth:1000}}>
        <SheetHeader className="text-left">
          <SheetTitle>Update user</SheetTitle>
          <SheetDescription>
            Update the user details and save the changes
          </SheetDescription>
        </SheetHeader>

        {/* 4) RHF Form */}
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex flex-col gap-4"
          >
            {/* name */}
            <FormField
              control={form.control}
              name="name"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Role Name</FormLabel>
                  <FormControl>
                    <Input
                      placeholder="e.g. admin"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <FormField
              control={form.control}
              name="description"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Role Description</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder="Describe role"
                      className="resize-none"
                      {...field}
                    />
                  </FormControl>
                  {/* <FormDescription>
                      You can <span>@mention</span> other users and organizations to
                      link to them.
                    </FormDescription> */}
                  <FormMessage />
                </FormItem>
              )}
            />


            {/* language Select */}
            <FormField
              control={form.control}
              name="domain"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Domain</FormLabel>
                  <FormControl>
                    <Select
                      onValueChange={field.onChange}
                      // 'value'로 현재 값 연결. defaultValue 대신 Controlled 컴포넌트로
                      value={field.value}
                    >
                      <SelectTrigger>
                        <SelectValue placeholder="Select Domain" />
                      </SelectTrigger>
                      <SelectContent>
                        {domainOptions.map((v, index) => (
                          <SelectItem key={index} value={v.value}>
                            {v.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            {selectedDomain === "partners" && (
              <FormField
                control={form.control}
                name="company_id"
                render={({ field }) => {
                  // 현재 선택된 회사 ID (number) → 문자열
                  const valueString = field.value ? String(field.value) : ""


                  // 현재 선택된 회사
                  const selectedCompany = companies.find(
                    (c) => String(c.id) === valueString
                  )

                  const selectedCompanyLabel = selectedCompany && `${selectedCompany.name} ${selectedCompany.taxID}`

                  const [popoverOpen, setPopoverOpen] = React.useState(false)


                  return (
                    <FormItem>
                      <FormLabel>Company</FormLabel>
                      <FormControl>
                        <Popover
                          open={popoverOpen}
                          onOpenChange={setPopoverOpen}
                          modal={true}
                        >
                          <PopoverTrigger asChild>
                            <Button
                              variant="outline"
                              role="combobox"
                              aria-expanded={popoverOpen}
                              className="w-full justify-between"
                            >
                              {selectedCompany
                                ? `${selectedCompany.name} ${selectedCompany.taxID}`
                                : "Select company..."}
                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                            </Button>
                          </PopoverTrigger>

                          <PopoverContent className="w-full p-0" side="bottom" >
                            <Command>
                              <CommandInput
                                placeholder="Search company..."
                                className="h-9"

                              />
                              <CommandList>
                                <CommandEmpty>No company found.</CommandEmpty>
                                <CommandGroup>
                                  {companies.map((comp) => {
                                    // string(comp.id)
                                    const compIdStr = String(comp.id)
                                    const label = `${comp.name}${comp.taxID}`
                                    const label2 = `${comp.name} ${comp.taxID}`
                                    return (
                                      <CommandItem
                                        key={comp.id}
                                        value={label2}
                                        onSelect={() => {
                                          // 회사 ID를 number로
                                          field.onChange(Number(comp.id))
                                          setPopoverOpen(false)

                                        }}
                                      >
                                        {label2}
                                        <Check
                                          className={cn(
                                            "ml-auto h-4 w-4",
                                            selectedCompanyLabel === label2
                                              ? "opacity-100"
                                              : "opacity-0"
                                          )}
                                        />
                                      </CommandItem>
                                    )
                                  })}
                                </CommandGroup>
                              </CommandList>
                            </Command>
                          </PopoverContent>
                        </Popover>
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )
                }}
              />
            )}

            {/* 5) Footer: Cancel, Save */}
            <SheetFooter className="gap-2 pt-2 sm:space-x-0">
              <SheetClose asChild>
                <Button type="button" variant="outline">
                  Cancel
                </Button>
              </SheetClose>

              <Button type="submit" disabled={isUpdatePending}>
                {isUpdatePending && (
                  <Loader
                    className="mr-2 size-4 animate-spin"
                    aria-hidden="true"
                  />
                )}
                Save
              </Button>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  )
}