import { useState } from 'react';
import { useTheme } from 'next-themes';
import { 
  Settings as SettingsIcon, 
  Moon, 
  Sun, 
  Type, 
  Globe, 
  Bell, 
  Database,
  Wifi,
  WifiOff,
  RefreshCw
} from 'lucide-react';

const Ajustes = () => {
  const { theme, setTheme } = useTheme();
  const [fontSize, setFontSize] = useState('medium');
  const [notifications, setNotifications] = useState(true);
  const [offlineMode, setOfflineMode] = useState(true);

  const themes = [
    { value: 'light', label: 'Claro', icon: Sun },
    { value: 'dark', label: 'Oscuro', icon: Moon },
    { value: 'system', label: 'Sistema', icon: Globe },
  ];

  const fontSizes = [
    { value: 'small', label: 'Pequeño' },
    { value: 'medium', label: 'Mediano' },
    { value: 'large', label: 'Grande' },
    { value: 'xlarge', label: 'Extra grande' },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground mb-1">Ajustes</h1>
        <p className="text-muted-foreground text-sm">
          Configura la aplicación a tu medida
        </p>
      </div>

      {/* Apariencia */}
      <section className="space-y-3">
        <h2 className="font-semibold text-foreground flex items-center gap-2">
          <SettingsIcon className="w-4 h-4" />
          Apariencia
        </h2>
        
        {/* Tema */}
        <div className="p-4 bg-card border border-border rounded-lg space-y-3">
          <p className="text-sm font-medium text-foreground">Tema</p>
          <div className="grid grid-cols-3 gap-2">
            {themes.map((t) => {
              const Icon = t.icon;
              const isActive = theme === t.value;
              return (
                <button
                  key={t.value}
                  onClick={() => setTheme(t.value)}
                  className={`p-3 rounded-lg border transition-all flex flex-col items-center gap-2 ${
                    isActive 
                      ? 'border-primary bg-primary/10 text-primary' 
                      : 'border-border hover:border-primary/50 text-muted-foreground'
                  }`}
                >
                  <Icon className="w-5 h-5" />
                  <span className="text-xs">{t.label}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* Tamaño de fuente */}
        <div className="p-4 bg-card border border-border rounded-lg space-y-3">
          <p className="text-sm font-medium text-foreground flex items-center gap-2">
            <Type className="w-4 h-4" />
            Tamaño de fuente
          </p>
          <div className="grid grid-cols-2 gap-2">
            {fontSizes.map((f) => (
              <button
                key={f.value}
                onClick={() => setFontSize(f.value)}
                className={`p-3 rounded-lg border transition-all text-sm ${
                  fontSize === f.value 
                    ? 'border-primary bg-primary/10 text-primary' 
                    : 'border-border hover:border-primary/50 text-muted-foreground'
                }`}
              >
                {f.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Notificaciones */}
      <section className="space-y-3">
        <h2 className="font-semibold text-foreground flex items-center gap-2">
          <Bell className="w-4 h-4" />
          Notificaciones
        </h2>
        
        <div className="p-4 bg-card border border-border rounded-lg flex items-center justify-between">
          <div>
            <p className="text-sm font-medium text-foreground">Notificaciones</p>
            <p className="text-xs text-muted-foreground">Recibir alertas de actualizaciones</p>
          </div>
          <button
            onClick={() => setNotifications(!notifications)}
            className={`w-12 h-6 rounded-full transition-colors ${
              notifications ? 'bg-primary' : 'bg-muted'
            }`}
          >
            <div className={`w-5 h-5 rounded-full bg-white shadow transform transition-transform ${
              notifications ? 'translate-x-6' : 'translate-x-0.5'
            }`} />
          </button>
        </div>
      </section>

      {/* Datos */}
      <section className="space-y-3">
        <h2 className="font-semibold text-foreground flex items-center gap-2">
          <Database className="w-4 h-4" />
          Datos
        </h2>
        
        {/* Modo offline */}
        <div className="p-4 bg-card border border-border rounded-lg flex items-center justify-between">
          <div className="flex items-center gap-3">
            {offlineMode ? (
              <WifiOff className="w-5 h-5 text-muted-foreground" />
            ) : (
              <Wifi className="w-5 h-5 text-muted-foreground" />
            )}
            <div>
              <p className="text-sm font-medium text-foreground">Modo offline</p>
              <p className="text-xs text-muted-foreground">
                {offlineMode ? 'Datos guardados localmente' : 'Solo datos disponibles online'}
              </p>
            </div>
          </div>
          <button
            onClick={() => setOfflineMode(!offlineMode)}
            className={`w-12 h-6 rounded-full transition-colors ${
              offlineMode ? 'bg-primary' : 'bg-muted'
            }`}
          >
            <div className={`w-5 h-5 rounded-full bg-white shadow transform transition-transform ${
              offlineMode ? 'translate-x-6' : 'translate-x-0.5'
            }`} />
          </button>
        </div>

        {/* Sincronizar datos */}
        <div className="p-4 bg-card border border-border rounded-lg">
          <button className="w-full flex items-center justify-center gap-2 p-3 rounded-lg border border-border hover:border-primary/50 transition-colors text-foreground">
            <RefreshCw className="w-4 h-4" />
            <span className="text-sm">Sincronizar datos</span>
          </button>
          <p className="text-xs text-muted-foreground mt-2 text-center">
            Última sincronización: nunca
          </p>
        </div>

        {/* Borrar caché */}
        <div className="p-4 bg-card border border-border rounded-lg">
          <button className="w-full flex items-center justify-center gap-2 p-3 rounded-lg border border-destructive hover:bg-destructive/10 transition-colors text-destructive">
            <Database className="w-4 h-4" />
            <span className="text-sm">Borrar datos locales</span>
          </button>
          <p className="text-xs text-muted-foreground mt-2 text-center">
            Elimina todos los datos guardados en el dispositivo
          </p>
        </div>
      </section>

      {/* Info app */}
      <section className="space-y-3">
        <h2 className="font-semibold text-foreground">Información</h2>
        <div className="p-4 bg-card border border-border rounded-lg space-y-2">
          <div className="flex items-center justify-between">
            <p className="text-sm text-muted-foreground">Versión</p>
            <p className="text-sm font-medium text-foreground">0.1.0</p>
          </div>
          <div className="flex items-center justify-between">
            <p className="text-sm text-muted-foreground">Build</p>
            <p className="text-sm font-medium text-foreground">2026.03.15</p>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Ajustes;