import { useState } from 'react';
import { Loader2, X } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { statusLabel, statusTone, TONE_CLASSES } from './format';
import { useTorrentDetail } from './useTransmissionData';
import { GeneralTab } from './detail/GeneralTab';
import { FilesTab } from './detail/FilesTab';
import { PeersTab } from './detail/PeersTab';
import { TrackersTab } from './detail/TrackersTab';
import { TrackersDialog } from './dialogs/TrackersDialog';

// The bottom pane of the torrents section, driven by ?selected= in the URL.
//
// It fetches its own torrent rather than being handed the row from the list: the list poll deliberately
// omits files, peers and peersFrom, and threading two shapes of the same object through the tree is how
// you end up rendering a stale peer list.

type TorrentDetailProps = { id: number; onClose: () => void };

export const TorrentDetail = ({ id, onClose }: TorrentDetailProps) => {
  const { torrent, isLoading } = useTorrentDetail(id);
  const [editingTrackers, setEditingTrackers] = useState(false);

  if (isLoading && !torrent) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
        Loading…
      </div>
    );
  }

  if (!torrent) {
    return (
      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">That torrent is gone.</div>
    );
  }

  const tone = TONE_CLASSES[statusTone(torrent)];

  return (
    <div className="flex h-full min-h-0 flex-col border-t border-border">
      <div className="flex items-center gap-2 border-b border-border px-3 py-2">
        <span className={`h-2 w-2 shrink-0 rounded-full ${tone.dot}`} />
        <span className="min-w-0 flex-1 truncate text-sm font-medium" title={torrent.name}>
          {torrent.name}
        </span>
        <span className={`shrink-0 text-xs ${tone.text}`}>{statusLabel(torrent)}</span>
        <button
          type="button"
          onClick={onClose}
          className="shrink-0 text-muted-foreground hover:text-foreground"
          aria-label="Close details"
        >
          <X className="h-4 w-4" />
        </button>
      </div>

      <Tabs defaultValue="general" className="flex min-h-0 flex-1 flex-col">
        <TabsList className="mx-3 mt-2 w-fit shrink-0">
          <TabsTrigger value="general">General</TabsTrigger>
          <TabsTrigger value="files">Files{torrent.files ? ` (${torrent.files.length})` : ''}</TabsTrigger>
          <TabsTrigger value="peers">Peers{torrent.peers ? ` (${torrent.peers.length})` : ''}</TabsTrigger>
          <TabsTrigger value="trackers">
            Trackers{torrent.trackerStats ? ` (${torrent.trackerStats.length})` : ''}
          </TabsTrigger>
        </TabsList>

        {/* mt-0 undoes the Tabs default spacing; these panes own their own scrolling. */}
        <TabsContent value="general" className="mt-0 min-h-0 flex-1 overflow-auto">
          <GeneralTab torrent={torrent} />
        </TabsContent>
        <TabsContent value="files" className="mt-0 min-h-0 flex-1">
          <FilesTab torrent={torrent} />
        </TabsContent>
        <TabsContent value="peers" className="mt-0 min-h-0 flex-1">
          <PeersTab torrent={torrent} />
        </TabsContent>
        <TabsContent value="trackers" className="mt-0 min-h-0 flex-1">
          <TrackersTab torrent={torrent} onEdit={() => setEditingTrackers(true)} />
        </TabsContent>
      </Tabs>

      <TrackersDialog open={editingTrackers} onOpenChange={setEditingTrackers} torrent={torrent} />
    </div>
  );
};