"use client";

import { useState, useEffect } from "react";
import { useTheme } from "next-themes";
import {
  Sun,
  Moon,
  Monitor,
  Palette,
  LayoutGrid,
  List,
  Eye,
  EyeOff,
  Check,
} from "lucide-react";

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { Separator } from "@/components/ui/separator";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";
import { useAppSettings, type ThemeMode, type DefaultView } from "@/hooks/use-settings";

interface SettingsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

// Componente de opción de tema
function ThemeOption({
  value,
  label,
  icon: Icon,
  selected,
  onClick,
}: {
  value: ThemeMode;
  label: string;
  icon: React.ComponentType<{ className?: string }>;
  selected: boolean;
  onClick: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className={cn(
        "flex flex-col items-center gap-2 p-4 rounded-lg border-2 transition-all",
        selected
          ? "border-primary bg-primary/5"
          : "border-border hover:border-primary/50 hover:bg-muted/50"
      )}
    >
      <div
        className={cn(
          "p-3 rounded-full",
          selected ? "bg-primary text-primary-foreground" : "bg-muted"
        )}
      >
        <Icon className="h-5 w-5" />
      </div>
      <span className="text-sm font-medium">{label}</span>
      {selected && (
        <Check className="h-4 w-4 text-primary" />
      )}
    </button>
  );
}

// Componente de item de configuración con switch
function SettingItem({
  icon: Icon,
  label,
  description,
  checked,
  onCheckedChange,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  description?: string;
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
}) {
  return (
    <div className="flex items-center justify-between py-3">
      <div className="flex items-start gap-3">
        <div className="p-2 bg-muted rounded-md mt-0.5">
          <Icon className="h-4 w-4 text-muted-foreground" />
        </div>
        <div>
          <Label className="text-sm font-medium">{label}</Label>
          {description && (
            <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
          )}
        </div>
      </div>
      <Switch checked={checked} onCheckedChange={onCheckedChange} />
    </div>
  );
}

// Componente de item de configuración con select
function SettingSelect({
  icon: Icon,
  label,
  description,
  value,
  onValueChange,
  options,
}: {
  icon: React.ComponentType<{ className?: string }>;
  label: string;
  description?: string;
  value: string;
  onValueChange: (value: string) => void;
  options: { value: string; label: string }[];
}) {
  return (
    <div className="flex items-center justify-between py-3">
      <div className="flex items-start gap-3">
        <div className="p-2 bg-muted rounded-md mt-0.5">
          <Icon className="h-4 w-4 text-muted-foreground" />
        </div>
        <div>
          <Label className="text-sm font-medium">{label}</Label>
          {description && (
            <p className="text-xs text-muted-foreground mt-0.5">{description}</p>
          )}
        </div>
      </div>
      <Select value={value} onValueChange={onValueChange}>
        <SelectTrigger className="w-[140px]">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  );
}

export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
  const { theme, setTheme } = useTheme();
  const { settings, updateSettings, isLoaded } = useAppSettings();
  const [mounted, setMounted] = useState(false);

  // Evitar hydration mismatch
  useEffect(() => {
    setMounted(true);
  }, []);

  // Sincronizar tema con next-themes
  const handleThemeChange = (newTheme: ThemeMode) => {
    setTheme(newTheme);
    updateSettings({ theme: newTheme });
  };

  if (!mounted || !isLoaded) {
    return null;
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-2xl max-h-[85vh] overflow-y-auto">
        <DialogHeader className="pb-2">
          <DialogTitle className="text-xl">Ajustes</DialogTitle>
          <DialogDescription>
            Personaliza la apariencia y comportamiento de la aplicación
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6 py-2">
          {/* Sección: Tema */}
          <Card>
            <CardContent className="pt-4 pb-4">
              <div className="flex items-center gap-2 mb-4">
                <Palette className="h-4 w-4 text-muted-foreground" />
                <h4 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                  Tema
                </h4>
              </div>
              
              <div className="grid grid-cols-3 gap-3">
                <ThemeOption
                  value="light"
                  label="Claro"
                  icon={Sun}
                  selected={theme === "light"}
                  onClick={() => handleThemeChange("light")}
                />
                <ThemeOption
                  value="dark"
                  label="Oscuro"
                  icon={Moon}
                  selected={theme === "dark"}
                  onClick={() => handleThemeChange("dark")}
                />
                <ThemeOption
                  value="system"
                  label="Sistema"
                  icon={Monitor}
                  selected={theme === "system"}
                  onClick={() => handleThemeChange("system")}
                />
              </div>
            </CardContent>
          </Card>

          {/* Sección: Apariencia */}
          <Card>
            <CardContent className="pt-4 pb-2">
              <div className="flex items-center gap-2 mb-2">
                <Eye className="h-4 w-4 text-muted-foreground" />
                <h4 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                  Apariencia
                </h4>
              </div>
              
              <SettingItem
                icon={LayoutGrid}
                label="Modo compacto"
                description="Reduce el espaciado para mostrar más contenido"
                checked={settings.compactMode}
                onCheckedChange={(checked) => updateSettings({ compactMode: checked })}
              />
              
              <Separator />
              
              <SettingItem
                icon={Eye}
                label="Animaciones"
                description="Habilitar transiciones y animaciones"
                checked={settings.showAnimations}
                onCheckedChange={(checked) => updateSettings({ showAnimations: checked })}
              />
            </CardContent>
          </Card>

          {/* Sección: Proyectos */}
          <Card>
            <CardContent className="pt-4 pb-2">
              <div className="flex items-center gap-2 mb-2">
                <LayoutGrid className="h-4 w-4 text-muted-foreground" />
                <h4 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
                  Proyectos
                </h4>
              </div>
              
              <SettingSelect
                icon={List}
                label="Vista por defecto"
                description="Cómo mostrar los proyectos inicialmente"
                value={settings.defaultView}
                onValueChange={(value) => updateSettings({ defaultView: value as DefaultView })}
                options={[
                  { value: "grid", label: "Cuadrícula" },
                  { value: "list", label: "Lista" },
                ]}
              />
              
              <Separator />
              
              <SettingItem
                icon={settings.showCompletedProjects ? Eye : EyeOff}
                label="Mostrar completados"
                description="Mostrar proyectos cerrados en el dashboard"
                checked={settings.showCompletedProjects}
                onCheckedChange={(checked) => updateSettings({ showCompletedProjects: checked })}
              />
            </CardContent>
          </Card>
        </div>
      </DialogContent>
    </Dialog>
  );
}