import { useState } from 'react';
import { useNavigate, useParams } from '@tanstack/react-router';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Label } from '@/components/ui/label';
import { Alert, AlertDescription } from '@/components/ui/alert';
import {
  ArrowLeft,
  Edit,
  Trash2,
  Download,
  Star,
  Calendar,
  HardDrive,
  Tag,
  ExternalLink,
  Info,
  AlertCircle,
} from 'lucide-react';
import { Game } from '@/types';

// Datos simulados para el detalle del juego
const mockGame: Game = {
  id: 1,
  title: 'The Legend of Zelda: Breath of the Wild',
  description:
    'The Legend of Zelda: Breath of the Wild es un juego de acción-aventura desarrollado y publicado por Nintendo para la consola Nintendo Switch y la consola Wii U. Es el decimonoveno juego principal de la serie The Legend of Zelda y fue lanzado mundialmente en marzo de 2017. El juego presenta un mundo abierto con un diseño de física y química avanzado que permite a los jugadores resolver problemas de man creativas.',
  platformId: 1,
  platform: {
    id: 1,
    name: 'Nintendo Switch',
    description: 'Consola híbrida de Nintendo',
    manufacturer: 'Nintendo',
    releaseYear: 2017,
    romExtension: 'nsp',
  },
  releaseYear: 2017,
  rating: 9.5,
  tags: [
    { id: 1, name: 'Aventura', color: '#3B82F6', description: 'Juegos de aventura' },
    { id: 2, name: 'Acción', color: '#EF4444', description: 'Juegos de acción' },
    { id: 3, name: 'Open World', color: '#10B981', description: 'Mundo abierto' },
  ],
  romFile: {
    id: 1,
    filename: 'zelda_botw.nsp',
    path: '/roms/nintendo-switch',
    size: 14485760,
    checksum: 'abc123def456',
    gameId: 1,
  },
  metadataSource: 'manual',
  igdbId: '12345',
  rawgId: '67890',
  thegamesdbId: '54321',
  createdAt: new Date('2024-01-10'),
  updatedAt: new Date('2024-01-15'),
};

