<script>
  import { onMount, onDestroy } from "svelte";
  import { get, post } from "../../lib/api.js";

  let status = $state(null);
  let torrents = $state([]);
  let trackers = $state([]);
  let stats = $state(null);
  let loading = $state(true);
  let selectedTab = $state("torrents");

  async function load() {
    try {
      const [statusData, torrentsData, trackersData, statsData] = await Promise.all([
        get("/transmission/status").catch(() => null),
        get("/transmission/torrents").catch(() => ({ torrents: [] })),
        get("/transmission/trackers").catch(() => ({ trackers: [] })),
        get("/transmission/stats").catch(() => null),
      ]);

      status = statusData;
      torrents = torrentsData?.torrents || [];
      trackers = trackersData?.trackers || [];
      stats = statsData;
      loading = false;
    } catch (e) {
      console.error("Failed to load transmission data:", e);
      loading = false;
    }
  }

  async function reannounce(torrentId) {
    try {
      await post(`/transmission/reannounce/${torrentId}`);
      await load();
    } catch (e) {
      alert("Failed to reannounce: " + e.message);
    }
  }

  async function startTorrent(torrentId) {
    try {
      await post(`/transmission/start/${torrentId}`);
      await load();
    } catch (e) {
      alert("Failed to start: " + e.message);
    }
  }

  async function stopTorrent(torrentId) {
    try {
      await post(`/transmission/stop/${torrentId}`);
      await load();
    } catch (e) {
      alert("Failed to stop: " + e.message);
    }
  }

  function fmtBytes(b) {
    if (!b) return "0 B";
    const u = ["B", "KB", "MB", "GB", "TB"];
    const i = Math.floor(Math.log(b) / Math.log(1024));
    return (b / Math.pow(1024, i)).toFixed(1) + " " + u[i];
  }

  function fmtSpeed(bytesPerSec) {
    return fmtBytes(bytesPerSec) + "/s";
  }

  function statusText(status) {
    const statusMap = {
      0: "Stopped",
      1: "Check waiting",
      2: "Checking",
      3: "Download waiting",
      4: "Downloading",
      5: "Seed waiting",
      6: "Seeding"
    };
    return statusMap[status] || "Unknown";
  }

  let interval;
  onMount(() => { load(); interval = setInterval(load, 10000); });
  onDestroy(() => clearInterval(interval));
</script>

