// components/form/FormField.tsx
import { Input } from "@/shared/common/ui/input";
import { Label } from "@/shared/common/ui/label";
import { ComponentProps } from "react";
import { FormFeild } from "./FormFeild";
import { Textarea } from "@/shared/common/ui/textarea";
import { ImageIcon } from "lucide-react";
import { Button } from "@/shared/common/ui/button";
import { Controller } from "react-hook-form";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/common/ui/select";

type FormFieldProps = {
  idEn?: string;
  idAm?: string;
  label?: string;
  error?: string;
  register?: any;
  errors?: any;
  watch?: any;
  setValue?: any;
  containerClassName?: string;
  type?: string;
  control?: any;
  item?: any;
} & ComponentProps<typeof Input>;
export function FormInputBox({
  idAm,
  idEn,
  label,
  error,
  register,
  errors,
}: FormFieldProps) {
  return (
    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
        <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
        {label}
      </h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="space-y-2">
          <Label htmlFor="messageTitleAm" className="text-gray-700 dark:text-gray-300">
            {label} Amharic*
          </Label>
          <FormFeild
            id={idAm}
            {...register(idAm, { required: error })}
            error={errors.idAm?.message}
            placeholder="message title"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor={idEn} className="text-gray-700 dark:text-gray-300">
            {label} (English)*
          </Label>
          <FormFeild
            id={idEn}
            {...register(idEn, { required: error })}
            error={errors.idEn?.message}
            placeholder="Message Title"
          />
        </div>
      </div>
    </div>
  );
}
export function FormSingleBox({
  id,
  type,
  label,
  error,
  register,
  errors,
}: FormFieldProps) {
  return (
    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
        <div className="h-1 w-4 bg-purple-500 mr-2 rounded-full"></div>
        {label}
      </h3>
      <div className="space-y-2">
        <FormFeild
          id={id}
          type={type}
          {...register(id, { required: error })}
          placeholder={label}
        />
        {errors.link && (
          <p className="text-xs text-red-500 mt-1">{errors.id.message}</p>
        )}
      </div>
    </div>
  );
}

