"use client";

import {
  ControllerFieldState,
  ControllerRenderProps,
  FieldValues,
} from "react-hook-form";
import { Select, SelectItem, Textarea } from "@heroui/react";
import { CustomInput } from "./custom";
import { useLocale } from "next-intl";

type DynamicInputProps<T extends FieldValues> = {
  field: Partial<ControllerRenderProps<any, any>> & {
    name: string;
    value?: any;
    onChange: (value: any) => void;
  };
  fieldState?: ControllerFieldState;
  label?: string;
  placeholder?: string;
  type?: "text" | "email" | "tel" | "select" | "textarea" | "file" | "number";
  options?: { value: string; label: string }[];
  variant?: "flat" | "bordered" | "faded" | "underlined";
  isDisabled?: boolean;
  className?: string;
  size?: "sm" | "md" | "lg";
  multiple?: boolean;
};

const DynamicInput = <T extends FieldValues>({
  field,
  fieldState,
  label,
  placeholder,
  type = "text",
  options = [],
  variant = "bordered",
  isDisabled = false,
  className,
  size = "sm",
}: DynamicInputProps<T>) => {
  const locale = useLocale();
  const requestLang = (() => {
    const raw =
      typeof document !== "undefined"
        ? document.documentElement.getAttribute("lang")
        : locale;
    const v = String(raw || "").toLowerCase();
    if (v.startsWith("ar")) return "ar";
    return "en";
  })();
  const errorMessage = fieldState?.error?.message || "";

  const selectTriggerBase = `border rounded-xl border-borderClr px-3 ${
    errorMessage
      ? "ring-1 ring-red-500"
      : "focus-within:ring-1 focus-within:ring-primary"
  }`;

  const selectTriggerSize =
    size === "sm" ? "h-11 py-2" : size === "md" ? "h-12 py-2.5" : "h-14 py-3";

  const selectLabelSize = size === "sm" ? "text-xs py-1" : "text-sm py-2";

  switch (type) {
    case "select":
      return (
        <div className={`flex flex-col ${className}`}>
          <Select
            label={label}
            placeholder={placeholder}
            selectedKeys={field.value ? [field.value] : []}
            onChange={(val) => field.onChange(val)}
            variant={variant}
            isDisabled={isDisabled}
            isInvalid={!!errorMessage}
            errorMessage={errorMessage}
            size={size}
            classNames={{
              label: `text-primaryText font-medium ${selectLabelSize}`,
              trigger: `${selectTriggerBase} ${selectTriggerSize}`,
              value: "text-sm text-primaryText",
              listboxWrapper: "bg-white rounded-lg shadow-sm",
              errorMessage: "text-xs mt-1 px-1 text-red-500",
            }}
          >
            {options.map((opt) => (
              <SelectItem key={opt.value} textValue={opt.label}>
                {opt.label}
              </SelectItem>
            ))}
          </Select>
        </div>
      );

    case "textarea":
      return (
        <Textarea
          {...field}
          label={label}
          placeholder={placeholder}
          variant={variant}
          isDisabled={isDisabled}
          isInvalid={!!errorMessage}
          errorMessage={errorMessage}
          size={size}
          className={className}
        />
      );

    case "file":
      return (
        <div className={`flex flex-col ${className}`}>
          {label && (
            <label className="text-primaryText font-medium text-sm py-4">
              {label}
            </label>
          )}

          <div
            className={`border rounded-xl border-borderClr h-auto px-2 py-2 
        focus-within:ring-1 focus-within:ring-primary 
        ${errorMessage ? "ring-1 ring-red-500" : ""}`}
          >
            <input
              type="file"
              lang={requestLang}
              multiple={!!field?.name?.includes("additional_images")} // ✅ متعددة فقط للـ gallery
              onChange={(e) => field.onChange(e.target.files)}
              disabled={isDisabled}
              className="w-full text-sm text-primaryText file:mr-4 file:py-2 file:px-4
                   file:rounded-lg file:border-0
                   file:text-sm file:font-medium
                   file:bg-primary file:text-white
                   hover:file:bg-primary/80
                   focus:outline-none"
            />
          </div>
          {errorMessage && (
            <span className="text-xs mt-1 px-1 text-red-500" role="alert">
              {errorMessage}
            </span>
          )}
        </div>
      );

    default:
      return (
        <CustomInput
          field={field}
          fieldState={fieldState}
          type={type}
          label={label}
          placeholder={placeholder}
          variant={variant}
          size={size}
          disabled={isDisabled}
          className={className ?? ""}
        />
      );
  }
};

export default DynamicInput;