transmission/web/detail/TrackersTab.tsx

import type { Torrent } from '../shared';
import { CircleAlert, CircleCheck, Pencil, RefreshCw } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { formatDate } from '../format';
import { useTorrentMutations } from '../useTransmissionData';

// One card per tracker, grouped by tier. The point of this tab is diagnosing a torrent that isn't finding
// peers, so the failure text gets as much room as the success numbers.

type TrackersTabProps = { torrent: Torrent; onEdit: () => void };

export const TrackersTab = ({ torrent, onEdit }: TrackersTabProps) => {
  const { act } = useTorrentMutations();
  const trackers = torrent.trackerStats ?? [];

  const tiers = new Map<number, typeof trackers>();
  for (const tracker of trackers) {
    tiers.set(tracker.tier, [...(tiers.get(tracker.tier) ?? []), tracker]);
  }

  return (
    <div className="h-full overflow-auto">
      <div className="flex items-center gap-2 border-b border-border px-3 py-2">
        <span className="flex-1 text-xs text-muted-foreground">
          {trackers.length} tracker{trackers.length === 1 ? '' : 's'} in {tiers.size} tier
          {tiers.size === 1 ? '' : 's'}
        </span>
        <Button size="sm" variant="ghost" onClick={() => act.mutate({ ids: [torrent.id], action: 'reannounce' })}>
          <RefreshCw className="mr-1.5 h-3 w-3" />
          Reannounce
        </Button>
        <Button size="sm" variant="ghost" onClick={onEdit}>
          <Pencil className="mr-1.5 h-3 w-3" />
          Edit
        </Button>
      </div>

      {trackers.length === 0 && (
        <p className="p-6 text-center text-sm text-muted-foreground">
          No trackers. This torrent relies on DHT and peer exchange.
        </p>
      )}

      <div className="space-y-4 p-3">
        {[...tiers.entries()]
          .sort((a, b) => a[0] - b[0])
          .map(([tier, list]) => (
            <section key={tier}>
              <h3 className="mb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                Tier {tier + 1}
              </h3>
              <div className="space-y-2">
                {list.map((tracker) => (
                  <div key={tracker.id} className="rounded-lg border border-border p-3 text-xs">
                    <div className="flex items-start gap-2">
                      {tracker.lastAnnounceSucceeded ? (
                        <CircleCheck className="mt-0.5 h-3.5 w-3.5 shrink-0 text-success" />
                      ) : (
                        <CircleAlert className="mt-0.5 h-3.5 w-3.5 shrink-0 text-warning" />
                      )}
                      <div className="min-w-0 flex-1">
                        <div className="break-all font-mono">{tracker.announce}</div>
                        {tracker.isBackup && (
                          <div className="mt-0.5 text-muted-foreground">
                            Backup — only tried if the tier above fails entirely.
                          </div>
                        )}
                      </div>
                      <div className="shrink-0 text-right tabular-nums text-muted-foreground">
                        {tracker.seederCount >= 0 ? `${tracker.seederCount} seeds` : 'seeds unknown'}
                        <br />
                        {tracker.leecherCount >= 0 ? `${tracker.leecherCount} peers` : 'peers unknown'}
                      </div>
                    </div>

                    <dl className="mt-2 grid grid-cols-1 gap-x-6 gap-y-1 sm:grid-cols-2">
                      <Row label="Last announce" value={formatDate(tracker.lastAnnounceTime)} />
                      <Row
                        label="Result"
                        value={tracker.lastAnnounceResult || '—'}
                        tone={tracker.lastAnnounceSucceeded ? undefined : 'text-warning'}
                      />
                      <Row label="Next announce" value={formatDate(tracker.nextAnnounceTime)} />
                      <Row label="Peers returned" value={String(tracker.lastAnnouncePeerCount)} />
                      <Row label="Last scrape" value={formatDate(tracker.lastScrapeTime)} />
                      <Row
                        label="Scrape result"
                        value={tracker.lastScrapeResult || '—'}
                        tone={tracker.lastScrapeSucceeded ? undefined : 'text-warning'}
                      />
                    </dl>
                  </div>
                ))}
              </div>
            </section>
          ))}
      </div>
    </div>
  );
};

const Row = ({ label, value, tone }: { label: string; value: string; tone?: string }) => (
  <div className="flex min-w-0 items-baseline gap-2">
    <dt className="w-28 shrink-0 text-muted-foreground">{label}</dt>
    <dd className={`min-w-0 flex-1 break-words ${tone ?? ''}`}>{value}</dd>
  </div>
);