import React, { useState } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Eye, EyeOff, Save, RotateCcw, AlertTriangle } from 'lucide-react';
import { Input } from './Input';
import { Switch } from './Switch';
import { Button } from './Button';
import { TabsRoot, TabsList, TabsTrigger, TabsContent } from './Tabs';

export interface FormField {
  key: string;
  label: string;
  type: 'text' | 'password' | 'number' | 'switch' | 'select';
  placeholder?: string;
  description?: string;
  options?: { value: string; label: string }[];
  validation?: {
    required?: boolean;
    min?: number;
    max?: number;
    pattern?: string;
  };
}

export interface FormSection {
  key: string;
  title: string;
  description?: string;
  fields: FormField[];
}

export interface DynamicFormSchema {
  sections: FormSection[];
}

export interface SettingContribution {
  key: string;
  label: string;
  type: 'text' | 'number' | 'password' | 'select' | 'switch';
  default: any;
  scope: 'tenant' | 'workspace' | 'system';
  description?: string;
  options?: Array<{ value: string; label: string }>;
  validation?: {
    required?: boolean;
    min?: number;
    max?: number;
    pattern?: string;
  };
}

export interface SettingsSection {
  id: string;
  title: string;
  description?: string;
  contributions: SettingContribution[];
}

export interface DynamicFormProps {
  schema?: DynamicFormSchema;
  sections?: SettingsSection[];
  initialData: Record<string, any>;
  onSubmit: (data: Record<string, any>) => void | Promise<void>;
  onReset?: () => void;
  isLoading?: boolean;
  className?: string;
}

