<script>
  import Icon from '../ui/Icon.svelte';
  import PluginCard from './PluginCard.svelte';
  import PluginBundleHost from '../plugin-host/PluginBundleHost.svelte';
  import { onDestroy, onMount, tick } from 'svelte';
  import { GetPlugins, GetCapabilities, GetPermissions, GetContributions, ReloadPlugins, GetVaultStatus, GetVaultPluginState, EnablePlugin, DisablePlugin, ReadPluginSettings, WritePluginSettings, GetPluginFrontendInfo, WriteFrontendLog } from '../../../wailsjs/go/api/App';
  import { debug } from '../log/debug.js';
  import { i18n } from '../i18n/index.js';

  let plugins = [];
  let capabilities = [];
  let permissions = [];
  let contributions = {};
  let loading = true;
  let error = '';
  let vaultStatus = { status: 'unknown', path: '', vaultId: '' };
  let vaultPluginState = { enabledPlugins: [], disabledPlugins: [], desiredPlugins: [] };
  let settingsPanel = null;
  let settingsData = {};
  let settingsPluginId = '';
  let settingsError = null;
  let settingsPluginInfo = null;
  let lastOpenedKey = '';
  let locale = i18n.getLocale();
  let unsubscribeLocale = null;
  $: tr = ((activeLocale) => (key, params, fallback) => {
    void activeLocale;
    return i18n.t(key, params, fallback);
  })(locale);

  // Per-action loading state — shows feedback on specific buttons without hiding the whole list
  let actionFeedback = {}; // { [pluginId]: 'enabling' | 'disabling' | null }
  let reloading = false;
  let toastMessage = '';
  let toastType = 'success'; // 'success' | 'error' | 'info'

  export let activeSettingsPluginId = '';
  export let activeSettingsPanelId = '';

  $: if (activeSettingsPluginId) {
    const settingsPanelCount = (contributions.settingsPanels || []).length;
    const key = `${activeSettingsPluginId}:${activeSettingsPanelId || '*'}`;
    if (key !== lastOpenedKey || settingsPanelCount === 0) {
      openSettingsFromProps(activeSettingsPluginId, activeSettingsPanelId);
    }
  }

  function showToast(msg, type = 'success') {
    toastMessage = msg;
    toastType = type;
    setTimeout(() => {
      toastMessage = '';
    }, 4000);
  }

  function notifyPluginsChanged() {
    window.dispatchEvent(new CustomEvent('verstak:plugins-changed'));
  }

  function unpackBackendResult(result) {
    if (Array.isArray(result) && result.length === 2 && (typeof result[1] === 'string' || result[1] == null)) {
      return { value: result[0], error: result[1] || '' };
    }
    return { value: result, error: '' };
  }

  function unpackReloadResult(result) {
    if (Array.isArray(result)) {
      return {
        count: Number(result[0] || 0),
        summary: result[1] || `Reloaded ${Number(result[0] || 0)} plugin(s).`,
      };
    }
    const count = Number(result || 0);
    return { count, summary: `Reloaded ${count} plugin(s).` };
  }

  async function openSettingsFromProps(pluginId, panelId) {
    const panel = (contributions.settingsPanels || []).find(sp => sp.pluginId === pluginId && (!panelId || sp.id === panelId));
    if (panel) {
      lastOpenedKey = `${pluginId}:${panelId || '*'}`;
      settingsPanel = panel;
      settingsPluginId = pluginId;
      settingsError = null;
      try {
        const info = await GetPluginFrontendInfo(pluginId);
        settingsPluginInfo = info;
      } catch { settingsPluginInfo = null; }
      ReadPluginSettings(pluginId).then(result => {
        const unpacked = unpackBackendResult(result);
        if (unpacked.error) {
          settingsError = unpacked.error;
          settingsData = {};
          return;
        }
        settingsData = unpacked.value || {};
      }).catch(() => { settingsData = {}; });
    } else {
      settingsError = `Settings panel not found for plugin "${pluginId}". Check that the plugin is enabled and has settingsPanels in its manifest.`;
    }
  }

  $: vaultOpen = vaultStatus.status === 'open';
  $: missingInstalled = computeMissingInstalled();

  function computeMissingInstalled() {
    if (!vaultPluginState.desiredPlugins) return [];
    const installedIDs = new Set(plugins.map(p => p.manifest?.id).filter(Boolean));
    return (vaultPluginState.desiredPlugins || []).filter(dp => !installedIDs.has(dp.id));
  }

  async function loadAll() {
    debug.log('[PluginManager] loadAll: START');
    error = '';
    loading = true;
    try {
      debug.log('[PluginManager] loadAll: calling GetPlugins...');
      const p = await GetPlugins();
      await Promise.all((p || []).map((plugin) => (
        i18n.loadPlugin(plugin.manifest?.id, plugin.manifest?.localization).catch(() => {})
      )));
      plugins = (p || []).map((plugin) => i18n.localizePlugin(plugin));
      debug.log('[PluginManager] loadAll: GetPlugins returned', plugins.length, 'plugins');
      for (var i = 0; i < plugins.length; i++) {
        debug.log('[PluginManager] loadAll: plugin[' + i + ']:', plugins[i].manifest?.id, 'status:', plugins[i].status, 'enabled:', plugins[i].enabled);
      }
    } catch (e) {
      debug.log('[PluginManager] loadAll: GetPlugins ERROR:', String(e));
      WriteFrontendLog('PluginManager', 'loadAll: GetPlugins ERROR: ' + String(e));
      error = 'GetPlugins: ' + String(e);
      loading = false;
      return;
    }
    // Collect all async loads but await them so loading stays true until all are done
    try {
      debug.log('[PluginManager] loadAll: loading vault/capabilities/permissions/contributions...');
      const [v, caps, perms, contribs] = await Promise.all([
        GetVaultStatus().catch(() => ({ status: 'unknown', path: '', vaultId: '' })),
        GetCapabilities().catch(() => []),
        GetPermissions().catch(() => []),
        GetContributions().catch(() => ({})),
      ]);
      vaultStatus = v || { status: 'unknown', path: '', vaultId: '' };
      capabilities = caps || [];
      permissions = perms || [];
      contributions = i18n.localizeContributionSummary(contribs || {});
      debug.log('[PluginManager] loadAll: vault=' + vaultStatus.status + ' caps=' + capabilities.length + ' perms=' + permissions.length);
      WriteFrontendLog('PluginManager', 'loadAll: vault=' + vaultStatus.status + ' caps=' + capabilities.length + ' perms=' + permissions.length);
    } catch (e) {
      debug.log('[PluginManager] loadAll: non-critical load ERROR:', String(e));
      WriteFrontendLog('PluginManager', 'loadAll: non-critical ERROR: ' + String(e));
      console.error('[PluginManager] non-critical load error:', e);
    }
    if (vaultStatus.status === 'open') {
      try {
        debug.log('[PluginManager] loadAll: calling GetVaultPluginState...');
        vaultPluginState = await GetVaultPluginState() || { enabledPlugins: [], disabledPlugins: [], desiredPlugins: [] };
        WriteFrontendLog('PluginManager', 'loadAll: GetVaultPluginState returned');
      } catch (e) {
        WriteFrontendLog('PluginManager', 'loadAll: GetVaultPluginState ERROR: ' + String(e));
      }
    }
    loading = false;
    await tick();
    debug.log('[PluginManager] loadAll: END, loading=false');
    WriteFrontendLog('PluginManager', 'loadAll: END, loading=false');
  }

  onMount(() => {
    unsubscribeLocale = i18n.subscribe((nextLocale) => {
      const changed = locale !== nextLocale;
      locale = nextLocale;
      if (changed) loadAll();
    });
    loadAll();
  });

  onDestroy(() => {
    if (unsubscribeLocale) unsubscribeLocale();
  });

  async function reload() {
    debug.log('[PluginManager] reload: START');
    reloading = true;
    error = '';
    let resultMsg = '';
    try {
      debug.log('[PluginManager] reload: calling ReloadPlugins...');
      const { count, summary } = unpackReloadResult(await ReloadPlugins());
      debug.log('[PluginManager] reload: ReloadPlugins returned count=' + count + ' summary=' + summary);
      resultMsg = `Reloaded ${count} plugin(s). ${summary}`;
    } catch (e) {
      debug.log('[PluginManager] reload: ReloadPlugins ERROR:', String(e));
      error = 'Reload: ' + String(e);
      reloading = false;
      return;
    }
    debug.log('[PluginManager] reload: calling loadAll after reload...');
    await loadAll();
    notifyPluginsChanged();
    reloading = false;
    debug.log('[PluginManager] reload: END');
    showToast(resultMsg, 'success');
  }

  async function enablePlugin(pluginId) {
    debug.log('[PluginManager] enablePlugin:', pluginId);
    actionFeedback = { ...actionFeedback, [pluginId]: 'enabling' };
    error = '';
    const err = await EnablePlugin(pluginId);
    if (err) {
      debug.log('[PluginManager] enablePlugin: ERROR:', err);
      actionFeedback = { ...actionFeedback, [pluginId]: null };
      error = 'Enable: ' + err;
      return;
    }
    debug.log('[PluginManager] enablePlugin: success, reloading...');
    // Reload to get updated state
    try { await ReloadPlugins(); } catch (e) { /* ignore */ }
    await loadAll();
    notifyPluginsChanged();
    actionFeedback = { ...actionFeedback, [pluginId]: null };
    debug.log('[PluginManager] enablePlugin: done');
    showToast(`Plugin "${pluginId}" enabled`, 'success');
  }

  async function disablePlugin(pluginId) {
    debug.log('[PluginManager] disablePlugin:', pluginId);
    actionFeedback = { ...actionFeedback, [pluginId]: 'disabling' };
    error = '';
    const err = await DisablePlugin(pluginId);
    if (err) {
      debug.log('[PluginManager] disablePlugin: ERROR:', err);
      actionFeedback = { ...actionFeedback, [pluginId]: null };
      error = 'Disable: ' + err;
      return;
    }
    debug.log('[PluginManager] disablePlugin: success, reloading...');
    // Reload to get updated state
    try { await ReloadPlugins(); } catch (e) { /* ignore */ }
    await loadAll();
    notifyPluginsChanged();
    actionFeedback = { ...actionFeedback, [pluginId]: null };
    debug.log('[PluginManager] disablePlugin: done');
    showToast(`Plugin "${pluginId}" disabled`, 'info');
  }

  $: totalPlugins = plugins.length;
  $: totalCaps = capabilities.length;
  $: totalPerms = permissions.length;
  $: statusSummary = computeStatusSummary(plugins);
  $: elevatedPermissionPluginCount = computeElevatedPermissionPluginCount(plugins, permissions);

  function computeStatusSummary(pluginRows) {
    return pluginRows.reduce((summary, plugin) => {
      const status = plugin?.status || 'unknown';
      if (status === 'loaded') summary.loaded += 1;
      else if (status === 'degraded') summary.degraded += 1;
      else if (status === 'failed' || status === 'incompatible' || status === 'missing-required-capability') summary.failed += 1;
      else if (status === 'disabled' || plugin?.enabled === false) summary.disabled += 1;
      else summary.other += 1;
      return summary;
    }, { loaded: 0, degraded: 0, failed: 0, disabled: 0, other: 0 });
  }

  function computeElevatedPermissionPluginCount(pluginRows, permissionRows) {
    const dangerous = new Set((permissionRows || []).filter(permission => permission.dangerous).map(permission => permission.name));
    return (pluginRows || []).filter(plugin => (plugin?.manifest?.permissions || []).some(permission => dangerous.has(permission))).length;
  }

  function closeSettings() {
    settingsPanel = null;
    settingsPluginId = '';
    settingsError = null;
    lastOpenedKey = '';
    window.dispatchEvent(new CustomEvent('verstak:close-settings'));
  }

  function saveSettings() {
    WritePluginSettings(settingsPluginId, settingsData).then(err => {
      if (err) console.error('WritePluginSettings:', err);
    }).catch(e => console.error('WritePluginSettings:', e));
  }
