<script lang="ts">
  import { editorStore } from "$lib/stores/editor";
  import FileBrowser from "./FileBrowser.svelte";
  import EditorTabs from "./EditorTabs.svelte";
  import CodeEditor from "./CodeEditor.svelte";

  const isFileBrowserOpen = editorStore.isFileBrowserOpen;
  const activeTab = editorStore.activeTab;
  const saveError = editorStore.saveError;

  function toggleFileBrowser() {
    editorStore.toggleFileBrowser();
  }

  async function handleSave() {
    try {
      await editorStore.saveFile();
    } catch {
      // Error is already set in the store
    }
  }
</script>

<div class="editor-panel">
  <div class="toolbar">
    <button
      class="toolbar-button"
      class:active={$isFileBrowserOpen}
      on:click={toggleFileBrowser}
      title="Toggle file browser (Ctrl+B)"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      >
        <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>
    </button>

    <div class="toolbar-spacer"></div>

    {#if $activeTab}
      <button class="toolbar-button" on:click={handleSave} title="Save (Ctrl+S)">
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" />
          <polyline points="17 21 17 13 7 13 7 21" />
          <polyline points="7 3 7 8 15 8" />
        </svg>
      </button>
    {/if}
  </div>

  {#if $saveError}
    <div class="error-banner">
      <span>{$saveError}</span>
      <button
        class="dismiss-button"
        on:click={() => {}}
        title="Dismiss error"
        aria-label="Dismiss error"
      >
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
        >
          <path d="M18 6L6 18M6 6l12 12" />
        </svg>
      </button>
    </div>
  {/if}

  <div class="editor-content">
    {#if $isFileBrowserOpen}
      <div class="file-browser-container">
        <FileBrowser />
      </div>
    {/if}

    <div class="editor-main">
      <EditorTabs />

      <div class="editor-area">
        {#if $activeTab}
          {#key $activeTab.id}
            <CodeEditor tab={$activeTab} />
          {/key}
        {:else}
          <div class="no-file">
            <div class="no-file-content">
              <svg
                width="48"
                height="48"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1"
              >
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                <polyline points="14 2 14 8 20 8" />
              </svg>
              <p>Select a file to edit</p>
              <p class="hint">Use the file browser on the left or press Ctrl+B to toggle it</p>
            </div>
          </div>
        {/if}
      </div>
    </div>
  </div>
</div>

<style>
  .editor-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bg-primary);
  }

  .toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
  }

  .toolbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
  }

  .toolbar-button:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  .toolbar-button.active {
    background-color: var(--bg-primary);
    color: var(--accent-primary);
  }

  .toolbar-spacer {
    flex: 1;
  }

  .error-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #ff000022;
    border-bottom: 1px solid #ff0000;
    color: #ff6b6b;
    font-size: 13px;
  }

  .dismiss-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: none;
    color: #ff6b6b;
    cursor: pointer;
    border-radius: 4px;
  }

  .dismiss-button:hover {
    background-color: #ff000033;
  }

  .editor-content {
    display: flex;
    flex: 1;
    overflow: hidden;
  }

  .file-browser-container {
    width: 250px;
    min-width: 150px;
    max-width: 400px;
    flex-shrink: 0;
    overflow: hidden;
  }

  .editor-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .editor-area {
    flex: 1;
    overflow: hidden;
    display: flex;
  }

  .no-file {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-terminal);
  }

  .no-file-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-secondary);
    text-align: center;
  }

  .no-file-content svg {
    opacity: 0.5;
  }

  .no-file-content p {
    margin: 0;
  }

  .no-file-content .hint {
    font-size: 12px;
    opacity: 0.7;
  }
</style>
