"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Loader } from "lucide-react"
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,
  FormDescription,
} from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
  SelectValue,
} from "@/components/ui/select"
// import your MultiSelect or other role selection
import { MultiSelect } from "@/components/ui/multi-select"
import { cn } from "@/lib/utils"

import { type UserView } from "@/db/schema/users"
import { updateUserSchema, type UpdateUserSchema } from "@/lib/admin-users/validations"
import { modifiUser } from "@/lib/admin-users/service"
import {
  Popover,
  PopoverTrigger,
  PopoverContent,
} from "@/components/ui/popover"
import {
  Command,
  CommandInput,
  CommandList,
  CommandGroup,
  CommandItem,
  CommandEmpty,
} from "@/components/ui/command"
import { Check, ChevronsUpDown } from "lucide-react"
import { ScrollArea } from "@/components/ui/scroll-area"

// i18n-iso-countries import
import i18nIsoCountries from "i18n-iso-countries"
import enLocale from "i18n-iso-countries/langs/en.json"
import koLocale from "i18n-iso-countries/langs/ko.json"

i18nIsoCountries.registerLocale(enLocale)
i18nIsoCountries.registerLocale(koLocale)

const locale = "ko"
const countryMap = i18nIsoCountries.getNames(locale, { select: "official" })
const countryArray = Object.entries(countryMap).map(([code, label]) => ({
  code,
  label,
}))

// Sort countries to put Korea first, then alphabetically
const sortedCountryArray = [...countryArray].sort((a, b) => {
  if (a.code === "KR") return -1;
  if (b.code === "KR") return 1;
  return a.label.localeCompare(b.label);
});

// Add English names for Korean locale
const enhancedCountryArray = sortedCountryArray.map(country => ({
  ...country,
  label: locale === "ko" && country.code === "KR" 
    ? "대한민국 (South Korea)" 
    : country.label
}));

// Comprehensive list of country dial codes
const countryDialCodes: { [key: string]: string } = {
  AF: "+93", AL: "+355", DZ: "+213", AS: "+1-684", AD: "+376", AO: "+244",
  AI: "+1-264", AG: "+1-268", AR: "+54", AM: "+374", AW: "+297", AU: "+61",
  AT: "+43", AZ: "+994", BS: "+1-242", BH: "+973", BD: "+880", BB: "+1-246",
  BY: "+375", BE: "+32", BZ: "+501", BJ: "+229", BM: "+1-441", BT: "+975",
  BO: "+591", BA: "+387", BW: "+267", BR: "+55", BN: "+673", BG: "+359",
  BF: "+226", BI: "+257", KH: "+855", CM: "+237", CA: "+1", CV: "+238",
  KY: "+1-345", CF: "+236", TD: "+235", CL: "+56", CN: "+86", CO: "+57",
  KM: "+269", CG: "+242", CD: "+243", CR: "+506", CI: "+225", HR: "+385",
  CU: "+53", CY: "+357", CZ: "+420", DK: "+45", DJ: "+253", DM: "+1-767",
  DO: "+1-809", EC: "+593", EG: "+20", SV: "+503", GQ: "+240", ER: "+291",
  EE: "+372", ET: "+251", FJ: "+679", FI: "+358", FR: "+33", GA: "+241",
  GM: "+220", GE: "+995", DE: "+49", GH: "+233", GR: "+30", GD: "+1-473",
  GT: "+502", GN: "+224", GW: "+245", GY: "+592", HT: "+509", HN: "+504",
  HK: "+852", HU: "+36", IS: "+354", IN: "+91", ID: "+62", IR: "+98",
  IQ: "+964", IE: "+353", IL: "+972", IT: "+39", JM: "+1-876", JP: "+81",
  JO: "+962", KZ: "+7", KE: "+254", KI: "+686", KR: "+82", KW: "+965",
  KG: "+996", LA: "+856", LV: "+371", LB: "+961", LS: "+266", LR: "+231",
  LY: "+218", LI: "+423", LT: "+370", LU: "+352", MK: "+389", MG: "+261",
  MW: "+265", MY: "+60", MV: "+960", ML: "+223", MT: "+356", MH: "+692",
  MR: "+222", MU: "+230", MX: "+52", FM: "+691", MD: "+373", MC: "+377",
  MN: "+976", ME: "+382", MA: "+212", MZ: "+258", MM: "+95", NA: "+264",
  NR: "+674", NP: "+977", NL: "+31", NZ: "+64", NI: "+505", NE: "+227",
  NG: "+234", NU: "+683", KP: "+850", NO: "+47", OM: "+968", PK: "+92",
  PW: "+680", PS: "+970", PA: "+507", PG: "+675", PY: "+595", PE: "+51",
  PH: "+63", PL: "+48", PT: "+351", PR: "+1-787", QA: "+974", RO: "+40",
  RU: "+7", RW: "+250", KN: "+1-869", LC: "+1-758", VC: "+1-784", WS: "+685",
  SM: "+378", ST: "+239", SA: "+966", SN: "+221", RS: "+381", SC: "+248",
  SL: "+232", SG: "+65", SK: "+421", SI: "+386", SB: "+677", SO: "+252",
  ZA: "+27", SS: "+211", ES: "+34", LK: "+94", SD: "+249", SR: "+597",
  SZ: "+268", SE: "+46", CH: "+41", SY: "+963", TW: "+886", TJ: "+992",
  TZ: "+255", TH: "+66", TL: "+670", TG: "+228", TK: "+690", TO: "+676",
  TT: "+1-868", TN: "+216", TR: "+90", TM: "+993", TV: "+688", UG: "+256",
  UA: "+380", AE: "+971", GB: "+44", US: "+1", UY: "+598", UZ: "+998",
  VU: "+678", VA: "+39-06", VE: "+58", VN: "+84", YE: "+967", ZM: "+260",
  ZW: "+263"
};

