"use client";

import type { SectorFieldDefinition } from "@/lib/config/sector-custom-fields";

interface SectorFieldsFormProps {
  fields: SectorFieldDefinition[];
  values: Record<string, unknown>;
  onChange: (key: string, value: unknown) => void;
  lang: string;
  errors?: Record<string, string>;
}

const inputClasses =
  "w-full h-12 px-4 rounded-xl border-2 border-slate-200 bg-slate-50/50 text-base placeholder-slate-400 transition-all duration-200 focus:border-brand-green focus:ring-4 focus:ring-brand-green/20 focus:outline-none";

const errorInputClasses =
  "w-full h-12 px-4 rounded-xl border-2 border-red-300 bg-red-50/50 text-base placeholder-slate-400 transition-all duration-200 focus:border-red-400 focus:ring-4 focus:ring-red-100 focus:outline-none";

function renderField(
  field: SectorFieldDefinition,
  value: unknown,
  onChange: (v: unknown) => void,
  placeholder: string | undefined,
  isRtl: boolean,
  hasError: boolean,
) {
  const baseClass = hasError ? errorInputClasses : inputClasses;

  switch (field.type) {
    case "text":
      return (
        <input
          type="text"
          value={(value as string) ?? ""}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          className={baseClass}
          dir={isRtl ? "rtl" : "ltr"}
        />
      );
    case "number":
      return (
        <input
          type="number"
          value={(value as string | number) ?? ""}
          onChange={(e) =>
            onChange(e.target.value ? Number(e.target.value) : "")
          }
          placeholder={placeholder}
          className={baseClass}
          dir="ltr"
        />
      );
    case "date":
      return (
        <input
          type="date"
          value={(value as string) ?? ""}
          onChange={(e) => onChange(e.target.value)}
          className={baseClass}
          dir="ltr"
        />
      );
    case "textarea":
      return (
        <textarea
          value={(value as string) ?? ""}
          onChange={(e) => onChange(e.target.value)}
          placeholder={placeholder}
          rows={3}
          className={`${hasError ? "border-red-300 bg-red-50/50 focus:border-red-400 focus:ring-red-100" : "border-slate-200 bg-slate-50/50 focus:border-brand-green focus:ring-brand-green/20"} w-full px-4 py-3 rounded-xl border-2 text-base placeholder-slate-400 transition-all duration-200 focus:ring-4 focus:outline-none resize-none`}
          dir={isRtl ? "rtl" : "ltr"}
        />
      );
    case "select":
      return (
        <div className="relative">
          <select
            value={(value as string) ?? ""}
            onChange={(e) => onChange(e.target.value)}
            className={baseClass}
          >
            <option value="">
              {placeholder ?? (isRtl ? "اختر..." : "Select...")}
            </option>
            {field.options?.map((opt) => (
              <option key={opt.value} value={opt.value}>
                {isRtl ? opt.labelAr : opt.labelEn}
              </option>
            ))}
          </select>
        </div>
      );
    default:
      return null;
  }
}

export function SectorFieldsForm({
  fields,
  values,
  onChange,
  lang,
  errors,
}: SectorFieldsFormProps) {
  if (!fields.length) return null;
  const isRtl = lang === "ar";

  return (
    <div
      className={`space-y-4 ${isRtl ? "text-right" : "text-left"}`}
      dir={isRtl ? "rtl" : "ltr"}
    >
      {fields.map((field) => {
        const label = isRtl ? field.labelAr : field.labelEn;
        const placeholder = isRtl ? field.placeholderAr : field.placeholderEn;
        const error = errors?.[field.key];

        return (
          <div key={field.key} className="space-y-1">
            <label className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-2">
              {label}
              {field.required && <span className="text-red-500">*</span>}
            </label>
            {renderField(
              field,
              values[field.key],
              (v) => onChange(field.key, v),
              placeholder,
              isRtl,
              !!error,
            )}
            {error && (
              <p className="text-sm text-red-500 flex items-center gap-1">
                <span className="w-1 h-1 rounded-full bg-red-500" />
                {error}
              </p>
            )}
          </div>
        );
      })}
    </div>
  );
}