<script>
  import { onMount, onDestroy } from "svelte";
  import { VoiceSession } from "../lib/voice.js";
  import { tryRefreshSession } from "../lib/api.js";

  const PERSISTENCE_STATUS_PREFIX = "__DASHBOARD_PERSISTENCE__:";
  const PERSISTENCE_STATUS_PREFIX_BYTES = new TextEncoder().encode(PERSISTENCE_STATUS_PREFIX);

  const hosts = [
    { id: "nas", label: "NAS" },
    { id: "vps", label: "VPS" },
    { id: "caddy-vps", label: "Caddy VPS" },
    { id: "mac", label: "Mac" },
    { id: "claude-dev", label: "Claude Dev", persistent: true },
  ];

  const DARK_THEME = {
    background: "#0f172a", foreground: "#e2e8f0", cursor: "#6366f1",
    cursorAccent: "#0f172a", selectionBackground: "#334155",
    black: "#0f172a", red: "#f43f5e", green: "#10b981",
    yellow: "#f59e0b", blue: "#3b82f6", magenta: "#a855f7",
    cyan: "#06b6d4", white: "#e2e8f0",
  };

  const LIGHT_THEME = {
    background: "#f8fafc", foreground: "#0f172a", cursor: "#4f46e5",
    cursorAccent: "#f8fafc", selectionBackground: "#cbd5e1",
    black: "#0f172a", red: "#e11d48", green: "#059669",
    yellow: "#d97706", blue: "#2563eb", magenta: "#9333ea",
    cyan: "#0891b2", white: "#334155",
  };

  let tabs = $state([]);
  let activeTab = $state(null);
  let showMenu = $state(false);
  let voiceTick = $state(0);
  let isDark = $state(false);
  let isFullscreen = $state(false);
  let showActionButtons = $state(false);
  let tabCounter = 0;
  const tabData = new Map();

  function currentTheme() {
    return isDark ? DARK_THEME : LIGHT_THEME;
  }

  function hostById(hostId) {
    return hosts.find((h) => h.id === hostId);
  }

  function openFreshSession(tab) {
    const url = new URL(window.location.href);
    url.searchParams.set("page", "terminal");
    url.searchParams.set("host", tab.hostId);
    window.open(`${url.pathname}${url.search}${url.hash}`, "_blank", "noopener");
  }

  function persistenceLabel(status, reconnecting) {
    if (status === "created") return "created new persistent session";
    if (reconnecting) return "reattached to persistent session";
    return "attached to persistent session";
  }

  function applyThemeToTerminals() {
    const theme = currentTheme();
    tabData.forEach((d) => {
      d.term?.options && (d.term.options.theme = theme);
    });
  }

  function syncTheme() {
    isDark = document.documentElement.classList.contains("dark");
    applyThemeToTerminals();
  }

  const themeObserver = new MutationObserver((mutations) => {
    if (mutations.some((m) => m.attributeName === "class")) syncTheme();
  });
  onMount(() => {
    syncTheme();
    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    const requestedHost = new URLSearchParams(window.location.search).get("host");
    if (requestedHost && !tabs.length && hostById(requestedHost)) addTab(requestedHost);
  });

  function cleanName(name) {
    return (name || "image")
      .replace(/[^a-zA-Z0-9._-]/g, "-")
      .replace(/-+/g, "-")
      .replace(/^-|-$/g, "") || "image";
  }

  function extensionFor(type) {
    if (type === "image/png") return "png";
    if (type === "image/jpeg") return "jpg";
    if (type === "image/webp") return "webp";
    if (type === "image/gif") return "gif";
    return "bin";
  }

  async function fileToBase64(file) {
    const buf = await file.arrayBuffer();
    let binary = "";
    const bytes = new Uint8Array(buf);
    const chunkSize = 0x8000;
    for (let i = 0; i < bytes.length; i += chunkSize) {
      binary += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
    }
    return btoa(binary);
  }

  async function sendDroppedImage(term, ws, file) {
    if (!file?.type?.startsWith("image/")) return;
    if (ws.readyState !== 1) return;

    const ext = extensionFor(file.type);
    const baseName = cleanName(file.name).replace(/\.[a-zA-Z0-9]+$/, "");
    const stamp = Date.now();
    const imagePath = `/tmp/claude-images/${baseName || "image"}-${stamp}.${ext}`;
    const b64 = await fileToBase64(file);

    const cmd = [
      "python3 - <<'PY'",
      "import base64, pathlib",
      `p = pathlib.Path(${JSON.stringify(imagePath)})`,
      "p.parent.mkdir(parents=True, exist_ok=True)",
      `p.write_bytes(base64.b64decode(${JSON.stringify(b64)}))`,
      `print(f'saved image -> {p}')`,
      "PY",
      "",
    ].join("\n");

    ws.send(new TextEncoder().encode(cmd));
    term.write(`\r\n\x1b[90m[Uploaded image to ${imagePath}]\x1b[0m\r\n`);
  }

  function addTab(hostId) {
    const id = ++tabCounter;
    const host = hostById(hostId);
    tabs = [...tabs, {
      id,
      hostId,
      label: host.label,
      connected: false,
      error: "",
      statusBanner: host.persistent ? "Connecting to persistent session..." : "",
      persistent: !!host.persistent,
    }];
    activeTab = id;
    showMenu = false;
  }

  function closeTab(id) {
    const d = tabData.get(id);
    if (d) {
      d.closedManually = true;
      if (d.reconnectTimer) clearTimeout(d.reconnectTimer);
      d.voice?.destroy();
      d.ro?.disconnect();
      if (d.heartbeat) clearInterval(d.heartbeat);
      d.term?.element?.removeEventListener("dragover", d.handleDragOver);
      d.term?.element?.removeEventListener("drop", d.handleDrop);
      d.term?.textarea?.removeEventListener("paste", d.handlePaste);
      d.ws?.close();
      d.term?.dispose();
      tabData.delete(id);
    }
    tabs = tabs.filter((t) => t.id !== id);
    if (activeTab === id) activeTab = tabs.length ? tabs[tabs.length - 1].id : null;
  }

  function updateTab(tabId, props) {
    tabs = tabs.map((t) => (t.id === tabId ? { ...t, ...props } : t));
  }

  function initTerminal(el, tab) {
    const tabId = tab.id;
    (async () => {
      const { Terminal } = await import("@xterm/xterm");
      const { FitAddon } = await import("@xterm/addon-fit");
      await import("@xterm/xterm/css/xterm.css");
      const term = new Terminal({
        cursorBlink: true, fontSize: 13,
        fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', monospace",
        lineHeight: 1.4,
        theme: currentTheme(),
      });
      const fit = new FitAddon();
      term.loadAddon(fit);
      term.open(el);
      fit.fit();

      const proto = location.protocol === "https:" ? "wss:" : "ws:";
      let heartbeat = null;
      let pongTimeout = null;
      let reconnectTimer = null;
      let closedManually = false;
      let reconnecting = false;
      let authRecoveryInFlight = false;
      let reconnectAttempts = 0;
      let consecutiveAuthFailures = 0;
      const MAX_RECONNECT_DELAY = 30000;
      const MAX_AUTH_FAILURES = 3;
      const PING_INTERVAL = 30000; // 30s between pings
      const PONG_TIMEOUT = 10000; // 10s to receive pong

      function clearHeartbeat() {
        if (heartbeat) {
          clearInterval(heartbeat);
          heartbeat = null;
        }
        if (pongTimeout) {
          clearTimeout(pongTimeout);
          pongTimeout = null;
        }
      }

      function handleAuthExpired(reason = "Session expired — please log in again") {
        clearHeartbeat();
        if (reconnectTimer) {
          clearTimeout(reconnectTimer);
          reconnectTimer = null;
        }
        reconnecting = false;
        updateTab(tabId, {
          connected: false,
          error: reason,
          statusBanner: "",
        });
        term.write(`\r\n\x1b[90m[${reason}]\x1b[0m`);
        const d = tabData.get(tabId);
        if (d) {
          d.ws = null;
          d.heartbeat = heartbeat;
          d.reconnectTimer = reconnectTimer;
          d.closedManually = closedManually;
          d.reconnecting = reconnecting;
        }
      }

      function scheduleReconnect(reason) {
        clearHeartbeat();
        if (closedManually || reconnectTimer) return;
        reconnecting = true;
        reconnectAttempts++;
        const delay = Math.min(1000 * Math.pow(2, reconnectAttempts - 1), MAX_RECONNECT_DELAY);
        updateTab(tabId, {
          connected: false,
          error: `${reason} — reconnecting in ${Math.round(delay / 1000)}s (attempt ${reconnectAttempts})...`,
          statusBanner: tab.persistent ? "Reconnecting to persistent session..." : "",
        });
        term.write(`\r\n\x1b[90m[${reason} — reconnecting in ${Math.round(delay / 1000)}s...]\x1b[0m`);
        reconnectTimer = setTimeout(() => {
          reconnectTimer = null;
          if (!tabData.has(tabId) || closedManually) return;
          connect(true);
        }, delay);
      }

      function sendSize(ws) {
        if (ws.readyState === 1) {
          const buf = new Uint8Array(5);
          buf[0] = 0x01;
          new DataView(buf.buffer).setUint16(1, term.cols);
          new DataView(buf.buffer).setUint16(3, term.rows);
          ws.send(buf);
        }
      }

      async function connect(forceRefresh = false) {
        let d = tabData.get(tabId);

        if (forceRefresh) {
          const refreshed = await tryRefreshSession();
          if (!refreshed) {
            handleAuthExpired();
            return null;
          }
        }

        const ws = new WebSocket(
          `${proto}//${location.host}/ws/terminal?host=${encodeURIComponent(tab.hostId)}`
        );
        ws.binaryType = "arraybuffer";

        ws.onopen = () => {
          reconnectAttempts = 0;
          consecutiveAuthFailures = 0; // Reset auth failure counter on successful connection
          updateTab(tabId, {
            connected: true,
            error: "",
            statusBanner: tab.persistent ? "Connected. Waiting for persistent session status..." : "",
          });
          sendSize(ws);
          clearHeartbeat();
          heartbeat = setInterval(() => {
            if (ws.readyState === 1) {
              ws.send("__ping__");
              // Set timeout to detect missing pong
              pongTimeout = setTimeout(() => {
                // Check if still the same WebSocket instance and still open
                const currentTab = tabData.get(tabId);
                if (currentTab?.ws === ws && ws.readyState === 1) {
                  ws.close(1000, "keepalive ping timeout");
                }
              }, PONG_TIMEOUT);
            }
          }, PING_INTERVAL);
          const d = tabData.get(tabId);
          if (d) {
            d.ws = ws;
            d.heartbeat = heartbeat;
            d.reconnectTimer = reconnectTimer;
            d.closedManually = closedManually;
            d.reconnecting = reconnecting;
            d.voice?.attach(term, ws);
          }
        };
        ws.onmessage = (e) => {
          // Check for text pong response
          if (typeof e.data === 'string' && e.data === '__pong__') {
            // Clear the pong timeout - connection is alive
            if (pongTimeout) {
              clearTimeout(pongTimeout);
              pongTimeout = null;
            }
            return;
          }

          const data = new Uint8Array(e.data);
          const isPersistenceMessage = tab.persistent
            && data.length >= PERSISTENCE_STATUS_PREFIX_BYTES.length
            && PERSISTENCE_STATUS_PREFIX_BYTES.every((byte, index) => data[index] === byte);
          if (isPersistenceMessage) {
            const status = new TextDecoder().decode(data.slice(PERSISTENCE_STATUS_PREFIX_BYTES.length)).trim();
            updateTab(tabId, { statusBanner: persistenceLabel(status, reconnecting) });
            reconnecting = false;
            const d = tabData.get(tabId);
            if (d) d.reconnecting = reconnecting;
            return;
          }
          term.write(data);
        };
        ws.onclose = async (e) => {
          const reason = e.reason || `Connection closed (code ${e.code})`;
          const tabState = tabData.get(tabId);
          if (tabState) tabState.ws = null;

          // Handle auth failures (code 1008)
          if (e.code === 1008) {
            consecutiveAuthFailures++;

            // Stop after MAX_AUTH_FAILURES consecutive auth failures
            if (consecutiveAuthFailures >= MAX_AUTH_FAILURES) {
              handleAuthExpired(`Session expired after ${MAX_AUTH_FAILURES} attempts — please refresh page`);
              return;
            }

            // Try to refresh session
            if (!closedManually && !authRecoveryInFlight) {
              authRecoveryInFlight = true;
              try {
                const refreshed = await tryRefreshSession();
                if (refreshed && !closedManually) {
                  reconnecting = true;
                  updateTab(tabId, {
                    connected: false,
                    error: `Refreshing session (attempt ${consecutiveAuthFailures}/${MAX_AUTH_FAILURES})...`,
                    statusBanner: tab.persistent ? "Reconnecting to persistent session..." : "",
                  });
                  term.write(`\r\n\x1b[90m[Refreshing session...]\x1b[0m`);
                  void connect(false);
                  return;
                }
              } catch (err) {
                console.error("Session refresh failed:", err);
              } finally {
                authRecoveryInFlight = false;
              }
            }
            handleAuthExpired("Session expired — please log in again");
            return;
          }

          // Non-auth failures: continue with normal reconnection
          if (!closedManually) scheduleReconnect(reason);
          else {
            clearHeartbeat();
            updateTab(tabId, { connected: false, error: reason });
            term.write(`\r\n\x1b[90m[${reason}]\x1b[0m`);
          }
        };
        ws.onerror = () => {
          const tabState = tabData.get(tabId);
          if (tabState) tabState.ws = null;
          if (!closedManually) scheduleReconnect("Connection failed");
          else updateTab(tabId, { connected: false, error: "Connection failed" });
        };

        d = tabData.get(tabId);
        if (d) {
          d.ws = ws;
          d.heartbeat = heartbeat;
          d.reconnectTimer = reconnectTimer;
          d.closedManually = closedManually;
          d.reconnecting = reconnecting;
        }
        return ws;
      }

      let ws = null;
      void connect().then((connectedWs) => {
        ws = connectedWs;
        if (connectedWs) voice.attach(term, connectedWs);
      });
      term.onData((data) => {
        const currentWs = tabData.get(tabId)?.ws;
        if (currentWs?.readyState === 1) currentWs.send(new TextEncoder().encode(data));
      });

      const handleDragOver = (e) => {
        e.preventDefault();
      };

      const handleDrop = async (e) => {
        e.preventDefault();
        if (activeTab !== tabId) return;
        const currentWs = tabData.get(tabId)?.ws;
        const files = [...(e.dataTransfer?.files || [])].filter((f) => f.type?.startsWith("image/"));
        for (const file of files) {
          await sendDroppedImage(term, currentWs, file);
        }
      };

      const handlePaste = async (e) => {
        if (activeTab !== tabId) return;
        const currentWs = tabData.get(tabId)?.ws;
        const items = [...(e.clipboardData?.items || [])]
          .filter((it) => it.kind === "file" && it.type?.startsWith("image/"));
        for (const item of items) {
          const file = item.getAsFile();
          if (file) await sendDroppedImage(term, currentWs, file);
        }
      };

      term.element?.addEventListener("dragover", handleDragOver);
      term.element?.addEventListener("drop", handleDrop);
      term.textarea?.addEventListener("paste", handlePaste);

      const ro = new ResizeObserver(() => {
        fit.fit();
        const currentWs = tabData.get(tabId)?.ws;
        if (currentWs) sendSize(currentWs);
      });
      ro.observe(el);
      const voice = new VoiceSession(() => { voiceTick++; });
      voice.attach(term, ws);
      tabData.set(tabId, { ws, term, ro, el, voice, heartbeat, reconnectTimer, closedManually, reconnecting, handleDragOver, handleDrop, handlePaste });
    })();
  }

  function activeVoice() { return voiceTick >= 0 && tabData.get(activeTab)?.voice; }

  function toggleFullscreen() {
    const elem = document.documentElement;
    if (!document.fullscreenElement) {
      elem.requestFullscreen().then(() => {
        isFullscreen = true;
        showActionButtons = true;
      }).catch(err => {
        console.error('Failed to enter fullscreen:', err);
      });
    } else {
      document.exitFullscreen().then(() => {
        isFullscreen = false;
        showActionButtons = false;
      }).catch(err => {
        console.error('Failed to exit fullscreen:', err);
      });
    }
  }

  function sendKey(key) {
    const currentWs = tabData.get(activeTab)?.ws;
    if (currentWs?.readyState === 1) {
      currentWs.send(new TextEncoder().encode(key));
    }
  }

  onMount(() => {
    syncTheme();
    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    const requestedHost = new URLSearchParams(window.location.search).get("host");
    if (requestedHost && !tabs.length && hostById(requestedHost)) addTab(requestedHost);

    // Listen for fullscreen changes
    document.addEventListener('fullscreenchange', () => {
      isFullscreen = !!document.fullscreenElement;
      showActionButtons = !!document.fullscreenElement;
    });
  });

  onDestroy(() => {
    themeObserver.disconnect();
    tabData.forEach((d) => {
      d.closedManually = true;
      if (d.reconnectTimer) clearTimeout(d.reconnectTimer);
      d.voice?.destroy();
      d.ro?.disconnect();
      if (d.heartbeat) clearInterval(d.heartbeat);
      d.term?.element?.removeEventListener("dragover", d.handleDragOver);
      d.term?.element?.removeEventListener("drop", d.handleDrop);
      d.term?.textarea?.removeEventListener("paste", d.handlePaste);
      d.ws?.close();
      d.term?.dispose();
    });
  });