export function GameDetailPage() {
  const navigate = useNavigate();
  const { gameId } = useParams({ from: '/games/$gameId' });
  const [game] = useState<Game>(mockGame);

  const handleEdit = () => {
    navigate({ to: `/games/${game.id}/edit` });
  };

  const handleDelete = () => {
    // TODO: Implementar eliminación del juego
    console.log('Eliminar juego:', game.id);
  };

  const formatFileSize = (bytes: number) => {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
  };

  return (
    <div className="space-y-6">
      {/* Encabezado con botón de retroceso */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" onClick={() => navigate({ to: '/games' })} className="gap-2">
          <ArrowLeft className="h-4 w-4" />
          Volver
        </Button>
        <div>
          <h1 className="text-3xl font-bold tracking-tight">{game.title}</h1>
          <p className="text-muted-foreground">Detalles del juego</p>
        </div>
      </div>

      {/* Acciones */}
      <div className="flex gap-2">
        <Button onClick={handleEdit} className="gap-2">
          <Edit className="h-4 w-4" />
          Editar
        </Button>
        <Button variant="outline" className="gap-2">
          <Download className="h-4 w-4" />
          Descargar ROM
        </Button>
        <Button
          variant="outline"
          onClick={handleDelete}
          className="gap-2 text-destructive hover:text-destructive"
        >
          <Trash2 className="h-4 w-4" />
          Eliminar
        </Button>
      </div>

      <div className="grid gap-6 md:grid-cols-3">
        {/* Información principal */}
        <div className="md:col-span-2 space-y-6">
          {/* Descripción */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Info className="h-5 w-5" />
                Descripción
              </CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground leading-relaxed">{game.description}</p>
            </CardContent>
          </Card>

          {/* Información técnica */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <HardDrive className="h-5 w-5" />
                Información Técnica
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid gap-4 md:grid-cols-2">
                <div>
                  <Label className="text-sm font-medium">Plataforma</Label>
                  <p className="text-sm text-muted-foreground">{game.platform?.name}</p>
                </div>
                <div>
                  <Label className="text-sm font-medium">Año de lanzamiento</Label>
                  <p className="text-sm text-muted-foreground">
                    {game.releaseYear || 'Desconocido'}
                  </p>
                </div>
                <div>
                  <Label className="text-sm font-medium">Tamaño del archivo</Label>
                  <p className="text-sm text-muted-foreground">
                    {game.romFile ? formatFileSize(game.romFile.size) : 'No disponible'}
                  </p>
                </div>
                <div>
                  <Label className="text-sm font-medium">Checksum</Label>
                  <p className="text-sm font-mono text-muted-foreground">
                    {game.romFile ? game.romFile.checksum : 'No disponible'}
                  </p>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Etiquetas */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Tag className="h-5 w-5" />
                Etiquetas
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex flex-wrap gap-2">
                {game.tags.map((tag) => (
                  <Badge
                    key={tag.id}
                    variant="secondary"
                    style={{ backgroundColor: tag.color }}
                    className="text-white"
                  >
                    {tag.name}
                  </Badge>
                ))}
                {game.tags.length === 0 && (
                  <p className="text-sm text-muted-foreground">No hay etiquetas asignadas</p>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Panel lateral */}
        <div className="space-y-6">
          {/* Estado del juego */}
          <Card>
            <CardHeader>
              <CardTitle>Estado</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium">Calificación</span>
                <div className="flex items-center gap-1">
                  <Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
                  <span className="font-medium">{game.rating || '-'}</span>
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium">ROM</span>
                <Badge variant={game.romFile ? 'default' : 'secondary'}>
                  {game.romFile ? 'Disponible' : 'No disponible'}
                </Badge>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium">Metadata</span>
                <Badge variant={game.metadataSource ? 'default' : 'secondary'}>
                  {game.metadataSource || 'Manual'}
                </Badge>
              </div>
            </CardContent>
          </Card>

          {/* Fuentes externas */}
          <Card>
            <CardHeader>
              <CardTitle>Fuentes Externas</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div className="flex items-center justify-between">
                <span className="text-sm">IGDB</span>
                <div className="flex items-center gap-2">
                  {game.igdbId ? (
                    <>
                      <Badge variant="outline">Conectado</Badge>
                      <Button size="sm" variant="ghost">
                        <ExternalLink className="h-3 w-3" />
                      </Button>
                    </>
                  ) : (
                    <Badge variant="secondary">No conectado</Badge>
                  )}
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm">RAWG</span>
                <div className="flex items-center gap-2">
                  {game.rawgId ? (
                    <>
                      <Badge variant="outline">Conectado</Badge>
                      <Button size="sm" variant="ghost">
                        <ExternalLink className="h-3 w-3" />
                      </Button>
                    </>
                  ) : (
                    <Badge variant="secondary">No conectado</Badge>
                  )}
                </div>
              </div>
              <div className="flex items-center justify-between">
                <span className="text-sm">TheGamesDB</span>
                <div className="flex items-center gap-2">
                  {game.thegamesdbId ? (
                    <>
                      <Badge variant="outline">Conectado</Badge>
                      <Button size="sm" variant="ghost">
                        <ExternalLink className="h-3 w-3" />
                      </Button>
                    </>
                  ) : (
                    <Badge variant="secondary">No conectado</Badge>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Fechas */}
          <Card>
            <CardHeader>
              <CardTitle>Información de Registro</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              <div>
                <Label className="text-sm font-medium">Fecha de creación</Label>
                <p className="text-sm text-muted-foreground">
                  {game.createdAt.toLocaleDateString()}
                </p>
              </div>
              <div>
                <Label className="text-sm font-medium">Última actualización</Label>
                <p className="text-sm text-muted-foreground">
                  {game.updatedAt.toLocaleDateString()}
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Acciones adicionales */}
      <Card>
        <CardHeader>
          <CardTitle>Acciones Rápidas</CardTitle>
          <CardDescription>Acciones adicionales para gestionar este juego</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <Button variant="outline" className="gap-2">
              <ExternalLink className="h-4 w-4" />
              Buscar Metadata
            </Button>
            <Button variant="outline" className="gap-2">
              <Calendar className="h-4 w-4" />
              Añadir Fecha de Compra
            </Button>
            <Button variant="outline" className="gap-2">
              <Tag className="h-4 w-4" />
              Gestionar Etiquetas
            </Button>
            <Button variant="outline" className="gap-2">
              <Download className="h-4 w-4" />
              Exportar Datos
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Alerta de información */}
      <Alert>
        <Info className="h-4 w-4" />
        <AlertDescription>
          Esta es una vista previa del juego. Algunas características pueden no estar completamente
          implementadas en esta versión de demostración.
        </AlertDescription>
      </Alert>
    </div>
  );
}
