import { useParams, useNavigate } from 'react-router-dom'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { vtlAPI, type TapeDrive, type VirtualTape } from '@/api/tape'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Trash2, Plus, Play, RefreshCw } from 'lucide-react'
import { formatBytes } from '@/lib/format'
import { useState } from 'react'

export default function VTLDetail() {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const [selectedDrive, setSelectedDrive] = useState<string | null>(null)

  const { data, isLoading } = useQuery({
    queryKey: ['vtl-library', id],
    queryFn: () => vtlAPI.getLibrary(id!),
    enabled: !!id,
  })

  const deleteMutation = useMutation({
    mutationFn: () => vtlAPI.deleteLibrary(id!),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['vtl-libraries'] })
      navigate('/tape')
    },
  })

  if (isLoading) {
    return <div className="text-sm text-text-secondary min-h-screen bg-background-dark p-6">Loading library details...</div>
  }

  if (!data) {
    return <div className="text-sm text-red-400 min-h-screen bg-background-dark p-6">Library not found</div>
  }

  const { library, drives, tapes } = data

  return (
    <div className="space-y-6 min-h-screen bg-background-dark p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Button variant="ghost" size="sm" onClick={() => navigate('/tape')}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-white">{library.name}</h1>
            <p className="mt-1 text-sm text-text-secondary">
              Virtual Tape Library • {library.slot_count} slots • {library.drive_count} drives
            </p>
          </div>
        </div>
        <Button
          variant="destructive"
          onClick={() => {
            if (confirm('Are you sure you want to delete this library?')) {
              deleteMutation.mutate()
            }
          }}
        >
          <Trash2 className="h-4 w-4 mr-2" />
          Delete Library
        </Button>
      </div>

      {/* Library Info */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium">Library Status</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-text-secondary">Status:</span>
                <span className={library.is_active ? 'text-green-400' : 'text-text-secondary'}>
                  {library.is_active ? 'Active' : 'Inactive'}
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">mhVTL ID:</span>
                <span className="font-medium text-white">{library.mhvtl_library_id}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">Storage Path:</span>
                <span className="font-mono text-xs text-white">{library.storage_path}</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium">Capacity</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-text-secondary">Total Slots:</span>
                <span className="font-medium text-white">{library.slot_count}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">Used Slots:</span>
                <span className="font-medium text-white">{tapes.length}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">Free Slots:</span>
                <span className="font-medium text-white">{library.slot_count - tapes.length}</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium">Drives</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-text-secondary">Total Drives:</span>
                <span className="font-medium text-white">{library.drive_count}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">Idle:</span>
                <span className="font-medium text-white">
                  {drives.filter((d) => d.status === 'idle').length}
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">Ready:</span>
                <span className="font-medium text-white">
                  {drives.filter((d) => d.status === 'ready').length}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Drives */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Drives</CardTitle>
              <CardDescription>Virtual tape drives in this library</CardDescription>
            </div>
            <Button variant="outline" size="sm">
              <RefreshCw className="h-4 w-4 mr-2" />
              Refresh
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {drives.length > 0 ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              {drives.map((drive) => (
                <DriveCard
                  key={drive.id}
                  drive={drive}
                  tapes={tapes}
                  isSelected={selectedDrive === drive.id}
                  onSelect={() => setSelectedDrive(drive.id)}
                />
              ))}
            </div>
          ) : (
            <p className="text-sm text-text-secondary">No drives configured</p>
          )}
        </CardContent>
      </Card>

      {/* Tapes */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Virtual Tapes</CardTitle>
              <CardDescription>
                {tapes.length} of {library.slot_count} slots used
              </CardDescription>
            </div>
            <Button variant="outline" size="sm">
              <Plus className="h-4 w-4 mr-2" />
              Create Tape
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {tapes.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-[#1a2632]">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Barcode
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Slot
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Size
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Status
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-card-dark divide-y divide-border-dark">
                  {tapes.map((tape) => (
                    <tr key={tape.id} className="hover:bg-[#233648]">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">
                        {tape.barcode}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">
                        {tape.slot_number}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">
                        {formatBytes(tape.size_bytes)}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span
                          className={`px-2 py-1 text-xs font-medium rounded ${
                            tape.status === 'loaded'
                              ? 'bg-blue-100 text-blue-800'
                              : tape.status === 'mounted'
                                ? 'bg-green-100 text-green-800'
                                : 'bg-gray-100 text-gray-800'
                          }`}
                        >
                          {tape.status}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm">
                        {selectedDrive && (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => {
                              // TODO: Implement load tape
                              console.log('Load tape', tape.id, 'to drive', selectedDrive)
                            }}
                          >
                            <Play className="h-3 w-3 mr-1" />
                            Load
                          </Button>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <p className="text-sm text-text-secondary">No tapes created yet</p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}

interface DriveCardProps {
  drive: TapeDrive
  tapes: VirtualTape[]
  isSelected: boolean
  onSelect: () => void
}

function DriveCard({ drive, tapes, isSelected, onSelect }: DriveCardProps) {
  const currentTape = tapes.find((t) => t.id === drive.current_tape_id)

  return (
    <div
      className={`border rounded-lg p-4 cursor-pointer transition-colors ${
        isSelected ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-gray-300'
      }`}
      onClick={onSelect}
    >
      <div className="flex items-center justify-between mb-2">
        <h4 className="font-medium">Drive {drive.drive_number}</h4>
        <span
          className={`px-2 py-1 text-xs font-medium rounded ${
            drive.status === 'ready'
              ? 'bg-green-100 text-green-800'
              : drive.status === 'loaded'
                ? 'bg-blue-100 text-blue-800'
                : 'bg-gray-100 text-gray-800'
          }`}
        >
          {drive.status}
        </span>
      </div>
      {currentTape ? (
        <div className="text-sm text-text-secondary">
          <p className="text-white">Tape: {currentTape.barcode}</p>
          <p className="text-xs text-text-secondary">{formatBytes(currentTape.size_bytes)}</p>
        </div>
      ) : (
        <p className="text-sm text-text-secondary">No tape loaded</p>
      )}
      {isSelected && (
        <div className="mt-2 pt-2 border-t">
          <p className="text-xs text-blue-600">Selected - Click tape to load</p>
        </div>
      )}
    </div>
  )
}