export const DynamicForm: React.FC<DynamicFormProps> = ({
  schema,
  sections,
  initialData,
  onSubmit,
  onReset,
  isLoading = false,
  className = '',
}) => {
  // Normalizar sections y schema a un formato común de secciones para renderizado
  const normalizedSections: FormSection[] = React.useMemo(() => {
    if (sections) {
      return sections.map((sec) => ({
        key: sec.id,
        title: sec.title,
        description: sec.description,
        fields: sec.contributions.map((c) => ({
          key: c.key,
          label: c.label,
          type: c.type === 'switch' ? 'switch' : c.type,
          description: c.description,
          options: c.options,
          validation: c.validation,
        })),
      }));
    }
    return schema?.sections || [];
  }, [sections, schema]);

  const [formData, setFormData] = useState<Record<string, any>>(() => {
    const data: Record<string, any> = {};
    normalizedSections.forEach((sec) => {
      sec.fields.forEach((field) => {
        data[field.key] = initialData[field.key] !== undefined ? initialData[field.key] : '';
      });
    });
    return data;
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [visiblePasswords, setVisiblePasswords] = useState<Record<string, boolean>>({});
  const [activeTab, setActiveTab] = useState(() => normalizedSections[0]?.key || '');

  // Sincronizar datos iniciales cuando cambien externamente (Reactividad y Carga)
  React.useEffect(() => {
    const data: Record<string, any> = {};
    normalizedSections.forEach((sec) => {
      sec.fields.forEach((field) => {
        data[field.key] = initialData[field.key] !== undefined ? initialData[field.key] : '';
      });
    });
    setFormData(data);
  }, [initialData, normalizedSections]);

  // Si cambia la pestaña activa por defecto al cargar las secciones
  React.useEffect(() => {
    if (normalizedSections.length > 0 && !activeTab) {
      setActiveTab(normalizedSections[0].key);
    }
  }, [normalizedSections, activeTab]);

  const handleFieldChange = (key: string, value: any) => {
    setFormData((prev) => ({ ...prev, [key]: value }));
    // Limpiar error al modificar el campo
    if (errors[key]) {
      setErrors((prev) => {
        const next = { ...prev };
        delete next[key];
        return next;
      });
    }
  };

  const togglePasswordVisibility = (key: string) => {
    setVisiblePasswords((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const validateForm = (): boolean => {
    const nextErrors: Record<string, string> = {};

    normalizedSections.forEach((sec) => {
      sec.fields.forEach((field) => {
        const val = formData[field.key];
        const validation = field.validation;

        if (validation?.required) {
          if (val === undefined || val === null || val === '') {
            nextErrors[field.key] = `El campo ${field.label} es obligatorio`;
          }
        }

        if (val !== undefined && val !== null && val !== '') {
          if (field.type === 'number' && validation?.min !== undefined && Number(val) < validation.min) {
            nextErrors[field.key] = `El valor mínimo es ${validation.min}`;
          }
          if (field.type === 'number' && validation?.max !== undefined && Number(val) > validation.max) {
            nextErrors[field.key] = `El valor máximo es ${validation.max}`;
          }
          if (validation?.pattern) {
            const regex = new RegExp(validation.pattern);
            if (!regex.test(String(val))) {
              nextErrors[field.key] = `El formato del campo ${field.label} no es válido`;
            }
          }
        }
      });
    });

    setErrors(nextErrors);
    return Object.keys(nextErrors).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (validateForm()) {
      await onSubmit(formData);
    } else {
      // Buscar primera sección con errores y enfocarla
      const firstErrorKey = Object.keys(errors)[0];
      if (firstErrorKey) {
        const errorSection = normalizedSections.find((sec) =>
          sec.fields.some((f) => f.key === firstErrorKey)
        );
        if (errorSection && errorSection.key !== activeTab) {
          setActiveTab(errorSection.key);
        }
      }
    }
  };

  const handleReset = () => {
    if (onReset) {
      onReset();
    } else {
      const data: Record<string, any> = {};
      normalizedSections.forEach((sec) => {
        sec.fields.forEach((field) => {
          data[field.key] = initialData[field.key] !== undefined ? initialData[field.key] : '';
        });
      });
      setFormData(data);
      setErrors({});
    }
  };

  return (
    <form onSubmit={handleSubmit} className={`flex flex-col gap-6 w-full ${className}`}>
      {normalizedSections.length > 1 && (
        <TabsRoot value={activeTab} onValueChange={setActiveTab} className="w-full">
          <TabsList className="flex flex-wrap h-auto gap-1.5 p-1.5 bg-surface-secondary/40 backdrop-blur-md border border-border/20 rounded-2xl mb-2">
            {normalizedSections.map((sec) => {
              const hasSectionError = sec.fields.some((f) => !!errors[f.key]);
              return (
                <TabsTrigger
                  key={sec.key}
                  value={sec.key}
                  className={`
                    px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-xl transition-all duration-300 flex items-center gap-1.5
                    data-[state=active]:bg-primary data-[state=active]:text-text-inverse
                    data-[state=inactive]:text-text-muted hover:data-[state=inactive]:text-text hover:data-[state=inactive]:bg-surface/30
                  `}
                >
                  {sec.title}
                  {hasSectionError && (
                    <span className="flex h-2 w-2 rounded-full bg-error animate-pulse" />
                  )}
                </TabsTrigger>
              );
            })}
          </TabsList>

          <AnimatePresence mode="wait">
            {normalizedSections.map((sec) => {
              if (sec.key !== activeTab) return null;
              return (
                <TabsContent key={sec.key} value={sec.key} className="mt-0 outline-none">
                  <motion.div
                    initial={{ opacity: 0, y: 15 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -15 }}
                    transition={{ duration: 0.25, ease: 'easeInOut' }}
                    className="flex flex-col gap-6 p-6 backdrop-blur-lg bg-surface/30 border border-border/20 rounded-3xl"
                  >
                    {sec.description && (
                      <div className="flex flex-col gap-1 border-b border-border/10 pb-4 mb-2">
                        <h3 className="text-sm font-extrabold text-text uppercase tracking-wider">
                          {sec.title}
                        </h3>
                        <p className="text-xs text-text-muted">
                          {sec.description}
                        </p>
                      </div>
                    )}

                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      {sec.fields.map((field) => {
                        const error = errors[field.key];
                        const val = formData[field.key];

                        if (field.type === 'switch') {
                          return (
                            <div
                              key={field.key}
                              className="flex items-center justify-between gap-6 p-4 rounded-2xl bg-surface/20 border border-border/15 hover:border-border/30 transition-all duration-300"
                            >
                              <div className="flex flex-col gap-0.5 max-w-[70%]">
                                <label className="text-xs font-bold text-text uppercase tracking-wide">
                                  {field.label}
                                </label>
                                {field.description && (
                                  <span className="text-[10px] text-text-muted leading-relaxed">
                                    {field.description}
                                  </span>
                                )}
                              </div>
                              <Switch
                                checked={!!val}
                                onCheckedChange={(checked) => handleFieldChange(field.key, checked)}
                              />
                            </div>
                          );
                        }

                        if (field.type === 'select') {
                          return (
                            <div key={field.key} className="flex flex-col gap-1.5 w-full">
                              <label className="text-xs font-bold tracking-wide text-text-muted uppercase">
                                {field.label}
                              </label>
                              <select
                                value={val || ''}
                                onChange={(e) => handleFieldChange(field.key, e.target.value)}
                                className={`
                                  w-full bg-surface/50 border backdrop-blur-md rounded-xl px-4 py-2.5 
                                  text-sm text-text placeholder-text-muted/50 outline-none
                                  transition-all duration-300 appearance-none
                                  ${error 
                                    ? 'border-error/50 focus:border-error focus:ring-2 focus:ring-error/20 bg-error/5' 
                                    : 'border-border/50 focus:border-primary focus:ring-2 focus:ring-primary/20 hover:border-border hover:bg-surface'
                                  }
                                `}
                              >
                                <option value="" disabled className="bg-surface text-text-muted">
                                  Selecciona una opción...
                                </option>
                                {field.options?.map((opt) => (
                                  <option key={opt.value} value={opt.value} className="bg-surface text-text">
                                    {opt.label}
                                  </option>
                                ))}
                              </select>
                              {field.description && !error && (
                                <span className="text-[10px] text-text-muted px-1">
                                  {field.description}
                                </span>
                              )}
                              {error && (
                                <motion.p
                                  initial={{ opacity: 0, y: -5 }}
                                  animate={{ opacity: 1, y: 0 }}
                                  className="text-xs font-medium text-error flex items-center gap-1 mt-1"
                                >
                                  <AlertTriangle className="h-3.5 w-3.5" />
                                  {error}
                                </motion.p>
                              )}
                            </div>
                          );
                        }

                        // Text, Password, Number
                        const isPassword = field.type === 'password';
                        const isVisible = !!visiblePasswords[field.key];
                        return (
                          <div key={field.key} className="relative flex flex-col w-full">
                            <Input
                              label={field.label}
                              type={isPassword ? (isVisible ? 'text' : 'password') : field.type}
                              placeholder={field.placeholder}
                              value={val}
                              onChange={(e) => handleFieldChange(field.key, e.target.value)}
                              error={error}
                              icon={
                                isPassword ? (
                                  <button
                                    type="button"
                                    onClick={() => togglePasswordVisibility(field.key)}
                                    className="absolute right-3.5 top-1/2 -translate-y-1/2 text-text-muted hover:text-text focus:outline-none transition-colors duration-300"
                                  >
                                    {isVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                                  </button>
                                ) : undefined
                              }
                            />
                            {field.description && !error && (
                              <span className="text-[10px] text-text-muted px-1 mt-1 leading-relaxed">
                                {field.description}
                              </span>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  </motion.div>
                </TabsContent>
              );
            })}
          </AnimatePresence>
        </TabsRoot>
      )}

      {/* Si solo hay una sección y no es necesario usar Tabs */}
      {normalizedSections.length === 1 && (
        <div className="flex flex-col gap-6 p-6 backdrop-blur-lg bg-surface/30 border border-border/20 rounded-3xl">
          {normalizedSections[0].description && (
            <div className="flex flex-col gap-1 border-b border-border/10 pb-4 mb-2">
              <h3 className="text-sm font-extrabold text-text uppercase tracking-wider">
                {normalizedSections[0].title}
              </h3>
              <p className="text-xs text-text-muted">
                {normalizedSections[0].description}
              </p>
            </div>
          )}

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {normalizedSections[0].fields.map((field) => {
              const error = errors[field.key];
              const val = formData[field.key];

              if (field.type === 'switch') {
                return (
                  <div
                    key={field.key}
                    className="flex items-center justify-between gap-6 p-4 rounded-2xl bg-surface/20 border border-border/15 hover:border-border/30 transition-all duration-300"
                  >
                    <div className="flex flex-col gap-0.5 max-w-[70%]">
                      <label className="text-xs font-bold text-text uppercase tracking-wide">
                        {field.label}
                      </label>
                      {field.description && (
                        <span className="text-[10px] text-text-muted leading-relaxed">
                          {field.description}
                        </span>
                      )}
                    </div>
                    <Switch
                      checked={!!val}
                      onCheckedChange={(checked) => handleFieldChange(field.key, checked)}
                    />
                  </div>
                );
              }

              if (field.type === 'select') {
                return (
                  <div key={field.key} className="flex flex-col gap-1.5 w-full">
                    <label className="text-xs font-bold tracking-wide text-text-muted uppercase">
                      {field.label}
                    </label>
                    <select
                      value={val || ''}
                      onChange={(e) => handleFieldChange(field.key, e.target.value)}
                      className={`
                        w-full bg-surface/50 border backdrop-blur-md rounded-xl px-4 py-2.5 
                        text-sm text-text placeholder-text-muted/50 outline-none
                        transition-all duration-300 appearance-none
                        ${error 
                          ? 'border-error/50 focus:border-error focus:ring-2 focus:ring-error/20 bg-error/5' 
                          : 'border-border/50 focus:border-primary focus:ring-2 focus:ring-primary/20 hover:border-border hover:bg-surface'
                        }
                      `}
                    >
                      <option value="" disabled className="bg-surface text-text-muted">
                        Selecciona una opción...
                      </option>
                      {field.options?.map((opt) => (
                        <option key={opt.value} value={opt.value} className="bg-surface text-text">
                          {opt.label}
                        </option>
                      ))}
                    </select>
                    {field.description && !error && (
                      <span className="text-[10px] text-text-muted px-1">
                        {field.description}
                      </span>
                    )}
                    {error && (
                      <motion.p
                        initial={{ opacity: 0, y: -5 }}
                        animate={{ opacity: 1, y: 0 }}
                        className="text-xs font-medium text-error flex items-center gap-1 mt-1"
                      >
                        <AlertTriangle className="h-3.5 w-3.5" />
                        {error}
                      </motion.p>
                    )}
                  </div>
                );
              }

              const isPassword = field.type === 'password';
              const isVisible = !!visiblePasswords[field.key];
              return (
                <div key={field.key} className="relative flex flex-col w-full">
                  <Input
                    label={field.label}
                    type={isPassword ? (isVisible ? 'text' : 'password') : field.type}
                    placeholder={field.placeholder}
                    value={val}
                    onChange={(e) => handleFieldChange(field.key, e.target.value)}
                    error={error}
                    icon={
                      isPassword ? (
                        <button
                          type="button"
                          onClick={() => togglePasswordVisibility(field.key)}
                          className="absolute right-3.5 top-1/2 -translate-y-1/2 text-text-muted hover:text-text focus:outline-none transition-colors duration-300"
                        >
                          {isVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                        </button>
                      ) : undefined
                    }
                  />
                  {field.description && !error && (
                    <span className="text-[10px] text-text-muted px-1 mt-1 leading-relaxed">
                      {field.description}
                    </span>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Botones de Acción */}
      <div className="flex items-center justify-end gap-3 p-4 backdrop-blur-md bg-surface-secondary/20 border border-border/10 rounded-2xl">
        <Button
          type="button"
          onClick={handleReset}
          disabled={isLoading}
          variant="secondary"
          className="flex items-center gap-2 px-5 py-2.5 rounded-xl border border-border/20 text-xs font-extrabold uppercase tracking-wider"
        >
          <RotateCcw className="h-3.5 w-3.5" />
          Restablecer
        </Button>
        <Button
          type="submit"
          disabled={isLoading}
          className="flex items-center gap-2 px-6 py-2.5 rounded-xl text-xs font-extrabold uppercase tracking-wider shadow-lg bg-primary hover:bg-primary/95 transition-all duration-300"
        >
          <Save className="h-3.5 w-3.5" />
          {isLoading ? 'Guardando...' : 'Guardar Configuración'}
        </Button>
      </div>
    </form>
  );
};