import { useState } from 'react'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { physicalTapeAPI, vtlAPI, type PhysicalTapeLibrary, type VirtualTapeLibrary, type VirtualTape } from '@/api/tape'
import { Link } from 'react-router-dom'
import { formatBytes } from '@/lib/format'

export default function TapeLibraries() {
  const [activeTab, setActiveTab] = useState<'physical' | 'vtl'>('vtl')
  const [selectedLibrary, setSelectedLibrary] = useState<string | null>(null)
  const [searchQuery, setSearchQuery] = useState('')
  const queryClient = useQueryClient()

  const { data: physicalLibraries = [], isLoading: loadingPhysical } = useQuery<PhysicalTapeLibrary[]>({
    queryKey: ['physical-tape-libraries'],
    queryFn: physicalTapeAPI.listLibraries,
    enabled: activeTab === 'physical',
    refetchInterval: 5000,
  })

  const { data: vtlLibraries = [], isLoading: loadingVTL } = useQuery<VirtualTapeLibrary[]>({
    queryKey: ['vtl-libraries'],
    queryFn: vtlAPI.listLibraries,
    enabled: activeTab === 'vtl',
    refetchInterval: 5000,
  })

  // Get tapes for selected library
  const { data: libraryTapes = [] } = useQuery<VirtualTape[]>({
    queryKey: ['vtl-library-tapes', selectedLibrary],
    queryFn: () => vtlAPI.getLibraryTapes(selectedLibrary!),
    enabled: !!selectedLibrary && activeTab === 'vtl',
  })

  // Calculate stats
  const totalLibraries = activeTab === 'vtl' ? vtlLibraries.length : physicalLibraries.length
  const onlineLibraries = activeTab === 'vtl' 
    ? vtlLibraries.filter(l => l.is_active).length 
    : physicalLibraries.filter(l => l.is_active).length
  
  const totalSlots = activeTab === 'vtl'
    ? vtlLibraries.reduce((sum, l) => sum + l.slot_count, 0)
    : physicalLibraries.reduce((sum, l) => sum + l.slot_count, 0)
  
  const usedSlots = libraryTapes.filter(t => t.slot_number > 0).length

  // Filter libraries by search
  const filteredLibraries = (activeTab === 'vtl' ? vtlLibraries : physicalLibraries).filter(lib =>
    lib.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    (activeTab === 'vtl' && 'mhvtl_library_id' in lib && lib.mhvtl_library_id.toString().includes(searchQuery))
  )

  const handleRefresh = () => {
    queryClient.invalidateQueries({ queryKey: activeTab === 'vtl' ? ['vtl-libraries'] : ['physical-tape-libraries'] })
  }

  return (
    <div className="flex-1 flex flex-col h-full overflow-hidden relative bg-background-dark">
      {/* Top Header & Breadcrumbs */}
      <header className="flex-none px-6 py-5 border-b border-border-dark bg-[#111a22]/95 backdrop-blur z-10">
        <div className="max-w-[1400px] mx-auto w-full flex flex-col gap-4">
          {/* Breadcrumbs */}
          <div className="flex flex-wrap gap-2 items-center">
            <Link to="/" className="text-text-secondary text-sm font-medium hover:text-primary transition-colors">
              Home
            </Link>
            <span className="text-text-secondary text-xs">/</span>
            <span className="text-white text-sm font-medium">Virtual Tape Libraries</span>
          </div>

          {/* Page Heading & Actions */}
          <div className="flex flex-wrap justify-between items-end gap-4">
            <div className="flex flex-col gap-1">
              <h2 className="text-white text-3xl font-bold tracking-tight">Virtual Tape Libraries</h2>
              <p className="text-text-secondary text-base max-w-2xl">
                Manage virtual tape devices, emulation profiles, and storage targets.
              </p>
            </div>
            <div className="flex gap-3">
              <button
                onClick={handleRefresh}
                className="px-4 py-2 bg-surface-dark hover:bg-[#2a3b4d] border border-border-dark rounded-lg text-white text-sm font-medium flex items-center gap-2 transition-all"
              >
                <span className="material-symbols-outlined text-lg">refresh</span>
                Refresh
              </button>
              {activeTab === 'vtl' && (
                <Link
                  to="/tape/vtl/create"
                  className="px-4 py-2 bg-primary hover:bg-blue-600 rounded-lg text-white text-sm font-bold shadow-lg shadow-blue-900/20 flex items-center gap-2 transition-all"
                >
                  <span className="material-symbols-outlined text-lg">add</span>
                  Create VTL
                </Link>
              )}
            </div>
          </div>
        </div>
      </header>

      {/* Scrollable Content */}
      <div className="flex-1 overflow-y-auto bg-background-dark">
        <div className="max-w-[1400px] mx-auto p-6 flex flex-col gap-6 pb-20">
          {/* Tabs */}
          <div className="border-b border-border-dark">
            <nav className="-mb-px flex space-x-8">
              <button
                onClick={() => {
                  setActiveTab('vtl')
                  setSelectedLibrary(null)
                }}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === 'vtl'
                    ? 'border-primary text-primary'
                    : 'border-transparent text-text-secondary hover:text-white hover:border-border-dark'
                }`}
              >
                Virtual Tape Libraries ({vtlLibraries.length})
              </button>
              <button
                onClick={() => {
                  setActiveTab('physical')
                  setSelectedLibrary(null)
                }}
                className={`py-4 px-1 border-b-2 font-medium text-sm ${
                  activeTab === 'physical'
                    ? 'border-primary text-primary'
                    : 'border-transparent text-text-secondary hover:text-white hover:border-border-dark'
                }`}
              >
                Physical Libraries ({physicalLibraries.length})
              </button>
            </nav>
          </div>

          {/* Stats Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {/* Stat Card 1 */}
            <div className="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark relative overflow-hidden group">
              <div className="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span className="material-symbols-outlined text-6xl text-white">dns</span>
              </div>
              <p className="text-text-secondary text-sm font-medium">Total Libraries</p>
              <div className="flex items-end gap-2">
                <p className="text-white text-3xl font-bold tracking-tight">{totalLibraries}</p>
                <span className="text-green-500 text-xs font-medium mb-1.5 flex items-center">
                  <span className="material-symbols-outlined text-sm mr-0.5">check_circle</span>
                  {onlineLibraries === totalLibraries ? 'All Online' : `${onlineLibraries} Online`}
                </span>
              </div>
            </div>

            {/* Stat Card 2 */}
            <div className="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark relative overflow-hidden group">
              <div className="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span className="material-symbols-outlined text-6xl text-white">database</span>
              </div>
              <p className="text-text-secondary text-sm font-medium">Total Capacity</p>
              <div className="flex items-end gap-2">
              <p className="text-white text-3xl font-bold tracking-tight">
                {formatBytes(
                  activeTab === 'vtl'
                    ? vtlLibraries.reduce((sum, l) => sum + (l.slot_count * 15 * 1024 * 1024 * 1024 * 1024), 0)
                    : 0,
                  1
                )}
              </p>
              </div>
            </div>

            {/* Stat Card 3 */}
            <div className="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark relative overflow-hidden group">
              <div className="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span className="material-symbols-outlined text-6xl text-white">album</span>
              </div>
              <p className="text-text-secondary text-sm font-medium">Tapes Online</p>
              <div className="flex items-end gap-2">
                <p className="text-white text-3xl font-bold tracking-tight">{usedSlots}</p>
                <span className="text-text-secondary text-xs font-medium mb-1.5">/ {totalSlots} Slots</span>
              </div>
            </div>

            {/* Stat Card 4 */}
            <div className="flex flex-col gap-1 p-5 rounded-xl border border-border-dark bg-surface-dark relative overflow-hidden group">
              <div className="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <span className="material-symbols-outlined text-6xl text-white">swap_horiz</span>
              </div>
              <p className="text-text-secondary text-sm font-medium">Active Sessions</p>
              <div className="flex items-end gap-2">
                <p className="text-white text-3xl font-bold tracking-tight">
                  {activeTab === 'vtl'
                    ? vtlLibraries.reduce((sum, l) => sum + l.drive_count, 0)
                    : physicalLibraries.reduce((sum, l) => sum + l.drive_count, 0)}
                </p>
                <span className="text-blue-400 text-xs font-medium mb-1.5">Drives</span>
              </div>
            </div>
          </div>

          {/* Usage Progress Section */}
          <div className="p-5 rounded-xl bg-surface-dark border border-border-dark flex flex-col gap-3">
            <div className="flex justify-between items-center">
              <div className="flex items-center gap-2">
                <span className="material-symbols-outlined text-text-secondary">pie_chart</span>
                <h3 className="text-white text-sm font-semibold">VTL Partition Usage (ZFS Pool)</h3>
              </div>
              <p className="text-white text-sm font-medium">
                {formatBytes(usedSlots * 15 * 1024 * 1024 * 1024 * 1024, 1)} /{' '}
                {formatBytes(totalSlots * 15 * 1024 * 1024 * 1024 * 1024, 1)} Used
              </p>
            </div>
            <div className="w-full bg-[#111a22] rounded-full h-3 overflow-hidden">
              <div
                className="bg-gradient-to-r from-blue-600 to-primary h-3 rounded-full"
                style={{ width: `${totalSlots > 0 ? (usedSlots / totalSlots) * 100 : 0}%` }}
              ></div>
            </div>
            <div className="flex justify-between items-center text-xs text-text-secondary">
              <span>
                Compression Ratio: <span className="text-white font-mono">1.5x</span>
              </span>
              <span className="flex items-center gap-1 text-green-400">
                <span className="w-2 h-2 rounded-full bg-green-500"></span> Pool Healthy
              </span>
            </div>
          </div>

          {/* Main Data Table Section */}
          <div className="flex flex-col rounded-xl border border-border-dark bg-surface-dark overflow-hidden">
            {/* Toolbar */}
            <div className="p-4 border-b border-border-dark flex flex-col sm:flex-row gap-4 justify-between items-center bg-[#1c2834]">
              <div className="relative w-full sm:w-96">
                <span className="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary text-lg">
                  search
                </span>
                <input
                  className="w-full bg-[#111a22] border border-border-dark text-white text-sm rounded-lg pl-10 pr-4 py-2 focus:ring-1 focus:ring-primary focus:border-primary placeholder-gray-600 outline-none transition-all"
                  placeholder="Search libraries by name or ID..."
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
              <div className="flex gap-2 w-full sm:w-auto">
                <button className="px-3 py-2 bg-[#111a22] hover:bg-[#1a2632] border border-border-dark rounded-lg text-text-secondary text-sm font-medium flex items-center gap-2 transition-colors">
                  <span className="material-symbols-outlined text-lg">filter_list</span>
                  Filter
                </button>
                <button className="px-3 py-2 bg-[#111a22] hover:bg-[#1a2632] border border-border-dark rounded-lg text-text-secondary text-sm font-medium flex items-center gap-2 transition-colors">
                  <span className="material-symbols-outlined text-lg">settings</span>
                  Columns
                </button>
              </div>
            </div>

            {/* Table */}
            {loadingVTL || loadingPhysical ? (
              <div className="p-12 text-center">
                <p className="text-text-secondary">Loading libraries...</p>
              </div>
            ) : filteredLibraries.length === 0 ? (
              <div className="p-12 text-center">
                <span className="material-symbols-outlined text-6xl text-text-secondary mb-4 block">database</span>
                <h3 className="text-lg font-medium text-white mb-2">
                  No {activeTab === 'vtl' ? 'Virtual' : 'Physical'} Tape Libraries
                </h3>
                <p className="text-sm text-text-secondary mb-4">
                  {activeTab === 'vtl'
                    ? 'Create your first virtual tape library to get started'
                    : 'Discover physical tape libraries connected to the system'}
                </p>
                {activeTab === 'vtl' && (
                  <Link
                    to="/tape/vtl/create"
                    className="inline-flex items-center gap-2 px-4 py-2 bg-primary hover:bg-blue-600 rounded-lg text-white text-sm font-bold"
                  >
                    <span className="material-symbols-outlined text-lg">add</span>
                    Create VTL Library
                  </Link>
                )}
              </div>
            ) : (
              <>
                <div className="overflow-x-auto">
                  <table className="w-full text-left border-collapse">
                    <thead>
                      <tr className="bg-[#151e29] border-b border-border-dark">
                        <th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary w-12">
                          <input
                            className="rounded border-border-dark bg-[#111a22] text-primary focus:ring-offset-background-dark focus:ring-primary h-4 w-4"
                            type="checkbox"
                          />
                        </th>
                        <th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
                          Library Name
                        </th>
                        <th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
                          Status
                        </th>
                        <th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
                          Emulation
                        </th>
                        <th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
                          Tapes / Slots
                        </th>
                        <th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary">
                          iSCSI Target
                        </th>
                        <th className="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-text-secondary text-right">
                          Actions
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-border-dark">
                      {filteredLibraries.map((library) => {
                        const isVTL = activeTab === 'vtl'
                        const libraryId = isVTL ? (library as VirtualTapeLibrary).mhvtl_library_id : library.id
                        const status = library.is_active ? 'Ready' : 'Offline'
                        const statusColor = library.is_active ? 'green' : 'gray'
                        const tapesCount = isVTL && selectedLibrary === library.id ? libraryTapes.length : 0

                        return (
                          <tr
                            key={library.id}
                            className="group hover:bg-[#233342] transition-colors cursor-pointer"
                            onClick={() => isVTL && setSelectedLibrary(selectedLibrary === library.id ? null : library.id)}
                          >
                            <td className="py-4 px-6">
                              <input
                                className="rounded border-border-dark bg-[#111a22] text-primary focus:ring-offset-background-dark focus:ring-primary h-4 w-4"
                                type="checkbox"
                                onClick={(e) => e.stopPropagation()}
                              />
                            </td>
                            <td className="py-4 px-6">
                              <div className="flex items-center gap-3">
                                <div
                                  className={`size-8 rounded flex items-center justify-center ${
                                    library.is_active
                                      ? 'bg-blue-900/30 text-primary'
                                      : 'bg-gray-700/30 text-gray-400'
                                  }`}
                                >
                                  <span className="material-symbols-outlined text-lg">shelves</span>
                                </div>
                                <div>
                                  <p className="text-white text-sm font-bold">{library.name}</p>
                                  <p className="text-text-secondary text-xs">ID: {libraryId}</p>
                                </div>
                              </div>
                            </td>
                            <td className="py-4 px-6">
                              <span
                                className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border ${
                                  statusColor === 'green'
                                    ? 'bg-green-500/10 text-green-400 border-green-500/20'
                                    : 'bg-gray-500/10 text-gray-400 border-gray-500/20'
                                }`}
                              >
                                {statusColor === 'green' && (
                                  <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
                                )}
                                {statusColor === 'gray' && <span className="w-1.5 h-1.5 rounded-full bg-gray-500"></span>}
                                {status}
                              </span>
                            </td>
                            <td className="py-4 px-6">
                              <p className="text-white text-sm font-medium">
                                {isVTL 
                                  ? (library as VirtualTapeLibrary).vendor || 'MHVTL'
                                  : 'physical' in library 
                                    ? (library as PhysicalTapeLibrary).vendor 
                                    : 'N/A'}
                              </p>
                              <p className="text-text-secondary text-xs">
                                LTO-8 • {library.drive_count} {library.drive_count === 1 ? 'Drive' : 'Drives'}
                              </p>
                            </td>
                            <td className="py-4 px-6">
                              <div className="flex items-center gap-2">
                                <span className="material-symbols-outlined text-text-secondary text-lg">album</span>
                                <span className="text-white text-sm">
                                  {tapesCount || 0} / {library.slot_count}
                                </span>
                              </div>
                              <div className="w-24 bg-[#111a22] rounded-full h-1 mt-1.5">
                                <div
                                  className={`h-1 rounded-full ${
                                    library.is_active ? 'bg-primary' : 'bg-gray-500'
                                  }`}
                                  style={{
                                    width: `${library.slot_count > 0 ? ((tapesCount || 0) / library.slot_count) * 100 : 0}%`,
                                  }}
                                ></div>
                              </div>
                            </td>
                            <td className="py-4 px-6">
                              <div className="flex items-center gap-2 group/copy cursor-pointer">
                                <code className="text-xs text-text-secondary font-mono bg-[#111a22] px-2 py-1 rounded border border-border-dark group-hover/copy:text-white transition-colors">
                                  iqn.2023-10.com.vtl:{library.name.toLowerCase().replace(/\s+/g, '')}
                                </code>
                                <span className="material-symbols-outlined text-text-secondary text-sm opacity-0 group-hover/copy:opacity-100 transition-opacity">
                                  content_copy
                                </span>
                              </div>
                            </td>
                            <td className="py-4 px-6 text-right">
                              <div className="flex items-center justify-end gap-1">
                                <Link
                                  to={isVTL ? `/tape/vtl/${library.id}` : `/tape/physical/${library.id}`}
                                  className="p-2 text-text-secondary hover:text-white hover:bg-[#324d67] rounded-lg transition-colors"
                                  title="Manage Tapes"
                                  onClick={(e) => e.stopPropagation()}
                                >
                                  <span className="material-symbols-outlined text-xl">cable</span>
                                </Link>
                                <button
                                  className="p-2 text-text-secondary hover:text-primary hover:bg-primary/10 rounded-lg transition-colors"
                                  title="Edit Configuration"
                                  onClick={(e) => e.stopPropagation()}
                                >
                                  <span className="material-symbols-outlined text-xl">edit</span>
                                </button>
                                <button
                                  className="p-2 text-text-secondary hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors"
                                  title="Delete Library"
                                  onClick={(e) => e.stopPropagation()}
                                >
                                  <span className="material-symbols-outlined text-xl">delete</span>
                                </button>
                              </div>
                            </td>
                          </tr>
                        )
                      })}
                    </tbody>
                  </table>
                </div>

                {/* Pagination */}
                <div className="px-6 py-4 border-t border-border-dark flex items-center justify-between bg-[#1c2834]">
                  <p className="text-text-secondary text-sm">
                    Showing <span className="text-white font-medium">1-{filteredLibraries.length}</span> of{' '}
                    <span className="text-white font-medium">{filteredLibraries.length}</span> libraries
                  </p>
                  <div className="flex gap-2">
                    <button
                      className="px-3 py-1.5 rounded-lg border border-border-dark bg-[#111a22] text-text-secondary text-sm hover:text-white disabled:opacity-50"
                      disabled
                    >
                      Previous
                    </button>
                    <button
                      className="px-3 py-1.5 rounded-lg border border-border-dark bg-[#111a22] text-text-secondary text-sm hover:text-white disabled:opacity-50"
                      disabled
                    >
                      Next
                    </button>
                  </div>
                </div>
              </>
            )}
          </div>
        </div>
      </div>

      {/* Tape Detail Drawer */}
      {selectedLibrary && activeTab === 'vtl' && (
        <div className="bg-surface-dark border-t border-border-dark p-6 absolute bottom-0 w-full transform translate-y-0 transition-transform z-30 shadow-2xl shadow-black max-h-[70vh] overflow-y-auto">
          <div className="max-w-[1400px] mx-auto">
            <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
              <div className="flex items-center gap-3">
                <span className="material-symbols-outlined text-primary text-2xl">cable</span>
                <div>
                  <h3 className="text-white text-lg font-bold">
                    Tape Management: {vtlLibraries.find((l) => l.id === selectedLibrary)?.name}
                  </h3>
                  <p className="text-text-secondary text-sm">
                    Manage virtual cartridges, import/export slots, and barcodes.
                  </p>
                </div>
              </div>
              <div className="flex gap-3 flex-wrap">
                <button className="px-3 py-2 bg-[#111a22] border border-border-dark rounded-lg text-text-secondary hover:text-white text-sm font-medium transition-colors">
                  Bulk Format
                </button>
                <Link
                  to={`/tape/vtl/${selectedLibrary}/tapes/create`}
                  className="px-3 py-2 bg-primary hover:bg-blue-600 rounded-lg text-white text-sm font-bold transition-colors flex items-center gap-2"
                >
                  <span className="material-symbols-outlined text-lg">add</span>
                  Add Tapes
                </Link>
                <button
                  onClick={() => setSelectedLibrary(null)}
                  className="p-2 text-text-secondary hover:text-white"
                >
                  <span className="material-symbols-outlined">close</span>
                </button>
              </div>
            </div>
            
            {libraryTapes.length === 0 ? (
              <div className="text-center py-12">
                <span className="material-symbols-outlined text-6xl text-text-secondary mb-4 block">album</span>
                <h3 className="text-lg font-medium text-white mb-2">No Tapes Found</h3>
                <p className="text-sm text-text-secondary mb-4">
                  This library has no tapes yet. Create tapes to get started.
                </p>
                <Link
                  to={`/tape/vtl/${selectedLibrary}/tapes/create`}
                  className="inline-flex items-center gap-2 px-4 py-2 bg-primary hover:bg-blue-600 rounded-lg text-white text-sm font-bold"
                >
                  <span className="material-symbols-outlined text-lg">add</span>
                  Add Tapes
                </Link>
              </div>
            ) : (
              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-3">
                {libraryTapes.map((tape) => (
                  <div
                    key={tape.id}
                    className={`p-3 rounded-lg border flex flex-col gap-2 relative group hover:border-primary transition-all cursor-pointer min-h-[120px] ${
                      tape.status === 'in_drive'
                        ? 'bg-[#111a22] border-green-500/30 shadow-lg shadow-green-500/10'
                        : 'bg-[#111a22] border-border-dark hover:shadow-lg hover:shadow-primary/10'
                    }`}
                  >
                    <div className="flex justify-between items-start">
                      <span
                        className={`material-symbols-outlined text-xl ${
                          tape.status === 'in_drive' ? 'text-green-500' : 'text-text-secondary'
                        }`}
                      >
                        album
                      </span>
                      <span className="text-[10px] uppercase font-bold text-text-secondary bg-[#1c2834] px-1.5 py-0.5 rounded">
                        SLOT {tape.slot_number}
                      </span>
                    </div>
                    <div className="flex-1 flex flex-col justify-center">
                      <p className="text-white text-xs font-mono font-bold truncate" title={tape.barcode}>
                        {tape.barcode}
                      </p>
                      <p className="text-text-secondary text-[10px] mt-1">
                        {formatBytes(tape.size_bytes, 1)} / {formatBytes(tape.size_bytes, 1)}
                      </p>
                    </div>
                    <div className="absolute inset-0 bg-black/70 hidden group-hover:flex items-center justify-center gap-2 backdrop-blur-sm rounded-lg">
                      <button className="p-2 text-white hover:text-primary hover:bg-primary/20 rounded transition-colors" title="Eject">
                        <span className="material-symbols-outlined text-lg">eject</span>
                      </button>
                      <button className="p-2 text-white hover:text-red-400 hover:bg-red-400/20 rounded transition-colors" title="Delete">
                        <span className="material-symbols-outlined text-lg">delete</span>
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  )
}