'use client';

import { Header } from '@/components/layouts/header';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { useThemeStore } from '@/stores/theme-store';
import { useAuthStore } from '@/stores/auth-store';
import { themes, type ThemeName } from '@/themes';
import { Check, Palette, User, Building, Sidebar, PanelTop, Minimize2, Sparkles } from 'lucide-react';

const themeOptions: { name: ThemeName; label: string; description: string; layoutDesc: string; layoutIcon: typeof Sidebar }[] = [
  {
    name: 'light',
    label: 'Light',
    description: 'Tema claro profesional',
    layoutDesc: 'Sidebar estándar fijo',
    layoutIcon: Sidebar,
  },
  {
    name: 'vibrant',
    label: 'Vibrant',
    description: 'Colores vivos y modernos',
    layoutDesc: 'Navegación horizontal superior',
    layoutIcon: PanelTop,
  },
  {
    name: 'corporate',
    label: 'Corporate',
    description: 'Diseño empresarial denso',
    layoutDesc: 'Sidebar compacto (expande al hover)',
    layoutIcon: Minimize2,
  },
  {
    name: 'dark',
    label: 'Dark',
    description: 'Modo oscuro con acentos neón',
    layoutDesc: 'Sidebar flotante con efecto glass',
    layoutIcon: Sparkles,
  },
];

export default function ConfiguracionPage() {
  const { theme, setTheme } = useThemeStore();
  const { user } = useAuthStore();

  return (
    <>
      <Header title="Configuración" />
      <main className="p-6 space-y-6">
        {/* User Info */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <User className="h-4 w-4" />
              Información del Usuario
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div>
                <p className="text-sm text-muted-foreground">Nombre</p>
                <p className="font-medium">{user?.nombre}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Email</p>
                <p className="font-medium">{user?.email}</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">Rol</p>
                <p className="font-medium capitalize">{user?.role}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Company Info */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <Building className="h-4 w-4" />
              Información de la Empresa
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2">
              <div>
                <p className="text-sm text-muted-foreground">Empresa</p>
                <p className="font-medium">{user?.tenantName}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Theme Selection */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-base">
              <Palette className="h-4 w-4" />
              Tema Visual y Layout
            </CardTitle>
            <CardDescription>
              Cada tema incluye colores y distribución de elementos únicos
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-2">
              {themeOptions.map((option) => {
                const LayoutIcon = option.layoutIcon;
                return (
                  <button
                    key={option.name}
                    onClick={() => setTheme(option.name)}
                    className={`relative p-4 rounded-lg border-2 text-left transition-all ${
                      theme === option.name
                        ? 'border-primary bg-primary/5 shadow-md'
                        : 'border-border hover:border-primary/50'
                    }`}
                  >
                    {theme === option.name && (
                      <div className="absolute top-3 right-3">
                        <div className="h-6 w-6 rounded-full bg-primary flex items-center justify-center">
                          <Check className="h-4 w-4 text-primary-foreground" />
                        </div>
                      </div>
                    )}

                    {/* Color Preview */}
                    <div className="flex gap-2 mb-4">
                      <div
                        className="h-12 w-12 rounded-lg shadow-inner"
                        style={{
                          background: `hsl(${themes[option.name].cssVars['--primary']})`,
                        }}
                      />
                      <div
                        className="h-12 w-8 rounded-lg shadow-inner"
                        style={{
                          background: `hsl(${themes[option.name].cssVars['--secondary']})`,
                        }}
                      />
                      <div
                        className="h-12 w-8 rounded-lg shadow-inner"
                        style={{
                          background: `hsl(${themes[option.name].cssVars['--accent']})`,
                        }}
                      />
                    </div>

                    {/* Theme Info */}
                    <p className="font-semibold text-lg mb-1">{option.label}</p>
                    <p className="text-sm text-muted-foreground mb-3">
                      {option.description}
                    </p>

                    {/* Layout Info */}
                    <div className="flex items-center gap-2 pt-3 border-t">
                      <LayoutIcon className="h-4 w-4 text-muted-foreground" />
                      <span className="text-xs text-muted-foreground">
                        {option.layoutDesc}
                      </span>
                    </div>
                  </button>
                );
              })}
            </div>
          </CardContent>
        </Card>
      </main>
    </>
  );
}