</script>

<div class="plugin-manager">
  <!-- Toast notification -->
  {#if toastMessage}
    <div class="toast" class:toast-success={toastType === 'success'} class:toast-error={toastType === 'error'} class:toast-info={toastType === 'info'}>
      {toastMessage}
    </div>
  {/if}

  <header>
    <div class="header-left">
      <h2>{tr('settings.pluginManager')}</h2>
      {#if vaultStatus.status !== 'unknown'}
        <span class="vault-badge" class:vault-open={vaultStatus.status === 'open'} class:vault-not-created={vaultStatus.status === 'not-created'} class:vault-closed={vaultStatus.status === 'closed'} class:vault-error={vaultStatus.status === 'error'}>
          {tr('vault.label', { status: tr(`vault.status.${vaultStatus.status}`, undefined, vaultStatus.status) })}{#if vaultStatus.path} ({vaultStatus.path}){/if}
        </span>
      {/if}
    </div>
    <button class="reload-btn" on:click={reload} type="button" disabled={loading || reloading}>
      {reloading ? tr('pluginManager.reloading') : tr('pluginManager.reload')}
    </button>
  </header>

  {#if loading}
    <div class="loading">{tr('pluginManager.scanning')}</div>
  {:else if error}
    <div class="error">
      <Icon name="warning" size={24} class="error-icon" />
      <div class="error-message">{error}</div>
      <button class="retry-btn" on:click={loadAll} type="button">{tr('common.retry')}</button>
    </div>
  {:else}
    <div class="summary">
      <span class="badge">{tr('pluginManager.summary.plugins', { count: totalPlugins })}</span>
      <span class="badge">{tr('pluginManager.summary.capabilities', { count: totalCaps })}</span>
      <span class="badge">{tr('pluginManager.summary.permissions', { count: totalPerms })}</span>
    </div>

    <div class="scan-summary" aria-label={tr('pluginManager.scanSummary')}>
      <section class="scan-card" data-plugin-manager-summary="health">
        <div class="scan-card-title">{tr('pluginManager.health')}</div>
        <div class="scan-metrics">
          <span data-plugin-status-summary="loaded"><strong>{statusSummary.loaded}</strong> {tr('status.loaded')}</span>
          <span data-plugin-status-summary="degraded"><strong>{statusSummary.degraded}</strong> {tr('status.degraded')}</span>
          <span data-plugin-status-summary="failed"><strong>{statusSummary.failed}</strong> {tr('status.failed')}</span>
          <span data-plugin-status-summary="disabled"><strong>{statusSummary.disabled}</strong> {tr('status.disabled')}</span>
        </div>
      </section>

      <section class="scan-card" data-plugin-manager-summary="risk">
        <div class="scan-card-title">{tr('pluginManager.permissionRisk')}</div>
        <div class="scan-metrics">
          <span data-plugin-risk-summary="elevated-permissions">{tr('pluginManager.elevatedPermissions', { count: elevatedPermissionPluginCount })}</span>
        </div>
      </section>
    </div>

    {#if plugins.length === 0 && missingInstalled.length === 0}
      <div class="empty">
        <div class="empty-icon">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
          </svg>
        </div>
        <p>{tr('pluginManager.none')}</p>
        <p class="hint">{tr('pluginManager.scannedDirs')}</p>
        <ul class="hint-list">
          <li><code>~/.config/verstak/plugins/</code> — {tr('pluginManager.userPlugins')}</li>
          <li><code>./plugins/</code> — {tr('pluginManager.bundledPlugins')}</li>
        </ul>
        <p class="hint">{tr('pluginManager.installHint')}</p>
      </div>
    {:else}
      <div class="plugin-list">
        {#each plugins as p}
          <PluginCard {p} {capabilities} {permissions} {contributions} {vaultOpen} {actionFeedback} settingsPanels={(contributions.settingsPanels || []).filter(sp => sp.pluginId === p.manifest?.id)} onEnable={enablePlugin} onDisable={disablePlugin} />
        {/each}
      </div>
    {/if}

    {#if missingInstalled.length > 0}
      <div class="missing-section">
        <h3>{tr('pluginManager.missingTitle')}</h3>
        <p class="missing-hint">{tr('pluginManager.missingHint')}</p>
        <div class="plugin-list">
          {#each missingInstalled as mp}
            <div class="plugin-card missing-card">
              <div class="card-header">
                <div class="plugin-id">
                  <span class="status-dot" style="background: #e94560"></span>
                  <strong>{mp.id}</strong>
                  {#if mp.version}<span class="version">v{mp.version}</span>{/if}
                </div>
                <span class="status-badge" style="color: #e94560">{tr('status.missing')}</span>
              </div>
              <p class="missing-text">
                {tr('pluginManager.missingPackage')}
                {#if mp.source && mp.source !== 'unknown'}
                  <span class="source-hint">{tr('common.source')}: {mp.source}</span>
                {/if}
              </p>
            </div>
          {/each}
        </div>
      </div>
    {/if}

    {#if capabilities.length > 0}
      <details class="registry-section">
        <summary>{tr('pluginManager.capabilityRegistry', { count: totalCaps })}</summary>
        <table>
          <thead>
            <tr><th>{tr('common.capability')}</th><th>{tr('common.provider')}</th><th>{tr('common.source')}</th><th>{tr('common.status')}</th></tr>
          </thead>
          <tbody>
            {#each capabilities as cap}
              <tr>
                <td><code>{cap.name}</code></td>
                <td>{cap.pluginId}</td>
                <td><span class="source-badge" class:source-core={cap.pluginId === 'verstak-desktop'} class:source-plugin={cap.pluginId !== 'verstak-desktop'}>{cap.pluginId === 'verstak-desktop' ? 'core' : 'plugin'}</span></td>
                <td><span class="status-{cap.status}">{cap.status}</span></td>
              </tr>
            {/each}
          </tbody>
        </table>
      </details>
    {/if}
  {/if}

  <!-- Settings Panel Modal -->
  {#key `settings-${settingsPluginId}`}
  {#if settingsError}
  <div class="modal-overlay" on:click|self={closeSettings} on:keydown|self={(e) => e.key === 'Escape' && closeSettings()} role="presentation">
  <div class="modal" role="dialog" aria-modal="true" aria-label={tr('pluginManager.settingsError')}>
    <div class="modal-header">
      <h3>{tr('pluginManager.settingsError')}</h3>
      <button class="modal-close" on:click={closeSettings} type="button">✕</button>
    </div>
    <div class="modal-body">
      <p class="error" style="color: #e94560;">{settingsError}</p>
    </div>
  </div>
  </div>
  {:else if settingsPanel}
  <div class="modal-overlay" on:click|self={closeSettings} on:keydown|self={(e) => e.key === 'Escape' && closeSettings()} role="presentation">
  <div class="modal" role="dialog" aria-modal="true" aria-label={tr('pluginManager.pluginSettings')}>
    <div class="modal-header">
      <h3>{settingsPanel.title}</h3>
      <button class="modal-close" on:click={closeSettings} type="button">✕</button>
    </div>
    <div class="modal-body">
      <p class="settings-hint">{tr('common.plugin')}: <code>{settingsPluginId}</code></p>
      {#if settingsPluginInfo && settingsPluginInfo.entry}
        <PluginBundleHost
          pluginId={settingsPluginId}
          componentId={settingsPanel.component || settingsPanel.id}
        />
      {:else}
        <p class="settings-hint">{tr('common.component')}: <code>{settingsPanel.component}</code></p>
        <p class="placeholder">{tr('pluginManager.settingsBundleUnavailable')}</p>
      {/if}
    </div>
  </div>
  </div>
  {/if}
  {/key}
</div>

<style>
  .plugin-manager {
    flex: 1;
    width: min(100%, 1100px);
    min-height: 0;
    padding: 0.5rem 0.5rem 1.5rem 0;
    position: relative;
  }
  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #0f3460;
  }
  .header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: wrap;
  }
  h2 { color: #e0e0e0; font-size: 1.3rem; margin: 0; }
  .vault-badge {
    max-width: 100%;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
    border: 1px solid;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vault-open { background: rgba(78, 204, 163, 0.15); color: #4ecca3; border-color: #4ecca3; }
  .vault-not-created { background: rgba(255, 200, 87, 0.15); color: #ffc857; border-color: #ffc857; }
  .vault-closed { background: rgba(160, 160, 184, 0.15); color: #a0a0b8; border-color: #a0a0b8; }
  .vault-error { background: rgba(233, 69, 96, 0.15); color: #e94560; border-color: #e94560; }
  .reload-btn {
    background: #0f3460; color: #e0e0e0; border: 1px solid #533483;
    padding: 0.4rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
  }
  .reload-btn:hover:not(:disabled) { background: #533483; }
  .reload-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  /* Toast */
  .toast {
    position: fixed; top: 1rem; right: 1rem; z-index: 2000;
    padding: 0.6rem 1.2rem; border-radius: 6px; font-size: 0.85rem;
    max-width: 400px; word-break: break-word;
    animation: toastIn 0.25s ease-out;
  }
  .toast-success { background: #1a3a2e; color: #4ecca3; border: 1px solid #4ecca3; }
  .toast-error { background: #3a1a1a; color: #e94560; border: 1px solid #e94560; }
  .toast-info { background: #1a1a3a; color: #a78bfa; border: 1px solid #a78bfa; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

  .loading, .error {
    padding: 2rem; text-align: center; color: #a0a0b8;
  }
  .error { color: #e94560; }
  :global(.error-icon) { color: #e94560; margin-bottom: 0.5rem; }
  .error-message {
    font-family: monospace; font-size: 0.85rem; margin-bottom: 1rem; word-break: break-word;
  }
  .retry-btn {
    background: #0f3460; color: #e0e0e0; border: 1px solid #533483;
    padding: 0.4rem 1rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
  }
  .retry-btn:hover { background: #533483; }
  .summary {
    display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;
  }
  .badge {
    background: #16213e; padding: 0.25rem 0.75rem; border-radius: 12px;
    font-size: 0.8rem; color: #a0a0b8; border: 1px solid #0f3460;
  }
  .scan-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .scan-card {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid #0f3460;
    border-radius: 8px;
    background: #121a2c;
  }
  .scan-card-title {
    color: #e0e0f0;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }
  .scan-metrics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
  }
  .scan-metrics span {
    min-height: 1.55rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid rgba(78, 204, 163, 0.16);
    border-radius: 5px;
    color: #a0a0b8;
    background: #101626;
    font-size: 0.76rem;
  }
  .scan-metrics strong {
    color: #f4f7fb;
    font-size: 0.88rem;
  }
  .empty {
    padding: 2rem; text-align: center; color: #a0a0b8;
    background: #16213e; border-radius: 8px; border: 1px dashed #0f3460;
  }
  .empty-icon { margin-bottom: 0.5rem; color: #0f3460; }
  .hint { font-size: 0.85rem; margin-top: 0.5rem; opacity: 0.7; }
  .hint-list { list-style: none; padding: 0; margin: 0.5rem 0; font-size: 0.8rem; opacity: 0.7; }
  .hint-list li { margin: 0.25rem 0; }
  .hint code { background: #0f3460; padding: 0.1rem 0.3rem; border-radius: 3px; }
  .plugin-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; min-width: 0; }

  .missing-section { margin-bottom: 1.5rem; }
  .missing-section h3 { color: #e94560; font-size: 1rem; margin: 0 0 0.25rem; }
  .missing-hint { color: #a0a0b8; font-size: 0.8rem; margin: 0 0 0.75rem; }
  .missing-card { border-color: #e94560; opacity: 0.8; }
  .missing-text { color: #a0a0b8; font-size: 0.85rem; margin: 0.5rem 0 0; }
  .source-hint { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: #666; }

  .registry-section {
    background: #16213e; border: 1px solid #0f3460;
    border-radius: 8px; padding: 0.75rem; margin-top: 1rem;
  }
  .registry-section summary { cursor: pointer; color: #a0a0b8; font-size: 0.9rem; font-weight: 600; }
  table { width: 100%; margin-top: 0.5rem; border-collapse: collapse; font-size: 0.85rem; }
  th { text-align: left; padding: 0.4rem 0.5rem; color: #a0a0b8; border-bottom: 1px solid #0f3460; }
  td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #0f3460; }
  td code { color: #e0e0e0; }
  :global(.status-stable) { color: #4ecca3; }
  :global(.status-draft) { color: #ffc857; }
  :global(.status-deprecated) { color: #e94560; }
  .source-badge { font-size: 0.75rem; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 600; }
  .source-core { background: #1a3a5c; color: #4ecca3; border: 1px solid #4ecca3; }
  .source-plugin { background: #0f3460; color: #a0a0b8; border: 1px solid #533483; }

  /* Modal */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
  }
  .modal {
    background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
    width: min(880px, calc(100vw - 4rem)); max-width: calc(100vw - 4rem); height: min(680px, calc(100vh - 4rem)); max-height: calc(100vh - 4rem); display: flex; flex-direction: column;
  }
  .modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem; border-bottom: 1px solid #0f3460;
  }
  .modal-header h3 { margin: 0; color: #e0e0f0; font-size: 1.1rem; }
  .modal-close { background: none; border: none; color: #a0a0b8; font-size: 1.2rem; cursor: pointer; padding: 0.2rem 0.5rem; }
  .modal-close:hover { color: #e94560; }
  .modal-body { padding: 1rem; overflow: auto; min-height: 0; flex: 1; display: flex; flex-direction: column; }
  .modal-body :global(.plugin-bundle-host) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .settings-hint { color: #666; font-size: 0.8rem; margin: 0.25rem 0; }
  .settings-hint code { color: #4ecca3; }

  @media (max-width: 760px) {
    .plugin-manager {
      width: 100%;
      padding-right: 0;
    }

    header {
      align-items: flex-start;
    }

    .reload-btn {
      width: 100%;
    }

    .scan-summary {
      grid-template-columns: 1fr;
    }

    .modal {
      width: min(880px, calc(100vw - 2rem));
      height: min(680px, calc(100vh - 2rem));
      max-height: calc(100vh - 2rem);
    }
  }
</style>
