'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 } from 'lucide-react';

const themeOptions: { name: ThemeName; label: string; description: string }[] = [
  { name: 'light', label: 'Light', description: 'Tema claro profesional' },
  { name: 'vibrant', label: 'Vibrant', description: 'Colores vivos y modernos' },
  { name: 'corporate', label: 'Corporate', description: 'Diseño empresarial denso' },
  { name: 'dark', label: 'Dark', description: 'Modo oscuro con acentos neón' },
];

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
            </CardTitle>
            <CardDescription>
              Elige el tema que mejor se adapte a tu preferencia
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
              {themeOptions.map((option) => (
                <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'
                      : 'border-border hover:border-primary/50'
                  }`}
                >
                  {theme === option.name && (
                    <div className="absolute top-2 right-2">
                      <Check className="h-4 w-4 text-primary" />
                    </div>
                  )}
                  <div
                    className="h-20 rounded-md mb-3"
                    style={{
                      background: `hsl(${themes[option.name].cssVars['--primary']})`,
                    }}
                  />
                  <p className="font-medium">{option.label}</p>
                  <p className="text-xs text-muted-foreground">
                    {option.description}
                  </p>
                </button>
              ))}
            </div>
          </CardContent>
        </Card>
      </main>
    </>
  );
}