<script>
  import { onMount } from "svelte";
  import { getCcConnectHealth, startCcConnect, stopCcConnect } from "../lib/api.js";

  let loading = $state(true);
  let health = $state(null);
  let requestError = $state("");
  let actionLoading = $state("");

  async function loadHealth() {
    loading = true;
    requestError = "";
    try {
      health = await getCcConnectHealth();
    } catch (e) {
      requestError = e?.body?.detail || e?.message || "Failed to load cc-connect health";
      health = null;
    } finally {
      loading = false;
    }
  }

  async function runAction(action) {
    actionLoading = action;
    requestError = "";
    try {
      const result = action === "start" ? await startCcConnect() : await stopCcConnect();
      if (!result?.ok) {
        requestError = result?.error || `Failed to ${action} cc-connect`;
      }
    } catch (e) {
      requestError = e?.body?.detail || e?.message || `Failed to ${action} cc-connect`;
    } finally {
      actionLoading = "";
      await loadHealth();
    }
  }

  function statusBadgeClass(status) {
    if (status === "up") {
      return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300";
    }
    return "bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300";
  }

  function valueOrDash(value) {
    return value === null || value === undefined || value === "" ? "—" : value;
  }

  onMount(loadHealth);
</script>

<div class="space-y-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">cc-connect</h1>
      <p class="text-sm text-surface-400 mt-1">Mobile bridge operational status</p>
      <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] font-medium">
        <span class="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">up</span>
        <span class="px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">down</span>
      </div>
    </div>
    <div class="flex items-center gap-2">
      {#if health?.container_status === "running"}
        <button
          onclick={() => runAction("stop")}
          disabled={loading || actionLoading === "stop"}
          class="px-3 py-1.5 text-xs font-medium text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-colors disabled:opacity-50"
        >
          {actionLoading === "stop" ? "Stopping..." : "Stop"}
        </button>
      {:else}
        <button
          onclick={() => runAction("start")}
          disabled={loading || actionLoading === "start"}
          class="px-3 py-1.5 text-xs font-medium text-emerald-600 bg-emerald-50 hover:bg-emerald-100 rounded-lg transition-colors disabled:opacity-50"
        >
          {actionLoading === "start" ? "Starting..." : "Start"}
        </button>
      {/if}
      <button onclick={loadHealth} disabled={loading || Boolean(actionLoading)} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50 dark:bg-primary-900/30 dark:text-primary-300">
        {loading ? "Loading..." : "Refresh"}
      </button>
    </div>
  </div>

  {#if requestError}
    <div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 rounded-xl p-4 shadow-sm">
      <p class="text-sm font-medium text-rose-700 dark:text-rose-300">cc-connect action failed</p>
      <p class="text-xs text-rose-600 dark:text-rose-400 mt-1">{requestError}</p>
    </div>
  {/if}

  <div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
    {#if loading && !health}
      <div class="space-y-3">
        <div class="h-6 w-36 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
          {#each Array(8) as _}
            <div class="h-16 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
          {/each}
        </div>
      </div>
    {:else if health}
      <div class="flex items-center justify-between mb-4">
        <h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Health Status</h3>
        <span class="px-2.5 py-1 text-xs font-semibold rounded-full {statusBadgeClass(health.status)}">{valueOrDash(health.status)}</span>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">OK</p>
          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{String(Boolean(health.ok))}</p>
        </div>

        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Source</p>
          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.source)}</p>
        </div>

        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Container</p>
          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_name)}</p>
        </div>

        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Container Status</p>
          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_status)}</p>
        </div>

        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Endpoint</p>
          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.endpoint)}</p>
        </div>

        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">HTTP Status</p>
          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.http_status)}</p>
        </div>

        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Latency</p>
          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{health.latency_ms === null || health.latency_ms === undefined ? "—" : `${health.latency_ms} ms`}</p>
        </div>

        <div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3 sm:col-span-2 lg:col-span-2">
          <p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Error</p>
          <p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.error)}</p>
        </div>
      </div>
    {:else}
      <p class="text-sm text-surface-400">No health data available.</p>
    {/if}
  </div>
</div>