</script>
<div class={activeVoice()?.voiceMode ? 'flex flex-col h-[calc(100vh-4rem)] overflow-hidden gap-1' : 'space-y-2'}>
  {#if !activeVoice()?.voiceMode}
    <h1 class="text-2xl font-bold text-surface-900 dark:text-surface-100 tracking-tight">Terminal</h1>
  {/if}

  <!-- iPhone Landscape Action Buttons (only in fullscreen) -->
  {#if showActionButtons && activeTab}
    <!-- Top Left Pocket -->
    <div class="actions-top-left">
      <button class="action-btn" onclick={() => sendKey('\x1b')} title="ESC">ESC</button>
      <button class="action-btn" onclick={() => sendKey('\t')} title="TAB">TAB</button>
    </div>

    <!-- Bottom Left Pocket -->
    <div class="actions-bottom-left">
      <button class="action-btn" onclick={() => sendKey('\x01')} title="CTRL+A">^A</button>
      <button class="action-btn" onclick={() => sendKey('\x03')} title="CTRL+C">^C</button>
    </div>

    <!-- Top Right Pocket -->
    <div class="actions-top-right">
      <button class="action-btn" onclick={() => sendKey('\x0c')} title="CTRL+L">^L</button>
      <button class="action-btn" onclick={() => sendKey('\x1a')} title="CTRL+Z">^Z</button>
    </div>

    <!-- Bottom Right Pocket -->
    <div class="actions-bottom-right">
      <button class="action-btn" onclick={() => sendKey('\x04')} title="CTRL+D">^D</button>
      <button class="action-btn" onclick={() => sendKey('\x12')} title="CTRL+R">^R</button>
    </div>
  {/if}

  <div class="flex items-center gap-1 border-b border-surface-300 dark:border-surface-700 pb-1 relative">
    {#each tabs as tab (tab.id)}
      <button
        class="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-t-lg transition-colors {activeTab === tab.id ? 'bg-surface-200 dark:bg-surface-800 text-surface-900 dark:text-surface-100' : 'text-surface-600 dark:text-surface-400 hover:text-surface-800 dark:hover:text-surface-200 hover:bg-surface-100 dark:hover:bg-surface-800/50'}"
        onclick={() => activeTab = tab.id}
      >
        {#if tab.connected}
          <span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
        {:else if tab.error}
          <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
        {:else}
          <span class="w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse"></span>
        {/if}
        {tab.label}
        {#if tab.persistent}
          <span class="rounded bg-indigo-100 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300">tmux</span>
        {/if}
        <span
          class="ml-1 text-surface-500 hover:text-sky-500 cursor-pointer"
          role="button"
          tabindex="0"
          title="Open fresh session in new browser tab"
          aria-label={`Open fresh ${tab.label} session in new browser tab`}
          onclick={(e) => { e.stopPropagation(); openFreshSession(tab); }}
          onkeydown={(e) => e.key === 'Enter' && openFreshSession(tab)}
        >↗</span>
        <span
          class="ml-1 text-surface-500 hover:text-rose-400 cursor-pointer"
          role="button"
          tabindex="0"
          onclick={(e) => { e.stopPropagation(); closeTab(tab.id); }}
          onkeydown={(e) => e.key === 'Enter' && closeTab(tab.id)}
        >&times;</span>
      </button>
    {/each}
    <div class="relative">
      <button
        class="px-2 py-1 text-surface-600 dark:text-surface-400 hover:text-surface-900 dark:hover:text-surface-100 hover:bg-surface-200 dark:hover:bg-surface-800 rounded text-lg leading-none"
        onclick={() => showMenu = !showMenu}
      >+</button>
      {#if showMenu}
        <div class="absolute top-full left-0 mt-1 bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg shadow-xl z-10 py-1 min-w-[140px]">
          {#each hosts as h}
            <button
              class="flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-sm text-surface-800 dark:text-surface-200 hover:bg-surface-200 dark:hover:bg-surface-700"
              onclick={() => addTab(h.id)}
            >
              <span>{h.label}</span>
              {#if h.persistent}
                <span class="rounded bg-indigo-100 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300">persistent</span>
              {/if}
            </button>
          {/each}
        </div>
      {/if}
    </div>
    {#if activeTab && tabs.find(t => t.id === activeTab)?.connected}
      <div class="ml-auto flex items-center gap-1">
        <button
          class="px-2 py-1 rounded text-sm transition-colors text-surface-600 dark:text-surface-500 hover:text-surface-800 dark:hover:text-surface-300"
          title={isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
          onclick={toggleFullscreen}
        >
          {#if isFullscreen}
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/></svg>
          {:else}
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/></svg>
          {/if}
        </button>
        {#if activeVoice()}
          {@const v = activeVoice()}
          <button
            class="px-2 py-1 rounded text-sm transition-colors {v.voiceMode ? 'text-rose-400' : v.sttAvailable ? 'text-surface-600 dark:text-surface-500 hover:text-surface-800 dark:hover:text-surface-300' : 'text-surface-300 dark:text-surface-700 cursor-not-allowed'}"
            title={!v.sttAvailable ? 'STT not supported' : v.voiceMode ? 'Voice mode on' : 'Enter voice mode'}
            disabled={!v.sttAvailable}
            onclick={() => { if (!v.voiceMode) v.enterVoiceMode(); else v.exitVoiceMode(); voiceTick++; }}
          >
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
          </button>
        {/if}
      </div>
    {/if}
  </div>

  <p class="text-xs text-surface-600 dark:text-surface-500">
    Tip: drag & drop or paste images into the active terminal tab to upload them to <code class="text-surface-700 dark:text-surface-400">/tmp/claude-images</code>.
  </p>

  {#if activeTab && tabs.find(t => t.id === activeTab)?.statusBanner}
    <div class="rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-sm text-indigo-800 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-200">
      {tabs.find(t => t.id === activeTab)?.statusBanner}
    </div>
  {/if}

  {#if !tabs.length}
    <div class="flex items-center justify-center h-[calc(100vh-12rem)] text-surface-600 dark:text-surface-500 text-sm">
      Click + to open a terminal
    </div>
  {/if}

  {#each tabs as tab (tab.id)}
    <div class="{activeTab === tab.id ? '' : 'hidden'} {activeVoice()?.voiceMode ? 'flex-1 min-h-0' : ''}">
      <div
        use:initTerminal={tab}
        class="h-full rounded-xl overflow-hidden shadow-lg border border-surface-300 dark:border-surface-700 bg-surface-50 dark:bg-[#0f172a] transition-all duration-300"
        style="{activeVoice()?.voiceMode ? '' : 'height: calc(100vh - 10rem);'}"
      ></div>
    </div>
  {/each}

  {#if activeVoice()?.voiceMode}
    {@const v = activeVoice()}
    <div class="mt-1 shrink-0 rounded-xl bg-surface-100/95 dark:bg-surface-800/95 border border-surface-300 dark:border-surface-700 shadow-xl overflow-hidden animate-slide-up">
      <!-- Header -->
      <div class="flex items-center justify-between px-3 py-1.5 border-b border-surface-300/50 dark:border-surface-700/50">
        <span class="text-xs font-medium text-surface-700 dark:text-surface-300">Voice Mode</span>
        <div class="flex items-center gap-2">
          <select
            class="bg-surface-200 dark:bg-surface-700 text-surface-800 dark:text-surface-300 text-xs rounded px-1 py-0.5 outline-none max-w-[120px]"
            onchange={(e) => { v.setVoice(+e.target.value); voiceTick++; }}
          >
            {#each v.voices as voice, i}
              <option value={i} selected={i === v.voiceIdx}>{voice.name}</option>
            {/each}
          </select>
          <button
            class="px-1.5 py-0.5 rounded text-xs font-medium text-surface-600 dark:text-surface-400 hover:text-surface-800 dark:hover:text-surface-200 hover:bg-surface-200 dark:hover:bg-surface-700"
            onclick={() => { v.cycleLang(); voiceTick++; }}
          >{v.langLabel}</button>
          <button
            class="px-1.5 py-0.5 rounded text-xs font-medium text-surface-600 dark:text-surface-400 hover:text-surface-800 dark:hover:text-surface-200 hover:bg-surface-200 dark:hover:bg-surface-700"
            onclick={() => { v.cycleTalkMode(); voiceTick++; }}
          >{v.modeLabel}</button>
          <button
            class="px-1.5 py-0.5 rounded text-xs text-surface-500 hover:text-rose-400"
            onclick={() => { v.exitVoiceMode(); voiceTick++; }}
          >&times;</button>
        </div>
      </div>
      <!-- Transcript + Mic -->
      <div class="flex items-center gap-3 px-3 py-2">
        {#if v.talkMode === "hold"}
          <button
            aria-label="Hold to talk"
            class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-200 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-300 dark:hover:bg-surface-600'}"
            onpointerdown={() => { v.startHold(); voiceTick++; }}
            onpointerup={() => { v.releaseHold(); voiceTick++; }}
            onpointerleave={() => { if (v.listening) { v.releaseHold(); voiceTick++; } }}
          >
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
          </button>
        {:else if v.talkMode === "tap"}
          <button
            aria-label="Tap to talk"
            class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center transition-colors {v.listening ? 'bg-rose-500/30 text-rose-400' : 'bg-surface-200 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-300 dark:hover:bg-surface-600'}"
            onclick={() => { v.tapMic(); voiceTick++; }}
          >
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
          </button>
        {:else}
          <div class="w-10 h-10 shrink-0 rounded-full flex items-center justify-center {v.listening ? 'bg-emerald-500/20 text-emerald-400 animate-pulse' : 'bg-surface-200 dark:bg-surface-700 text-surface-500'}">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
          </div>
        {/if}
        <div class="flex-1 min-w-0">
          {#if v.transcript}
            <p class="text-sm text-surface-600 dark:text-surface-400 italic truncate">"{v.transcript}"</p>
          {:else}
            <p class="text-xs text-surface-500 dark:text-surface-600">{v.speaking ? 'Speaking...' : v.listening ? 'Listening...' : 'Ready'}</p>
          {/if}
        </div>
      </div>
    </div>
  {/if}
</div>

<style>
  @keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .animate-slide-up { animation: slide-up 0.25s ease-out; }

  /* iPhone 17 Pro Landscape Action Button Zones */
  .actions-top-left,
  .actions-bottom-left,
  .actions-top-right,
  .actions-bottom-right {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 9999;
  }

  .actions-top-left {
    top: 5px;
    left: 5px;
    width: 52px;
    height: 125px;
  }

  .actions-bottom-left {
    bottom: 26px;
    left: 5px;
    width: 52px;
    height: 110px;
  }

  .actions-top-right {
    top: 5px;
    right: 5px;
    width: 52px;
    height: 125px;
  }

  .actions-bottom-right {
    bottom: 26px;
    right: 5px;
    width: 52px;
    height: 110px;
  }

  .action-btn {
    flex: 1;
    background: rgba(99, 102, 241, 0.9);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .action-btn:active {
    background: rgba(79, 70, 229, 1);
    transform: scale(0.95);
  }

  /* Terminal container respects safe areas */
  .terminal-safe-container {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
  }
</style>
