import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  Gamepad2,
  Database,
  Tag,
  Download,
  Upload,
  TrendingUp,
  Clock,
  AlertCircle,
} from 'lucide-react';

// Datos simulados para el dashboard
const stats = {
  totalGames: 156,
  gamesWithRom: 128,
  gamesWithoutRom: 28,
  gamesWithMetadata: 142,
  gamesWithoutMetadata: 14,
  totalPlatforms: 12,
  totalTags: 45,
  averageRating: 7.8,
};

const recentGames = [
  {
    id: 1,
    title: 'The Legend of Zelda: Breath of the Wild',
    platform: 'Nintendo Switch',
    rating: 9.5,
    addedDate: '2024-01-10',
  },
  { id: 2, title: 'God of War', platform: 'PlayStation 4', rating: 9.2, addedDate: '2024-01-09' },
  { id: 3, title: 'Cyberpunk 2077', platform: 'PC', rating: 8.7, addedDate: '2024-01-08' },
  {
    id: 4,
    title: 'Super Mario Odyssey',
    platform: 'Nintendo Switch',
    rating: 9.0,
    addedDate: '2024-01-07',
  },
  {
    id: 5,
    title: 'Red Dead Redemption 2',
    platform: 'PlayStation 4',
    rating: 9.3,
    addedDate: '2024-01-06',
  },
];

const pendingTasks = [
  { id: 1, title: 'Enriquecer metadata para 14 juegos', priority: 'high', type: 'metadata' },
  { id: 2, title: 'Importar 28 ROMs detectadas', priority: 'medium', type: 'import' },
  { id: 3, title: 'Actualizar información de 5 juegos', priority: 'low', type: 'update' },
];

export function DashboardPage() {
  return (
    <div className="space-y-6">
      {/* Encabezado */}
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
        <p className="text-muted-foreground">Resumen general de tu colección de videojuegos</p>
      </div>

      {/* Estadísticas principales */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total de Juegos</CardTitle>
            <Gamepad2 className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.totalGames}</div>
            <p className="text-xs text-muted-foreground">+12% desde el mes pasado</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Juegos con ROM</CardTitle>
            <Download className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.gamesWithRom}</div>
            <p className="text-xs text-muted-foreground">de {stats.totalGames} juegos</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Juegos con Metadata</CardTitle>
            <Database className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.gamesWithMetadata}</div>
            <p className="text-xs text-muted-foreground">{stats.gamesWithoutMetadata} pendientes</p>
          </CardContent>
        </Card>

        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Plataformas</CardTitle>
            <Tag className="h-4 w-4 text-muted-foreground" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold">{stats.totalPlatforms}</div>
            <p className="text-xs text-muted-foreground">{stats.totalTags} etiquetas</p>
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 md:grid-cols-2">
        {/* Tareas pendientes */}
        <Card>
          <CardHeader>
            <CardTitle>Tareas Pendientes</CardTitle>
            <CardDescription>
              Acciones necesarias para mantener tu colección actualizada
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {pendingTasks.map((task) => (
                <div key={task.id} className="flex items-center space-x-3">
                  <div className="flex-shrink-0">
                    {task.priority === 'high' && <AlertCircle className="h-5 w-5 text-red-500" />}
                    {task.priority === 'medium' && <Clock className="h-5 w-5 text-yellow-500" />}
                    {task.priority === 'low' && <TrendingUp className="h-5 w-5 text-green-500" />}
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900 truncate">{task.title}</p>
                    <div className="flex items-center space-x-2 mt-1">
                      <Badge variant="secondary" className="text-xs">
                        {task.type}
                      </Badge>
                      <Badge
                        variant={
                          task.priority === 'high'
                            ? 'destructive'
                            : task.priority === 'medium'
                              ? 'default'
                              : 'secondary'
                        }
                        className="text-xs"
                      >
                        {task.priority}
                      </Badge>
                    </div>
                  </div>
                  <Button size="sm" variant="outline">
                    Ver
                  </Button>
                </div>
              ))}
            </div>
            <div className="mt-4 pt-4 border-t">
              <Button className="w-full" variant="outline">
                Ver todas las tareas
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Juegos recientes */}
        <Card>
          <CardHeader>
            <CardTitle>Juegos Recientes</CardTitle>
            <CardDescription>Últimos juegos añadidos a tu colección</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentGames.map((game) => (
                <div key={game.id} className="flex items-center space-x-3">
                  <div className="flex-shrink-0">
                    <div className="h-10 w-10 bg-gray-200 rounded-md flex items-center justify-center">
                      <Gamepad2 className="h-6 w-6 text-gray-400" />
                    </div>
                  </div>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm font-medium text-gray-900 truncate">{game.title}</p>
                    <div className="flex items-center space-x-2 mt-1">
                      <Badge variant="outline" className="text-xs">
                        {game.platform}
                      </Badge>
                      <div className="flex items-center">
                        <span className="text-sm text-gray-500">★</span>
                        <span className="text-sm font-medium ml-1">{game.rating}</span>
                      </div>
                    </div>
                  </div>
                  <div className="text-sm text-gray-500">{game.addedDate}</div>
                </div>
              ))}
            </div>
            <div className="mt-4 pt-4 border-t">
              <Button className="w-full" variant="outline">
                Ver todos los juegos
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Acciones rápidas */}
      <Card>
        <CardHeader>
          <CardTitle>Acciones Rápidas</CardTitle>
          <CardDescription>Acciones comunes para gestionar tu colección</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-3">
            <Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
              <Download className="h-6 w-6" />
              <span>Importar ROMs</span>
            </Button>
            <Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
              <Upload className="h-6 w-6" />
              <span>Exportar Datos</span>
            </Button>
            <Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
              <Database className="h-6 w-6" />
              <span>Gestionar Plataformas</span>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
