import {
  TrendingUp,
  Calculator,
  Zap,
  Settings,
  LayoutDashboard,
} from 'lucide-react'
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { useAuthStore } from '@/stores/authStore'

interface ModuleCard {
  title: string
  description: string
  icon: React.ElementType
  available: boolean
}

const modules: ModuleCard[] = [
  {
    title: 'Dashboard',
    description: 'Vista general del sistema y métricas principales.',
    icon: LayoutDashboard,
    available: true,
  },
  {
    title: 'Ventas',
    description: 'Gestión de ventas, presupuestos y seguimiento de clientes.',
    icon: TrendingUp,
    available: false,
  },
  {
    title: 'Tasación',
    description: 'Herramientas de valuación y tasación de propiedades.',
    icon: Calculator,
    available: false,
  },
  {
    title: 'Integraciones',
    description: 'Conectores con portales inmobiliarios y servicios externos.',
    icon: Zap,
    available: false,
  },
  {
    title: 'Administración',
    description: 'Gestión de usuarios, roles y configuración del sistema.',
    icon: Settings,
    available: false,
  },
]

export function HomePage() {
  const user = useAuthStore((s) => s.user)

  return (
    <div className="space-y-6">
      {/* Welcome */}
      <div>
        <h1 className="text-2xl font-semibold tracking-tight text-foreground">
          Panel principal
        </h1>
        <p className="mt-1 text-sm text-muted-foreground">
          {user?.nombre
            ? `Bienvenido, ${user.nombre}. Seleccioná un módulo para comenzar.`
            : 'Bienvenido al SIG-CM 2.0. Seleccioná un módulo para comenzar.'}
        </p>
      </div>

      {/* Module grid */}
      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
        {modules.map((mod) => {
          const Icon = mod.icon
          return (
            <Card
              key={mod.title}
              className={
                mod.available ? 'hover:shadow-md transition-shadow' : 'opacity-75'
              }
            >
              <CardHeader className="pb-2">
                <div className="flex items-center gap-2">
                  <Icon className="h-5 w-5 text-muted-foreground" />
                  <CardTitle className="text-base">{mod.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <CardDescription>{mod.description}</CardDescription>
              </CardContent>
              <CardFooter>
                {mod.available ? (
                  <Badge>Disponible</Badge>
                ) : (
                  <Badge variant="secondary">Próximamente</Badge>
                )}
              </CardFooter>
            </Card>
          )
        })}
      </div>
    </div>
  )
}
