import { useState } from 'react';
import {
  Building2,
  Users as UsersIcon,
  User,
  Shield,
  Settings2,
  ChevronRight,
} from 'lucide-react';
import { Card, CardContent } from '@components/molecules/Card';
import { Breadcrumbs } from '@components/organisms/Breadcrumbs';

type SettingsSection = 'company' | 'users' | 'profile' | 'security' | 'system';

interface SettingsMenuItem {
  key: SettingsSection;
  label: string;
  description: string;
  icon: React.ReactNode;
  href: string;
}

const menuItems: SettingsMenuItem[] = [
  {
    key: 'company',
    label: 'Empresa',
    description: 'Informacion general, logo y configuracion fiscal',
    icon: <Building2 className="h-6 w-6 text-blue-600" />,
    href: '/settings/company',
  },
  {
    key: 'users',
    label: 'Usuarios',
    description: 'Gestiona usuarios, roles y permisos',
    icon: <UsersIcon className="h-6 w-6 text-green-600" />,
    href: '/settings/users',
  },
  {
    key: 'profile',
    label: 'Mi perfil',
    description: 'Tu informacion personal y preferencias',
    icon: <User className="h-6 w-6 text-purple-600" />,
    href: '/settings/profile',
  },
  {
    key: 'security',
    label: 'Seguridad',
    description: 'Contrasena, autenticacion y logs de auditoria',
    icon: <Shield className="h-6 w-6 text-red-600" />,
    href: '/settings/security',
  },
  {
    key: 'system',
    label: 'Sistema',
    description: 'Configuracion avanzada del sistema',
    icon: <Settings2 className="h-6 w-6 text-gray-600" />,
    href: '/settings/system',
  },
];

export function SettingsPage() {
  const [hoveredItem, setHoveredItem] = useState<SettingsSection | null>(null);

  return (
    <div className="space-y-6 p-6">
      <Breadcrumbs items={[
        { label: 'Configuracion' },
      ]} />

      <div>
        <h1 className="text-2xl font-bold text-gray-900">Configuracion</h1>
        <p className="text-sm text-gray-500">
          Gestiona la configuracion de tu empresa, usuarios y sistema
        </p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {menuItems.map((item) => (
          <a
            key={item.key}
            href={item.href}
            onMouseEnter={() => setHoveredItem(item.key)}
            onMouseLeave={() => setHoveredItem(null)}
          >
            <Card className={`cursor-pointer transition-all h-full ${
              hoveredItem === item.key ? 'shadow-md ring-2 ring-blue-500' : 'hover:shadow-md'
            }`}>
              <CardContent className="p-6">
                <div className="flex items-start justify-between">
                  <div className="flex items-start gap-4">
                    <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
                      {item.icon}
                    </div>
                    <div>
                      <h3 className="font-semibold text-gray-900">{item.label}</h3>
                      <p className="text-sm text-gray-500 mt-1">{item.description}</p>
                    </div>
                  </div>
                  <ChevronRight className={`h-5 w-5 text-gray-400 transition-transform ${
                    hoveredItem === item.key ? 'translate-x-1' : ''
                  }`} />
                </div>
              </CardContent>
            </Card>
          </a>
        ))}
      </div>
    </div>
  );
}

export default SettingsPage;