// app/components/admin/CommonComponents/FormField.tsx
'use client';

import React from 'react';

interface FormFieldProps {
  id: string;
  name: string;
  label: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  type?: 'text' | 'email' | 'password' | 'url' | 'number' | 'tel' | 'textarea';
  placeholder?: string;
  hint?: string;
  required?: boolean;
  disabled?: boolean;
  maxLength?: number;
  showCharCount?: boolean;
  rows?: number;
  min?: number;
  max?: number;
  step?: number;
  prefix?: string;
  className?: string;
}

export default function FormField({
  id,
  name,
  label,
  value,
  onChange,
  type = 'text',
  placeholder,
  hint,
  required = false,
  disabled = false,
  maxLength,
  showCharCount = false,
  rows = 3,
  min,
  max,
  step,
  prefix,
  className = '',
}: FormFieldProps) {
  const inputClasses = `w-full px-3 py-2 border border-var-border rounded-xl focus:ring-2 focus:ring-var-primary focus:border-var-primary bg-var-input text-var-text placeholder-var-text-muted transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed`;

  const renderNumberInputWithPrefix = () => {
    if (prefix && type === 'number') {
      return (
        <div className="relative">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <span className="text-var-text-muted">{prefix}</span>
          </div>
          <input
            type="number"
            id={id}
            name={name}
            value={value}
            onChange={onChange}
            placeholder={placeholder}
            required={required}
            disabled={disabled}
            maxLength={maxLength}
            min={min}
            max={max}
            step={step}
            className={`${inputClasses} ${prefix ? 'pl-8' : ''}`}
          />
        </div>
      );
    }
    return null;
  };

  const renderRegularInput = () => {
    if (type === 'textarea') {
      return (
        <textarea
          id={id}
          name={name}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          required={required}
          disabled={disabled}
          maxLength={maxLength}
          rows={rows}
          className={inputClasses}
        />
      );
    }

    if (type === 'number' && prefix) {
      return renderNumberInputWithPrefix();
    }

    return (
      <input
        type={type}
        id={id}
        name={name}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        required={required}
        disabled={disabled}
        maxLength={maxLength}
        min={min}
        max={max}
        step={step}
        className={inputClasses}
      />
    );
  };

  return (
    <div className={className}>
      <label htmlFor={id} className="block text-sm font-medium text-var-text mb-2">
        {label}
        {required && <span className="text-var-danger ml-1">*</span>}
      </label>

      {renderRegularInput()}

      {(hint || (showCharCount && maxLength)) && (
        <div className="flex justify-between mt-1">
          {hint && <p className="text-sm text-var-text-muted">{hint}</p>}
          {showCharCount && maxLength && (
            <span className={`text-sm ml-auto ${value.length >= maxLength ? 'text-var-danger' : 'text-var-text-muted'}`}>
              {value.length}/{maxLength}
            </span>
          )}
        </div>
      )}
    </div>
  );
}