'use client';

import React, { useState } from 'react';
import PhoneInput from 'react-phone-input-2';
import 'react-phone-input-2/lib/style.css';
import { Eye, EyeOff } from 'lucide-react';

interface FormFieldProps {
  label?: string;
  name: string;
  type?: 'text' | 'textarea' | 'email' | 'number' | 'password' | 'checkbox' | 'phone';
  placeholder?: string;
  value?: string | boolean;
  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onPhoneChange?: (value: string) => void; // ✅ For phone number input
  className?: string;
  labelClassName?: string;
  required?: boolean;
  showTogglePassword?: boolean;
  checkboxLabel?: string;
  phoneCountry?: string; // ✅ For customizing phone input default country
}

const FormField: React.FC<FormFieldProps> = ({
  label,
  name,
  type = 'text',
  placeholder = '',
  value,
  onChange,
  onPhoneChange,
  className = '',
  labelClassName = 'text-neutrals800 dark:text-neutrals400',
  required = false,
  showTogglePassword = true,
  checkboxLabel,
  phoneCountry = 'sa',
}) => {
  const [showPassword, setShowPassword] = useState(false);
  const baseInputClass =
    'w-full px-2 py-3 pe-9 rounded-lg text-sm placeholder:text-neutrals400 border border-neutrals100 bg-white text-neutrals800 leading-5 outline-none focus:border-primary500 dark:bg-card dark:focus:border-primary400 dark:border-darkborder dark:text-neutrals400';

  const isPassword = type === 'password';

  if (type === 'checkbox') {
    return (
      <div className={className}>
        <div className="flex items-center gap-2">
          <div className="relative flex items-center justify-center">
            <input
              type="checkbox"
              id={name}
              name={name}
              onChange={onChange}
              className="hidden peer"
            />
            <label htmlFor={name} className="w-5 h-5 inline-flex items-center justify-center rounded-md border border-[#d3dce6] peer-checked:bg-primary500 peer-checked:border-primary500 peer-checked:text-white"
            />
            <svg
              className="absolute -translate-x-1/2 left-1/2 top-1/2 -translate-y-1/2 hidden peer-checked:block"
              width="12"
              height="11"
              viewBox="0 0 12 11"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M11.0611 0.922381C11.5183 1.23229 11.6376 1.85411 11.3277 2.31124L6.24316 9.81124C6.07711 10.0562 5.8111 10.215 5.51671 10.245C5.22232 10.2749 4.92977 10.173 4.71777 9.96652L0.802337 6.15362C0.406666 5.76831 0.398266 5.1352 0.783575 4.73953C1.16888 4.34386 1.80199 4.33546 2.19766 4.72077L5.25771 7.70068L9.67228 1.18895C9.98219 0.731819 10.604 0.61247 11.0611 0.922381Z"
                fill="white"
              />
            </svg>
          </div>
          <label htmlFor={name} className="cursor-pointer text-sm text-neutrals800">
            {checkboxLabel}
          </label>
        </div>
      </div>
    );
  }

  return (
    <div className={className}>
      {label && (
        <label htmlFor={name} className={`block text-sm font-medium mb-1 ${labelClassName}`}>
          {label}
        </label>
      )}

      {type === 'textarea' ? (
        <textarea
          id={name}
          name={name}
          placeholder={placeholder}
          value={value as string}
          onChange={onChange}
          required={required}
          className="w-full min-h-20 text-sm placeholder:text-neutrals400 border border-neutrals100 rounded-lg px-2 py-2 focus:outline-none focus:border-primary500"
        />
      ) : isPassword && showTogglePassword ? (
        <div className="relative">
          <input
            id={name}
            name={name}
            type={showPassword ? 'text' : 'password'}
            placeholder={placeholder}
            value={value as string}
            onChange={onChange}
            required={required}
            className={baseInputClass}
          />
          <button
            type="button"
            onClick={() => setShowPassword((prev) => !prev)}
            className="absolute right-2 top-1/2 -translate-y-1/2 text-neutrals500 hover:text-neutrals700"
          >
            {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
          </button>
        </div>
      ) : type === 'phone' ? (
        <PhoneInput
          country={phoneCountry}
          value={value as string}
          onChange={onPhoneChange}
          inputClass="!w-full !pl-14 !pr-4 !py-3 !text-base !text-gray-500 !rounded-lg !border-none"
          buttonClass="!border-none !bg-transparent !absolute !left-2 !top-1/2 !transform -translate-y-1/2"
          containerClass="relative w-full rounded-lg bg-white text-neutrals400 leading-5 px-2 py-1 pe-9 !border !border-neutrals100 focus:!outline-none focus:!border-primary500"
          enableSearch
        />
      ) : (
        <input
          id={name}
          name={name}
          type={type}
          placeholder={placeholder}
          value={value as string}
          onChange={onChange}
          required={required}
          className={baseInputClass}
        />
      )}
    </div>
  );
};

export default FormField;