import {
  Badge,
  Button,
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  FormControl,
  FormItem,
  FormLabel,
  FormMessage,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Separator,
} from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import {
  CheckCircle2Icon,
  CheckIcon,
  ChevronDownIcon,
  Loader2Icon,
  WandSparklesIcon,
  XCircleIcon,
} from "lucide-react";
import * as React from "react";
import {
  type Control,
  type FieldPath,
  type FieldValues,
  useController,
  useFormContext,
  useFormState,
} from "react-hook-form";

import { useTranslation } from "../../locales/i18n.ts";

/* -------------------- Variants -------------------- */

const multiSelectFieldVariants = cva(
  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
  {
    variants: {
      variant: {
        default:
          "border-foreground/10 text-foreground bg-primary hover:bg-primary/80 text-primary-foreground",
        secondary:
          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive:
          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        inverted: "inverted",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

/* -------------------- Tipos -------------------- */

export type MultiSelectFieldOptionType = {
  label: string;
  value: string;
  group?: string;
  icon?: React.ComponentType<{ className?: string }>;
};

/**
 * Props base (visuales y de comportamiento)
 */
interface MultiSelectFieldBaseProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof multiSelectFieldVariants> {
  options: MultiSelectFieldOptionType[];
  onValueChange?: (values: string[]) => void; // ahora opcional (RHF-first)
  onValidateOption?: (value: string) => boolean;
  defaultValue?: string[];
  placeholder?: string;
  animation?: number;
  maxCount?: number;
  modalPopover?: boolean;
  asChild?: boolean;
  className?: string;
  selectAllVisible?: boolean;
}

/**
 * Props adicionales para paridad con TextField (RHF + UX)
 */
interface MultiSelectFieldTextFieldLikeProps<T extends FieldValues> {
  name: FieldPath<T>;
  control?: Control<T>; // opcional; si no, se usa useFormContext()
  label?: string;
  description?: string;
  required?: boolean;
  readOnly?: boolean;

  disabledWhileSubmitting?: boolean;
  showSuccessWhenValid?: boolean;
  showValidatingSpinner?: boolean;
}

/**
 * Props completas
 */
export type MultiSelectFieldProps<T extends FieldValues> = MultiSelectFieldBaseProps &
  MultiSelectFieldTextFieldLikeProps<T>;

/* -------------------- Componente -------------------- */

export const MultiSelectFieldInner = React.forwardRef(
  <T extends FieldValues>(
    {
      // RHF-like
      name,
      control: controlProp,
      label,
      description,
      required,
      readOnly,

      disabledWhileSubmitting = true,
      showSuccessWhenValid = true,
      showValidatingSpinner = true,

      // tu API actual
      options,
      onValueChange,
      onValidateOption,
      variant,
      defaultValue = [],
      placeholder,
      animation = 0,
      maxCount = 3,
      modalPopover = false,
      asChild = false,
      className,
      selectAllVisible = false,

      // button props, etc.
      ...buttonProps
    }: MultiSelectFieldProps<T>,
    ref: React.Ref<HTMLButtonElement>
  ) => {
    const formCtx = useFormContext<T>();
    const control = controlProp ?? formCtx?.control;
    if (!control) {
      throw new Error(
        "MultiSelectField requiere 'control' o estar dentro de <FormProvider> (useFormContext)."
      );
    }

    const { t } = useTranslation();

    // RHF: estado del campo
    const { field, fieldState } = useController({
      control,
      name,
      defaultValue: undefined,
    });
    const { isSubmitting, isValidating } = useFormState({ control, name });

    // Inicializa el valor con defaultValue si RHF no trae nada:
    React.useEffect(() => {
      if (!Array.isArray(field.value) || field.value.length === 0) {
        if (defaultValue.length > 0) field.onChange(defaultValue);
      }
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const selectedValues: string[] = Array.isArray(field.value) ? field.value : [];

    const disabled = (disabledWhileSubmitting && isSubmitting) || buttonProps.disabled || readOnly;

    const invalid = fieldState.invalid && (fieldState.isDirty || fieldState.isTouched);
    const valid =
      !fieldState.invalid &&
      (fieldState.isDirty || fieldState.isTouched) &&
      selectedValues.length > 0;

    // A11y ids
    const describedById = description ? `${name}-desc` : undefined;
    const errorId = fieldState.error ? `${name}-err` : undefined;

    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
    const [isAnimating, setIsAnimating] = React.useState(false);

    // Agrupar opciones
    const grouped = options.reduce<Record<string, MultiSelectFieldOptionType[]>>((acc, item) => {
      const key = item.group || "";
      if (!acc[key]) acc[key] = [];
      acc[key].push(item);
      return acc;
    }, {});

    const emitChange = (values: string[]) => {
      field.onChange(values);
      onValueChange?.(values);
    };

    const toggleOption = (option: string) => {
      if (onValidateOption && !onValidateOption(option)) {
        console.warn(`Option "${option}" is not valid.`);
        return;
      }
      const next = selectedValues.includes(option)
        ? selectedValues.filter((v) => v !== option)
        : [...selectedValues, option];
      emitChange(next);
    };

    const handleClear = () => emitChange([]);
    const clearExtraOptions = () => emitChange(selectedValues.slice(0, maxCount));

    const toggleAll = () => {
      if (selectedValues.length === options.length) {
        handleClear();
      } else {
        emitChange(options.map((o) => o.value));
      }
    };

    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
      if (event.key === "Enter") setIsPopoverOpen(true);
      else if (event.key === "Backspace" && !event.currentTarget.value) {
        const next = selectedValues.slice(0, -1);
        emitChange(next);
      }
    };

    const buttonAriaDescribedBy = cn(describedById, errorId);

    return (
      <FormItem className='space-y-0'>
        {label && (
          <div className='mb-1 flex items-center gap-2'>
            <FormLabel className='m-0'>{label}</FormLabel>
            {required && <span className='text-xs text-destructive'>•</span>}
            {fieldState.isDirty && (
              <span className='text-[10px] text-muted-foreground'>(modificado)</span>
            )}
          </div>
        )}

        <FormControl>
          <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal={modalPopover}>
            <PopoverTrigger asChild>
              <Button
                ref={ref}
                type='button'
                {...buttonProps}
                disabled={disabled}
                onClick={() => setIsPopoverOpen((p) => !p)}
                aria-invalid={invalid || undefined}
                aria-describedby={buttonAriaDescribedBy}
                aria-errormessage={errorId}
                aria-busy={(showValidatingSpinner && isValidating) || undefined}
                className={cn(
                  "flex w-full min-h-10 h-auto items-center justify-between rounded-md border bg-inherit hover:bg-inherit [&_svg]:pointer-events-auto p-1",
                  invalid && "border-destructive",
                  valid && showSuccessWhenValid && "border-green-500",
                  className
                )}
              >
                {/* Contenido del trigger */}
                {selectedValues.length > 0 ? (
                  <div className='flex w-full items-center justify-between'>
                    <div className='flex flex-wrap items-center'>
                      {selectedValues.slice(0, maxCount).map((value) => {
                        const option = options.find((o) => o.value === value);
                        const Icon = option?.icon;
                        return (
                          <Badge
                            key={value}
                            className={cn(
                              isAnimating ? "animate-bounce" : "",
                              multiSelectFieldVariants({ variant })
                            )}
                            style={{ animationDuration: `${animation}s` }}
                          >
                            {Icon && <Icon className='mr-2 h-4 w-4' />}
                            {option?.label}
                          </Badge>
                        );
                      })}
                      {selectedValues.length > maxCount && (
                        <Badge
                          className={cn(
                            "bg-primary text-foreground border-foreground/1 hover:bg-primary",
                            isAnimating ? "animate-bounce" : "",
                            multiSelectFieldVariants({ variant })
                          )}
                          style={{ animationDuration: `${animation}s` }}
                        >
                          {`+ ${selectedValues.length - maxCount} more`}
                          <XCircleIcon
                            className='ml-2 h-4 w-4 cursor-pointer'
                            onClick={(e) => {
                              e.stopPropagation();
                              clearExtraOptions();
                            }}
                          />
                        </Badge>
                      )}
                    </div>

                    <div className='flex items-center gap-2'>
                      {showValidatingSpinner && isValidating && (
                        <Loader2Icon className='h-4 w-4 animate-spin' />
                      )}
                      {showSuccessWhenValid && valid && !isValidating && !invalid && (
                        <CheckCircle2Icon className='h-4 w-4 text-green-600' />
                      )}
                      <Separator orientation='vertical' className='flex h-full min-h-6' />
                      <ChevronDownIcon className='mx-2 h-4 cursor-pointer text-muted-foreground' />
                    </div>
                  </div>
                ) : (
                  <div className='mx-auto flex w-full items-center justify-between'>
                    <span className='mx-3 text-sm text-muted-foreground'>
                      {placeholder || t("components.multi_select.select_options")}
                    </span>

                    <div className='flex items-center gap-2'>
                      {showValidatingSpinner && isValidating && (
                        <Loader2Icon className='h-4 w-4 animate-spin' />
                      )}
                      {showSuccessWhenValid && valid && !isValidating && !invalid && (
                        <CheckCircle2Icon className='h-4 w-4 text-green-600' />
                      )}
                      <ChevronDownIcon className='mx-2 h-4 cursor-pointer text-muted-foreground' />
                    </div>
                  </div>
                )}
              </Button>
            </PopoverTrigger>

            <PopoverContent
              className='w-auto p-0'
              align='start'
              onEscapeKeyDown={() => setIsPopoverOpen(false)}
            >
              <Command>
                <CommandInput placeholder={t("common.search")} onKeyDown={handleInputKeyDown} />
                <CommandList>
                  <CommandEmpty>{t("components.multi_select.no_results")}</CommandEmpty>

                  {selectAllVisible && (
                    <CommandItem key='all' onSelect={toggleAll} className='cursor-pointer'>
                      <div
                        className={cn(
                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                          selectedValues.length === options.length
                            ? "bg-primary text-primary-foreground"
                            : "opacity-50 [&_svg]:invisible"
                        )}
                      >
                        <CheckIcon className='h-4 w-4' />
                      </div>
                      <span>(Select All)</span>
                    </CommandItem>
                  )}

                  {Object.keys(grouped).map((group) => (
                    <CommandGroup key={`group-${group || "ungrouped"}`} heading={group}>
                      {grouped[group].map((option) => {
                        const isSelected = selectedValues.includes(option.value);
                        const Icon = option.icon;
                        return (
                          <CommandItem
                            key={option.value}
                            onSelect={() => toggleOption(option.value)}
                            className='cursor-pointer'
                          >
                            <div
                              className={cn(
                                "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
                                isSelected ? "bg-primary" : "opacity-50 [&_svg]:invisible"
                              )}
                            >
                              <CheckIcon
                                className={cn(
                                  "h-4 w-4",
                                  isSelected ? "text-primary-foreground" : ""
                                )}
                              />
                            </div>
                            {Icon && <Icon className='mr-2 h-4 w-4 text-muted-foreground' />}
                            <span>{option.label}</span>
                          </CommandItem>
                        );
                      })}
                    </CommandGroup>
                  ))}

                  <CommandSeparator />

                  <CommandGroup>
                    <div className='flex items-center justify-between'>
                      {selectedValues.length > 0 && (
                        <>
                          <CommandItem
                            onSelect={handleClear}
                            className='flex-1 cursor-pointer justify-center'
                          >
                            {t("components.multi_select.clear_selection")}
                          </CommandItem>
                          <Separator orientation='vertical' className='flex h-full min-h-6' />
                        </>
                      )}
                      <CommandItem
                        onSelect={() => setIsPopoverOpen(false)}
                        className='flex-1 cursor-pointer justify-center'
                      >
                        {t("components.multi_select.close")}
                      </CommandItem>
                    </div>
                  </CommandGroup>
                </CommandList>
              </Command>
            </PopoverContent>

            {animation! > 0 && selectedValues.length > 0 && (
              <WandSparklesIcon
                className={cn(
                  "my-2 h-3 w-3 cursor-pointer bg-background text-foreground",
                  isAnimating ? "" : "text-muted-foreground"
                )}
                onClick={() => setIsAnimating((s) => !s)}
              />
            )}
          </Popover>
        </FormControl>

        <div className='mt-1 flex items-start justify-between'>
          <p
            id={describedById}
            className={cn("text-xs text-muted-foreground", !description && "invisible")}
          >
            {description || "\u00A0"}
          </p>
        </div>

        <FormMessage id={errorId} />
      </FormItem>
    );
  }
);

MultiSelectFieldInner.displayName = "MultiSelectField";

export const MultiSelectField = MultiSelectFieldInner as <T extends FieldValues>(
  p: MultiSelectFieldProps<T> & { ref?: React.Ref<HTMLButtonElement> }
) => React.JSX.Element;