"use client"

import * as React from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

// react-hook-form + shadcn/ui Form
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Role, userRoles } from "@/db/schema/users"
import { createUserSchema, type CreateUserSchema } from "@/lib/admin-users/validations"
import { createAdminUser, getAllCompanies, getAllRoles } from "@/lib/admin-users/service"
import { type Company } from "@/db/schema/companies"
import { MultiSelect } from "@/components/ui/multi-select"
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover"
import {
  Command,
  CommandInput,
  CommandList,
  CommandGroup,
  CommandItem,
  CommandEmpty,
} from "@/components/ui/command"
import { Check, ChevronsUpDown, Loader } from "lucide-react"
import { cn } from "@/lib/utils"
import { toast } from "sonner"
import { Vendor } from "@/db/schema/vendors"
import { FormDescription } from "@/components/ui/form"

const languageOptions = [
  { value: "ko", label: "한국어" },
  { value: "en", label: "English" },
]

// Phone validation helper
const validatePhoneNumber = (phone: string): boolean => {
  if (!phone) return true; // Optional field
  // Basic international phone number validation
  const cleanPhone = phone.replace(/[\s\-\(\)]/g, '');
  return /^\+\d{3,20}$/.test(cleanPhone);
};

// Get phone placeholder
const getPhonePlaceholder = (): string => {
  return "+82-10-1234-5678";
};

// Get phone description
const getPhoneDescription = (): string => {
  return "국제 전화번호를 입력하세요. (예: +82-10-1234-5678)";
};


export function AddUserDialog() {
  const [open, setOpen] = React.useState(false)
  const [companies, setCompanies] = React.useState<Vendor[]>([])  // 회사 목록
  const [roles, setRoles] = React.useState<Role[]>([]) 
  const [isAddPending, startAddTransition] = React.useTransition()


  
  React.useEffect(() => {
    // 회사 목록 불러오기 (예시)
    getAllCompanies().then((res) => {
      setCompanies(res)
    })

    getAllRoles().then((res) => {
      setRoles(res)
    })
  }, [])

  // react-hook-form 세팅
  const form = useForm<CreateUserSchema & { language?: string; phone?: string }>({
    resolver: zodResolver(createUserSchema),
    defaultValues: {
      name: "",
      email: "",
      phone: "", // Add phone field
      companyId: null,
      language:'en',
      // roles는 array<string>, 여기서는 단일 선택 시 [role]로 담음
      roles: ["Vendor Admin"],
      domain:'partners'
      // domain, etc. 필요하다면 추가
    },
  })


  async function onSubmit(data: CreateUserSchema & { language?: string; phone?: string }) {
      data.domain = "partners"

    // Phone validation is now handled by zod schema

    // 만약 단일 Select로 role을 정했다면, data.roles = ["manager"] 이런 식
    startAddTransition(async ()=> {
      const result = await createAdminUser(data)
      if (result.error) {
        toast.error(`에러: ${result.error}`)
        return
      }
      form.reset()
      setOpen(false)
      toast.success("User added")
    })

  }

  function handleDialogOpenChange(nextOpen: boolean) {
    if (!nextOpen) {
      form.reset()
    }
    setOpen(nextOpen)
  }

  return (
    <Dialog open={open} onOpenChange={handleDialogOpenChange}>
      {/* 모달을 열기 위한 버튼 */}
      <DialogTrigger asChild>
        <Button variant="default" size="sm">
          Add User
        </Button>
      </DialogTrigger>

      <DialogContent>
        <DialogHeader>
          <DialogTitle>Create New User</DialogTitle>
          <DialogDescription>
            새 User 정보를 입력하고 <b>Create</b> 버튼을 누르세요.
          </DialogDescription>
        </DialogHeader>

        {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */}
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)}>
            <div className="space-y-4 py-4">
              {/* 사용자 이름 */}
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>User Name</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="e.g. dujin"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 이메일 */}
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input
                        placeholder="e.g. user@example.com"
                        type="email"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

              {/* 전화번호 - 새로 추가 */}
              <FormField
                control={form.control}
                name="phone"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Phone Number</FormLabel>
                    <FormControl>
                      <Input
                        placeholder={getPhonePlaceholder()}
                        {...field}
                        className={cn(
                          field.value && !validatePhoneNumber(field.value) && "border-red-500"
                        )}
                      />
                    </FormControl>
                    <FormDescription className="text-xs text-muted-foreground">
                      {getPhoneDescription()}
                    </FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

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


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

                  const selectedCompanyLabel = selectedCompany && `${selectedCompany.vendorName} ${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.vendorName} ${selectedCompany.taxId}`
                                : "Select company..."}
                              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                            </Button>
                          </PopoverTrigger>

                          <PopoverContent className="w-full p-0">
                            <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.vendorName}${comp.taxId}`
                                    const label2 = `${comp.vendorName} ${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>
                  )
                }}
              />
              {/* Role (Vendor Admin) - 읽기 전용 */}
              <FormField
                control={form.control}
                name="roles" // 실제 필드: z.array(z.string())
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Role</FormLabel>
                    {/* UI에선 그냥 Vendor Admin이라고 표시만 (disabled) */}
                    <FormControl>
                      <Input
                        readOnly
                        disabled
                        value="Vendor Admin"
                        className="bg-gray-50 text-gray-500"
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

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

            </div>

            <DialogFooter>
              <Button
                type="button"
                variant="outline"
                onClick={() => setOpen(false)}
                disabled={isAddPending}
              >
              {isAddPending && (
                <Loader
                  className="mr-2 size-4 animate-spin"
                  aria-hidden="true"
                />
              )}
                Cancel
              </Button>
              <Button type="submit" disabled={form.formState.isSubmitting || isAddPending}>
              {isAddPending && (
                <Loader
                  className="mr-2 size-4 animate-spin"
                  aria-hidden="true"
                />
              )}
                Create
              </Button>
            </DialogFooter>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  )
}