<div class="space-y-6">
  <div>
    <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Transmission</h1>
    <p class="text-sm text-surface-400 mt-1">BitTorrent client status and management</p>
  </div>

  {#if loading}
    <div class="h-[400px] rounded-xl bg-surface-100 dark:bg-surface-800 animate-pulse"></div>
  {:else}
    <!-- Status Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <!-- Daemon Status -->
      <div class="rounded-xl bg-white dark:bg-surface-800 p-6 border border-surface-200 dark:border-surface-700">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-surface-500 dark:text-surface-400">Daemon</p>
            <p class="text-2xl font-bold mt-1 {status?.running ? 'text-emerald-500' : 'text-rose-500'}">
              {status?.running ? 'Running' : 'Stopped'}
            </p>
          </div>
          <div class="w-12 h-12 rounded-full {status?.running ? 'bg-emerald-100 dark:bg-emerald-900/30' : 'bg-rose-100 dark:bg-rose-900/30'} flex items-center justify-center">
            <svg class="w-6 h-6 {status?.running ? 'text-emerald-500' : 'text-rose-500'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
        </div>
      </div>

      <!-- Active Torrents -->
      <div class="rounded-xl bg-white dark:bg-surface-800 p-6 border border-surface-200 dark:border-surface-700">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-surface-500 dark:text-surface-400">Active Torrents</p>
            <p class="text-2xl font-bold mt-1 text-surface-900 dark:text-white">
              {torrents.filter(t => t.status === 4 || t.status === 6).length}
            </p>
          </div>
          <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path>
            </svg>
          </div>
        </div>
      </div>

      <!-- Download Speed -->
      <div class="rounded-xl bg-white dark:bg-surface-800 p-6 border border-surface-200 dark:border-surface-700">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-surface-500 dark:text-surface-400">Download</p>
            <p class="text-2xl font-bold mt-1 text-surface-900 dark:text-white">
              {fmtSpeed(torrents.reduce((sum, t) => sum + (t.rateDownload || 0), 0))}
            </p>
          </div>
          <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
            <svg class="w-6 h-6 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
          </div>
        </div>
      </div>

      <!-- Upload Speed -->
      <div class="rounded-xl bg-white dark:bg-surface-800 p-6 border border-surface-200 dark:border-surface-700">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-surface-500 dark:text-surface-400">Upload</p>
            <p class="text-2xl font-bold mt-1 text-surface-900 dark:text-white">
              {fmtSpeed(torrents.reduce((sum, t) => sum + (t.rateUpload || 0), 0))}
            </p>
          </div>
          <div class="w-12 h-12 rounded-full bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center">
            <svg class="w-6 h-6 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- Tabs -->
    <div class="border-b border-surface-200 dark:border-surface-700">
      <nav class="-mb-px flex space-x-8">
        <button
          onclick={() => selectedTab = "torrents"}
          class="py-4 px-1 border-b-2 font-medium text-sm {selectedTab === 'torrents' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-surface-500 hover:text-surface-700 hover:border-surface-300 dark:text-surface-400 dark:hover:text-surface-300'}"
        >
          Torrents ({torrents.length})
        </button>
        <button
          onclick={() => selectedTab = "trackers"}
          class="py-4 px-1 border-b-2 font-medium text-sm {selectedTab === 'trackers' ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-surface-500 hover:text-surface-700 hover:border-surface-300 dark:text-surface-400 dark:hover:text-surface-300'}"
        >
          Trackers ({trackers.length})
        </button>
      </nav>
    </div>

    <!-- Content -->
    {#if selectedTab === "torrents"}
      <div class="rounded-xl bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 overflow-hidden">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-surface-50 dark:bg-surface-900/50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Name</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Status</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Progress</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Down</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Up</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Ratio</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Tracker</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Actions</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-surface-200 dark:divide-surface-700">
              {#each torrents as torrent}
                <tr class="hover:bg-surface-50 dark:hover:bg-surface-900/30">
                  <td class="px-6 py-4 text-sm text-surface-900 dark:text-white max-w-md truncate">{torrent.name}</td>
                  <td class="px-6 py-4 text-sm">
                    <span class="px-2 py-1 rounded-full text-xs font-medium {torrent.status === 4 || torrent.status === 6 ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' : 'bg-surface-100 text-surface-700 dark:bg-surface-700 dark:text-surface-300'}">
                      {statusText(torrent.status)}
                    </span>
                  </td>
                  <td class="px-6 py-4 text-sm text-surface-500 dark:text-surface-400">{(torrent.percentDone * 100).toFixed(1)}%</td>
                  <td class="px-6 py-4 text-sm text-surface-500 dark:text-surface-400">{fmtSpeed(torrent.rateDownload)}</td>
                  <td class="px-6 py-4 text-sm text-surface-500 dark:text-surface-400">{fmtSpeed(torrent.rateUpload)}</td>
                  <td class="px-6 py-4 text-sm text-surface-500 dark:text-surface-400">{torrent.uploadRatio?.toFixed(2) || '0.00'}</td>
                  <td class="px-6 py-4 text-sm">
                    {#if torrent.hasTrackerErrors}
                      <span class="text-rose-500 flex items-center gap-1">
                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                        </svg>
                        Error
                      </span>
                    {:else}
                      <span class="text-emerald-500">OK</span>
                    {/if}
                  </td>
                  <td class="px-6 py-4 text-sm">
                    <button
                      onclick={() => reannounce(torrent.id)}
                      class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                      title="Reannounce to tracker"
                    >
                      Reannounce
                    </button>
                  </td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </div>
    {:else if selectedTab === "trackers"}
      <div class="rounded-xl bg-white dark:bg-surface-800 border border-surface-200 dark:border-surface-700 overflow-hidden">
        <div class="overflow-x-auto">
          <table class="w-full">
            <thead class="bg-surface-50 dark:bg-surface-900/50">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Tracker</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Total Torrents</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Errors</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Status</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-surface-500 dark:text-surface-400 uppercase tracking-wider">Last Error</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-surface-200 dark:divide-surface-700">
              {#each trackers as tracker}
                <tr class="hover:bg-surface-50 dark:hover:bg-surface-900/30">
                  <td class="px-6 py-4 text-sm font-medium text-surface-900 dark:text-white">{tracker.host}</td>
                  <td class="px-6 py-4 text-sm text-surface-500 dark:text-surface-400">{tracker.total}</td>
                  <td class="px-6 py-4 text-sm text-surface-500 dark:text-surface-400">{tracker.errors}</td>
                  <td class="px-6 py-4 text-sm">
                    {#if tracker.errors > 0}
                      <span class="px-2 py-1 rounded-full text-xs font-medium bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400">
                        Error
                      </span>
                    {:else}
                      <span class="px-2 py-1 rounded-full text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
                        OK
                      </span>
                    {/if}
                  </td>
                  <td class="px-6 py-4 text-sm text-surface-500 dark:text-surface-400">{tracker.lastError || '-'}</td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>
      </div>
    {/if}
  {/if}
</div>
