import React from 'react';
import { motion } from 'motion/react';
import { useSetting } from './settingsRegistry';
import { Switch } from './Switch';
import { Input } from './Input';
import { Eye, EyeOff } from 'lucide-react';

export interface SettingsSwitchProps {
  settingKey: string;
  label: string;
  description?: string;
  defaultValue?: boolean;
  className?: string;
}

/**
 * SettingsSwitch — Un interruptor (switch) auto-enlazado y reactivo en caliente.
 * Se conecta de forma transparente a una única clave del Cascade Settings Engine.
 */
export const SettingsSwitch: React.FC<SettingsSwitchProps> = ({
  settingKey,
  label,
  description,
  defaultValue = false,
  className = ''
}) => {
  const [checked, setChecked, { isSaving }] = useSetting<boolean>(settingKey, defaultValue);

  return (
    <motion.div
      initial={{ opacity: 0, y: 5 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className={`flex items-center justify-between gap-6 p-4 rounded-2xl bg-surface/20 border border-border/15 hover:border-border/30 hover:bg-surface/30 transition-all duration-300 backdrop-blur-md ${className}`}
    >
      <div className="flex flex-col gap-1 max-w-[70%]">
        <label className="text-xs font-bold text-text uppercase tracking-wide flex items-center gap-2">
          {label}
          {isSaving && (
            <span className="text-[9px] lowercase font-normal text-text-muted px-1.5 py-0.5 rounded bg-primary/10 text-primary border border-primary/20 animate-pulse">
              guardando...
            </span>
          )}
        </label>
        {description && (
          <span className="text-[10px] text-text-muted leading-relaxed">
            {description}
          </span>
        )}
      </div>
      <Switch
        checked={!!checked}
        onCheckedChange={(checkedValue) => setChecked(checkedValue)}
        disabled={isSaving}
      />
    </motion.div>
  );
};

export interface SettingsSelectProps {
  settingKey: string;
  label: string;
  description?: string;
  options: { value: string; label: string }[];
  defaultValue?: string;
  className?: string;
}

/**
 * SettingsSelect — Un menú selector auto-enlazado y reactivo en caliente.
 */
export const SettingsSelect: React.FC<SettingsSelectProps> = ({
  settingKey,
  label,
  description,
  options,
  defaultValue = '',
  className = ''
}) => {
  const [value, setValue, { isSaving }] = useSetting<string>(settingKey, defaultValue);

  return (
    <motion.div
      initial={{ opacity: 0, y: 5 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className={`flex flex-col gap-1.5 w-full p-4 rounded-2xl bg-surface/20 border border-border/15 hover:border-border/30 hover:bg-surface/30 transition-all duration-300 backdrop-blur-md ${className}`}
    >
      <label className="text-xs font-bold tracking-wide text-text-muted uppercase flex items-center gap-2">
        {label}
        {isSaving && (
          <span className="text-[9px] lowercase font-normal text-text-muted px-1.5 py-0.5 rounded bg-primary/10 text-primary border border-primary/20 animate-pulse">
            guardando...
          </span>
        )}
      </label>
      <div className="relative">
        <select
          value={value || ''}
          onChange={(e) => setValue(e.target.value)}
          disabled={isSaving}
          className="w-full bg-surface/50 border border-border/50 focus:border-primary focus:ring-2 focus:ring-primary/20 hover:border-border hover:bg-surface 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 disabled:opacity-50"
        >
          {options.map((opt) => (
            <option key={opt.value} value={opt.value} className="bg-surface text-text">
              {opt.label}
            </option>
          ))}
        </select>
        <span className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-text-muted text-xs">▼</span>
      </div>
      {description && (
        <span className="text-[10px] text-text-muted leading-relaxed px-1 mt-0.5">
          {description}
        </span>
      )}
    </motion.div>
  );
};

export interface SettingsTextProps {
  settingKey: string;
  label: string;
  description?: string;
  placeholder?: string;
  defaultValue?: string;
  className?: string;
}

/**
 * SettingsText — Entrada de texto auto-enlazada. Persiste de forma optimista
 * al perder el foco (onBlur) o al pulsar Enter para no sobrecargar el bus IPC.
 */
export const SettingsText: React.FC<SettingsTextProps> = ({
  settingKey,
  label,
  description,
  placeholder,
  defaultValue = '',
  className = ''
}) => {
  const [value, setValue, { isSaving }] = useSetting<string>(settingKey, defaultValue);
  const [localVal, setLocalVal] = React.useState(value || '');

  React.useEffect(() => {
    setLocalVal(value || '');
  }, [value]);

  const handleSave = () => {
    if (localVal !== value) {
      setValue(localVal);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 5 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className={`relative flex flex-col w-full p-4 rounded-2xl bg-surface/20 border border-border/15 hover:border-border/30 hover:bg-surface/30 transition-all duration-300 backdrop-blur-md ${className}`}
    >
      <div className="relative flex flex-col w-full">
        <Input
          label={label}
          placeholder={placeholder}
          value={localVal}
          onChange={(e) => setLocalVal(e.target.value)}
          onBlur={handleSave}
          onKeyDown={(e) => e.key === 'Enter' && handleSave()}
          disabled={isSaving}
          className="bg-surface/50"
        />
        {isSaving && (
          <span className="absolute right-3 top-1 text-[9px] lowercase font-normal text-text-muted px-1.5 py-0.5 rounded bg-primary/10 text-primary border border-primary/20 animate-pulse">
            guardando...
          </span>
        )}
      </div>
      {description && (
        <span className="text-[10px] text-text-muted px-1 mt-1 leading-relaxed">
          {description}
        </span>
      )}
    </motion.div>
  );
};

/**
 * SettingsPassword — Entrada de contraseña enmascarada auto-enlazada.
 */
export const SettingsPassword: React.FC<SettingsTextProps> = ({
  settingKey,
  label,
  description,
  placeholder,
  defaultValue = '',
  className = ''
}) => {
  const [value, setValue, { isSaving }] = useSetting<string>(settingKey, defaultValue);
  const [localVal, setLocalVal] = React.useState(value || '');
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    setLocalVal(value || '');
  }, [value]);

  const handleSave = () => {
    if (localVal !== value) {
      setValue(localVal);
    }
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 5 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className={`relative flex flex-col w-full p-4 rounded-2xl bg-surface/20 border border-border/15 hover:border-border/30 hover:bg-surface/30 transition-all duration-300 backdrop-blur-md ${className}`}
    >
      <div className="relative flex flex-col w-full">
        <Input
          label={label}
          type={visible ? 'text' : 'password'}
          placeholder={placeholder}
          value={localVal}
          onChange={(e) => setLocalVal(e.target.value)}
          onBlur={handleSave}
          onKeyDown={(e) => e.key === 'Enter' && handleSave()}
          disabled={isSaving}
          className="bg-surface/50"
          icon={
            <button
              type="button"
              onClick={() => setVisible(!visible)}
              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"
            >
              {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </button>
          }
        />
        {isSaving && (
          <span className="absolute right-3 top-1 text-[9px] lowercase font-normal text-text-muted px-1.5 py-0.5 rounded bg-primary/10 text-primary border border-primary/20 animate-pulse">
            guardando...
          </span>
        )}
      </div>
      {description && (
        <span className="text-[10px] text-text-muted px-1 mt-1 leading-relaxed">
          {description}
        </span>
      )}
    </motion.div>
  );
};

export interface SettingsGroupProps {
  title: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
}

/**
 * SettingsGroup — Contenedor visual glassmorphic para agrupar múltiples controles atómicos.
 */
export const SettingsGroup: React.FC<SettingsGroupProps> = ({
  title,
  description,
  children,
  className = ''
}) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
      className={`flex flex-col gap-4 p-6 backdrop-blur-lg bg-surface/30 border border-border/20 rounded-3xl shadow-xl ${className}`}
    >
      <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">
          {title}
        </h3>
        {description && (
          <p className="text-xs text-text-muted leading-relaxed">
            {description}
          </p>
        )}
      </div>
      <div className="flex flex-col gap-4">
        {children}
      </div>
    </motion.div>
  );
};