export interface UpdateAuserSheetProps
  extends React.ComponentPropsWithRef<typeof Sheet> {
  user: UserView | null
}

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 = (countryCode: string | undefined) => {
  if (!countryCode || !countryDialCodes[countryCode]) return "전화번호";
  return `${countryDialCodes[countryCode]} 전화번호`;
};

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


export function UpdateAuserSheet({ user, ...props }: UpdateAuserSheetProps) {
  const [isUpdatePending, startUpdateTransition] = React.useTransition()
  
  // 1) RHF 설정
  const form = useForm<UpdateUserSchema & { language?: string; phone?: string }>({
    resolver: zodResolver(updateUserSchema),
    defaultValues: {
      name: user?.user_name ?? "",
      email: user?.user_email ?? "",
      phone: user?.user_phone ?? "", // Add phone field
      companyId: user?.company_id ?? null,
      roles: user?.roles ?? [],
      language:'en',
    },
  })

  // 2) user prop 바뀔 때마다 form.reset
  React.useEffect(() => {
    if (user) {
      form.reset({
        name: user.user_name,
        email: user.user_email,
        phone: user.user_phone || "", // Add phone field
        companyId: user.company_id,
        roles: user.roles,
        language: 'en', // You might want to get this from user object
      })
    }
  }, [user, form])


  // 3) onSubmit
  async function onSubmit(input: UpdateUserSchema & { language?: string; phone?: string }) {
    // Phone validation is now handled by zod schema

    startUpdateTransition(async () => {
      if (!user) return

      const { error } = await modifiUser({
        id: user.user_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">
        <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>User Name</FormLabel>
                  <FormControl>
                    <Input placeholder="e.g. dujin" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

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

            {/* 국가 선택 */}
            <FormField
              control={form.control}
              name="country"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Country</FormLabel>
                  <Popover>
                    <PopoverTrigger asChild>
                      <FormControl>
                        <Button
                          variant="outline"
                          role="combobox"
                          className={cn(
                            "w-full justify-between",
                            !field.value && "text-muted-foreground"
                          )}
                        >
                          {field.value
                            ? i18nIsoCountries.getName(field.value, "ko")
                            : "국가를 선택하세요"}
                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                        </Button>
                      </FormControl>
                    </PopoverTrigger>
                    <PopoverContent className="w-full p-0">
                      <Command>
                        <CommandInput placeholder="국가를 검색하세요..." />
                        <CommandEmpty>국가를 찾을 수 없습니다.</CommandEmpty>
                        <CommandGroup>
                          <ScrollArea className="h-72">
                            {Object.entries(i18nIsoCountries.getNames("ko")).map(([code, name]) => (
                              <CommandItem
                                key={code}
                                value={`${code} ${name}`}
                                onSelect={() => {
                                  form.setValue("country", code);
                                }}
                              >
                                <Check
                                  className={cn(
                                    "mr-2 h-4 w-4",
                                    code === field.value ? "opacity-100" : "opacity-0"
                                  )}
                                />
                                {name}
                              </CommandItem>
                            ))}
                          </ScrollArea>
                        </CommandGroup>
                      </Command>
                    </PopoverContent>
                  </Popover>
                  <FormMessage />
                </FormItem>
              )}
            />

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

            {/* roles */}
            <FormField
              control={form.control}
              name="roles"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Roles</FormLabel>
                  <FormControl>
                    <MultiSelect
                      // 예: userRoles.role.enumValues = ["admin","normal"]
                      defaultValue={form?.getValues().roles}
                      options={[ 
                        { value: "999999999", label: "admin" } 
                      ]}
                      value={field.value}
                      onValueChange={(vals) => field.onChange(vals)}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

            <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>
              )}
            />

            {/* 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>
  )
}