// SPDX-License-Identifier: LicenseRef-Commercial
<script lang="ts">
  import {
    proListAccounts,
    proSetActiveAccount,
    type AccountProfile,
  } from './pro-bridge';

  let accounts = $state<AccountProfile[]>([]);
  let loading = $state(true);
  let error = $state<string | null>(null);
  let switching = $state<string | null>(null);
  let confirmSwitch = $state<string | null>(null);

  async function load() {
    loading = true;
    error = null;
    try {
      accounts = await proListAccounts();
    } catch (e) {
      error = e instanceof Error ? e.message : String(e);
    } finally {
      loading = false;
    }
  }

  async function switchTo(profileId: string) {
    switching = profileId;
    error = null;
    try {
      await proSetActiveAccount(profileId);
      accounts = accounts.map((a) => ({
        ...a,
        isActive: a.id === profileId,
      }));
    } catch (e) {
      error = e instanceof Error ? e.message : String(e);
    } finally {
      switching = null;
    }
  }

  function truncatePath(path: string, maxLen = 40): string {
    if (path.length <= maxLen) return path;
    return '...' + path.slice(path.length - maxLen + 3);
  }

  $effect(() => {
    load();
  });
</script>

<div class="switcher-root">
  <div class="header">Accounts</div>

  {#if loading}
    <div class="state-msg">Loading accounts...</div>
  {:else if error}
    <div class="state-msg error">{error}</div>
  {:else if accounts.length === 0}
    <div class="state-msg">No accounts configured.</div>
  {:else}
    <div class="account-list">
      {#each accounts as account (account.id)}
        <div class="account-row" class:active={account.isActive}>
          <div class="account-indicator" class:is-active={account.isActive}></div>
          <div class="account-info">
            <div class="account-name">{account.displayName}</div>
            {#if account.email}
              <div class="account-email">{account.email}</div>
            {/if}
            <div class="account-meta">
              <span class="provider-badge">{account.provider}</span>
              <span class="config-dir" title={account.configDir}>{truncatePath(account.configDir)}</span>
            </div>
          </div>
          <div class="account-action">
            {#if account.isActive}
              <span class="active-label" aria-label="Currently active account">Active</span>
            {:else if confirmSwitch === account.id}
              <button
                class="switch-btn confirm"
                disabled={switching !== null}
                aria-label="Confirm switching to {account.displayName}"
                onclick={() => { confirmSwitch = null; switchTo(account.id); }}
              >
                {switching === account.id ? 'Switching...' : 'Confirm?'}
              </button>
              <button
                class="switch-btn"
                aria-label="Cancel account switch"
                onclick={() => (confirmSwitch = null)}
              >
                Cancel
              </button>
            {:else}
              <button
                class="switch-btn"
                disabled={switching !== null}
                aria-label="Switch to {account.displayName}"
                onclick={() => (confirmSwitch = account.id)}
              >
                Switch
              </button>
            {/if}
          </div>
        </div>
      {/each}
    </div>
  {/if}
</div>

<style>
  .switcher-root {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: var(--ctp-text);
    font-family: var(--ui-font-family, system-ui, sans-serif);
    font-size: var(--ui-font-size, 0.8125rem);
    overflow-y: auto;
    height: 100%;
  }

  .header {
    font-size: 0.75rem;
    color: var(--ctp-subtext1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .state-msg {
    padding: 1.5rem;
    text-align: center;
    color: var(--ctp-subtext0);
  }

  .state-msg.error {
    color: var(--ctp-red);
  }

  .account-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .account-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--ctp-surface0);
    border-radius: 0.375rem;
    border: 1px solid var(--ctp-surface1);
  }

  .account-row.active {
    border-color: var(--ctp-green);
  }

  .account-indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ctp-surface2);
    flex-shrink: 0;
  }

  .account-indicator.is-active {
    background: var(--ctp-green);
  }

  .account-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .account-name {
    font-weight: 500;
    color: var(--ctp-text);
  }

  .account-email {
    font-size: 0.6875rem;
    color: var(--ctp-subtext0);
  }

  .account-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
  }

  .provider-badge {
    padding: 0.0625rem 0.3125rem;
    background: var(--ctp-surface1);
    color: var(--ctp-blue);
    border-radius: 0.1875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .config-dir {
    color: var(--ctp-overlay0);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-action {
    flex-shrink: 0;
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }

  .active-label {
    font-size: 0.6875rem;
    color: var(--ctp-green);
    font-weight: 500;
  }

  .switch-btn {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--ctp-surface1);
    border-radius: 0.25rem;
    background: var(--ctp-surface0);
    color: var(--ctp-subtext0);
    cursor: pointer;
    font-size: 0.6875rem;
  }

  .switch-btn:hover:not(:disabled) {
    background: var(--ctp-surface1);
    color: var(--ctp-text);
  }

  .switch-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .switch-btn.confirm {
    color: var(--ctp-peach);
    border-color: var(--ctp-peach);
  }

  .switch-btn.confirm:hover:not(:disabled) {
    background: color-mix(in srgb, var(--ctp-peach) 12%, transparent);
    color: var(--ctp-peach);
  }
</style>