export function FormTextBox({
  idAm,
  idEn,
  label,
  error,
  register,
  errors,
}: FormFieldProps) {
  return (
    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
        <div className="h-1 w-4 bg-purple-500 mr-2 rounded-full"></div>
        {label}
      </h3>

      <div className="space-y-6">
        <div className="space-y-2">
          <Label htmlFor="messageContentAm" className="text-gray-700 dark:text-gray-300">
            {label}Amharic*
          </Label>
          <Textarea
            id={idAm}
            {...register(idAm, { required: error })}
            rows={4}
            placeholder="content"
            className="min-h-[120px] dark:bg-gray-600 dark:text-gray-200"
          />
          {errors.idAm && (
            <p className="text-xs text-red-500 mt-1">{errors.idAm.message}</p>
          )}
        </div>

        <div className="space-y-2">
          <Label htmlFor="messageContentEn" className="text-gray-700 dark:text-gray-300">
            {label}English*
          </Label>
          <Textarea
            id={idEn}
            {...register(idEn, { required: error })}
            rows={4}
            placeholder="content"
            className="min-h-[120px] dark:bg-gray-600 dark:text-gray-200"
          />
          {errors.idEn && (
            <p className="text-xs text-red-500 mt-1">{errors.idEn.message}</p>
          )}
        </div>
      </div>
    </div>
  );
}
export function FormToggle({ idAm, label, watch, setValue }: FormFieldProps) {
  const isActive = watch(idAm) ?? false;
  return (
    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
        <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
        {label}
      </h3>

      <div className="flex items-center justify-between">
        <Label htmlFor={idAm} className="text-gray-700 dark:text-gray-300 font-medium">
          Is Active
        </Label>

        <button
          type="button"
          onClick={() => setValue(idAm, !watch(idAm))}
          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
            isActive ? "bg-primary-500" : "bg-gray-300 dark:bg-gray-500"
          }`}
        >
          <span
            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
              isActive ? "translate-x-6" : "translate-x-1"
            }`}
          />
        </button>
      </div>
    </div>
  );
}
export const Section = ({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) => (
  <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
    <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
      <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
      {title}
    </h3>
    {children}
  </div>
);

const FormFieldWrapper = ({ children }: { children: React.ReactNode }) => (
  <div className="space-y-2">{children}</div>
);

const ErrorText = ({ children }: { children: React.ReactNode }) => (
  <p className="text-xs text-red-500 mt-1">{children}</p>
);

export const ImageUpload = ({
  label,
  preview,
  existingName,
  register,
  error,
  onView,
  id,
  isRequired = false, // <-- add a prop
}: {
  label: string;
  preview: string | null;
  existingName?: string;
  register: any;
  error?: string;
  onView: () => void;
  id: string;
  isRequired?: boolean;
}) => (
  <FormFieldWrapper>
    <Label className="text-gray-700 dark:text-gray-300 block mb-2">
      {label} {isRequired && "*"}
    </Label>

    {preview && (
      <div className="mb-3 flex items-center justify-between bg-primary-50 dark:bg-primary-900/30 p-3 rounded-lg">
        <div className="flex items-center">
          <ImageIcon className="h-5 w-5 text-primary-500 dark:text-primary-400 mr-2" />
          <span className="text-sm font-medium truncate max-w-[200px] dark:text-gray-200">
            {existingName || "Selected Image"}
          </span>
        </div>
        <Button
          type="button"
          variant="ghost"
          size="sm"
          onClick={onView}
          className="text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-300"
        >
          Preview
        </Button>
      </div>
    )}

    <div>
      <FormFeild
        id={id}
        type="file"
        accept="image/*"
        {...register}
        error={error}
      />
    </div>

    {error && <ErrorText>{error}</ErrorText>}
  </FormFieldWrapper>
);
export function FormColorPicker({
  idAm,
  label,
  error,
  register,
  errors,
  watch,
}: FormFieldProps) {
  const colorValue = watch?.(idAm) ?? "#000000";

  return (
    <div className="space-y-2">
      <Label htmlFor="color" className="text-gray-700 dark:text-gray-300">
        {label}*
      </Label>
      <div className="flex items-center gap-3">
        <input
          id={idAm}
          type="color"
          {...register(idAm, { required: error })}
          className="h-10 w-16 cursor-pointer border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700"
        />
        <span className="text-sm text-gray-600 dark:text-gray-400 font-mono">{colorValue}</span>
      </div>
      {errors.color && (
        <p className="text-xs text-red-500 mt-1">{errors.color.message}</p>
      )}
    </div>
  );
}
export function FormSelector({
  id,
  item,
  label,
  error,
  register,
  control,
  errors,
}: FormFieldProps) {
  return (
    <div className="bg-gray-50 dark:bg-gray-700 p-5 rounded-lg border border-gray-100 dark:border-gray-600">
      <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4 flex items-center">
        <div className="h-1 w-4 bg-primary-500 mr-2 rounded-full"></div>
        Select Type
      </h3>

      <div className="space-y-2">
        <Label htmlFor="id" className="text-gray-700 dark:text-gray-300 font-medium">
          {label}
        </Label>

        <Controller
          name={id || ""}
          control={control}
          rules={{ required: "message type is required" }}
          render={({ field }) => (
            <Select onValueChange={field.onChange} value={field.value}>
              <SelectTrigger className="w-full dark:bg-gray-600 dark:text-gray-200 dark:border-gray-500">
                <SelectValue placeholder="Select type" />
              </SelectTrigger>
              <SelectContent className="dark:bg-gray-700 dark:border-gray-600">
                {item.map((item: any) => (
                  <SelectItem key={item.value} value={item.value} className="dark:text-gray-200 dark:hover:bg-gray-600">
                    {item.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
        />

        {errors.type && (
          <p className="text-xs text-red-500 mt-1">
            {errors.type.message as string}
          </p>
        )}
      </div>
    </div>
  );
}
