import React from 'react';
import type { FormField } from '@/types/base';
import i18n from "@/lib/i18n";

interface BaseFormProps {
  fields: FormField[];
  values: Record<string, unknown>;
  errors: Record<string, string>;
  isLoading: boolean;
  onFieldChange: (name: string, value: unknown) => void;
  onSubmit: (e: React.FormEvent) => void;
  submitLabel?: string;
  children?: React.ReactNode;
}

export function BaseForm({
  fields,
  values,
  errors,
  isLoading,
  onFieldChange,
  onSubmit,
  submitLabel = i18n.t('components.ui.BaseForm.text_1'),
  children,
}: BaseFormProps) {
  const renderField = (field: FormField) => {
    const value = values[field.name] || '';
    const error = errors[field.name];

    switch (field.type) {
      case 'textarea':
        return (
          <div key={field.name} className="mb-4">
            <label htmlFor={field.name} className="block text-sm font-medium text-foreground mb-1.5">
              {field.label} {field.required && <span className="text-destructive">*</span>}
            </label>
            <textarea
              id={field.name}
              name={field.name}
              value={value as string}
              onChange={(e) => onFieldChange(field.name, e.target.value)}
              placeholder={field.placeholder}
              required={field.required}
              className={`w-full px-3 py-2.5 text-sm border rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary ${
                error ? 'border-destructive' : 'border-border'
              }`}
              rows={4}
            />
            {error && <p className="text-destructive text-xs mt-1">{error}</p>}
          </div>
        );

      case 'select':
        return (
          <div key={field.name} className="mb-4">
            <label htmlFor={field.name} className="block text-sm font-medium text-foreground mb-1.5">
              {field.label} {field.required && <span className="text-destructive">*</span>}
            </label>
            <select
              id={field.name}
              name={field.name}
              value={value as string}
              onChange={(e) => onFieldChange(field.name, e.target.value)}
              required={field.required}
              className={`w-full px-3 py-2.5 text-sm border rounded-lg bg-background text-foreground cursor-pointer focus:outline-none focus:ring-2 focus:ring-primary ${
                error ? 'border-destructive' : 'border-border'
              }`}
            >
              <option value="">{i18n.t('components.ui.BaseForm.text_3')}{field.label}</option>
              {field.options?.map((option) => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
            {error && <p className="text-destructive text-xs mt-1">{error}</p>}
          </div>
        );

      case 'file':
        return (
          <div key={field.name} className="mb-4">
            <label htmlFor={field.name} className="block text-sm font-medium text-foreground mb-1.5">
              {field.label} {field.required && <span className="text-destructive">*</span>}
            </label>
            <input
              id={field.name}
              name={field.name}
              type="file"
              onChange={(e) => onFieldChange(field.name, e.target.files?.[0] || null)}
              accept={field.accept}
              required={field.required}
              className={`w-full px-3 py-2.5 text-sm border rounded-lg bg-background text-foreground file:mr-4 file:py-1 file:px-3 file:rounded file:border-0 file:text-sm file:font-medium file:bg-primary file:text-primary-foreground hover:file:bg-primary/90 ${
                error ? 'border-destructive' : 'border-border'
              }`}
            />
            {error && <p className="text-destructive text-xs mt-1">{error}</p>}
          </div>
        );

      default:
        return (
          <div key={field.name} className="mb-4">
            <label htmlFor={field.name} className="block text-sm font-medium text-foreground mb-1.5">
              {field.label} {field.required && <span className="text-destructive">*</span>}
            </label>
            <input
              id={field.name}
              name={field.name}
              type={field.type}
              value={value as string}
              onChange={(e) => onFieldChange(field.name, e.target.value)}
              placeholder={field.placeholder}
              required={field.required}
              className={`w-full px-3 py-2.5 text-sm border rounded-lg bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary ${
                error ? 'border-destructive' : 'border-border'
              }`}
            />
            {error && <p className="text-destructive text-xs mt-1">{error}</p>}
          </div>
        );
    }
  };

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      {fields.map(renderField)}
      {children}
      <div className="flex justify-end gap-4 pt-2">
        <button
          type="submit"
          disabled={isLoading}
          className={`bg-primary text-primary-foreground px-5 py-2.5 rounded-lg text-sm font-semibold hover:bg-primary/90 transition-colors ${
            isLoading ? 'opacity-50 cursor-not-allowed' : ''
          }`}
        >
          {isLoading ? i18n.t('components.ui.BaseForm.text_2') : submitLabel}
        </button>
      </div>
    </form>
  );
}