<script lang="ts">
  import FragmentEditor from "$lib/components/editor/FragmentEditor.svelte";
  import ListEditor from "$lib/components/editor/ListEditor.svelte";
  import TodoEditor from "$lib/components/editor/TodoEditor.svelte";
  import MarkdownEditor from "$lib/components/editor/MarkdownEditor.svelte";

  export let activeSection = "entries";
  export let openDocumentId = "entries/daily-notes";
  export let openDocumentName = "Daily Notes";
  export let openDocumentContent = "";
  export let onDocumentContentChange: (content: string) => void = () => {};
  export let onOpenDocument: (doc: {
    id: string;
    label: string;
    initialContent: string;
    linkedFrom?: {
      id: string;
      label: string;
      initialContent: string;
      section: "entries" | "fragments" | "todos" | "lists" | "calendar";
    };
  }) => void = () => {};
  export let onDeleteDocument: (id: string) => void = () => {};
  export let showLinkedBackButton = false;
  export let onLinkedBack: () => void = () => {};
  export let previewOnly = true;
</script>

<main class="editor-panel" aria-label="Editor area">
  {#if showLinkedBackButton}
    <div class="editor-nav">
      <button type="button" class="back-btn" on:click={onLinkedBack} aria-label="Back to source entry">
        <span class="material-symbols-outlined" aria-hidden="true">arrow_back</span>
      </button>
    </div>
  {/if}

  {#if !openDocumentId}
    <div class="editor-empty">
      <span class="material-symbols-outlined empty-icon">edit_note</span>
      <p>Select or create an item to get started</p>
    </div>
  {:else if activeSection === "fragments"}
    <FragmentEditor
      {openDocumentId}
      {openDocumentName}
      {openDocumentContent}
      {onDocumentContentChange}
      {onOpenDocument}
      {onDeleteDocument}
      externalEditRequested={!previewOnly}
    />
  {:else if activeSection === "todos"}
    <TodoEditor
      {openDocumentId}
      {openDocumentName}
      {openDocumentContent}
      {onDocumentContentChange}
    />
  {:else if activeSection === "lists"}
    <ListEditor
      {openDocumentId}
      {openDocumentName}
      {openDocumentContent}
      {onDocumentContentChange}
    />
  {:else}
    <MarkdownEditor
      {openDocumentId}
      {openDocumentName}
      {openDocumentContent}
      {onDocumentContentChange}
      {onOpenDocument}
      {previewOnly}
    />
  {/if}
</main>

<style>
  .editor-panel {
    background: var(--bg-editor);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow: hidden;
  }

  .editor-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border-soft);
    background: color-mix(in srgb, var(--surface-1) 90%, var(--bg-editor) 10%);
    color: var(--text-primary);
    padding: 0;
    cursor: pointer;
  }

  .back-btn:hover {
    background: var(--bg-hover);
  }

  .editor-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-dim);

    .empty-icon {
      font-size: 2.4rem;
      opacity: 0.5;
    }

    p {
      font-size: 0.88rem;
    }
  }
</style>
