path: root/lib/vendor-users/table/add-ausers-dialog.tsx

"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,
  FormDescription,
} from "@/components/ui/form"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Role, userRoles } from "@/db/schema/users"
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 { CreateVendorUserSchema, createVendorUserSchema } from "../validations"
import { createVendorUser, getAllRolesbyVendor } from "../service"

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


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

// Get phone placeholder based on common patterns
const getPhonePlaceholder = (): string => {
  return "+82 010-1234-5678"; // Default to Korean format
};

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

export function AddUserDialog() {
  const [open, setOpen] = React.useState(false)
  const [roles, setRoles] = React.useState<Role[]>([]) 
  const [isAddPending, startAddTransition] = React.useTransition()

  React.useEffect(() => {
    getAllRolesbyVendor().then((res) => {
      setRoles(res)
    })
  }, [])

  // react-hook-form 세팅
  const form = useForm<CreateVendorUserSchema & { language?: string; phone?: string }>({
    resolver: zodResolver(createVendorUserSchema),
    defaultValues: {
      name: "",
      email: "",
      phone: "", // Add phone field
      companyId: null,
      language: 'en',
      roles: ["Vendor Admin"],
      domain: 'partners'
    },
  })

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

    // Validate phone number if provided
    if (data.phone && !validatePhoneNumber(data.phone)) {
      toast.error("올바른 국제 전화번호 형식이 아닙니다.")
      return
    }

    startAddTransition(async () => {
      const result = await createVendorUser(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 className="max-w-md">
        <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>
                )}
              />

              {/* Role (Vendor Admin) - 읽기 전용 */}
              <FormField
                control={form.control}
                name="roles"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Role</FormLabel>
                    <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={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>
  )
}