<script lang="ts">
  import { api } from "../lib/api";
  import {
    agentGraph,
  } from "../lib/stores";
  import Modal from "./Modal.svelte";

  interface Props {
    agentId: string;
    onerror?: (msg: string) => void;
    ontooltipschanged?: () => void;
  }

  let { agentId, onerror, ontooltipschanged }: Props = $props();

  let editing = $state(false);
  let sourceId = $state("");
  let targetId = $state("");
  let editedCondition = $state("");
  let saving = $state(false);
  let saved = $state(false);
  let transitionTextarea: HTMLTextAreaElement;

  export function open(src: string, tgt: string, condition: string) {
    sourceId = src;
    targetId = tgt;
    editedCondition = condition;
    editing = true;
    saved = false;
    requestAnimationFrame(() => {
      transitionTextarea?.focus();
    });
  }

  export function isOpen(): boolean {
    return editing;
  }

  export function close() {
    if (saving) return;
    editing = false;
    sourceId = "";
    targetId = "";
    editedCondition = "";
  }

  async function saveTransition() {
    if (!agentId || !sourceId || !targetId) return;
    saving = true;
    try {
      const result = await api.updatePrompt(
        agentId,
        sourceId,
        editedCondition,
        targetId,
      );
      agentGraph.set(result);
      saved = true;
      setTimeout(() => {
        saved = false;
        editing = false;
        sourceId = "";
        targetId = "";
      }, 800);
      ontooltipschanged?.();
    } catch (e) {
      onerror?.(e instanceof Error ? e.message : String(e));
    }
    saving = false;
  }
</script>

<Modal open={editing} title="Edit Transition: {sourceId} → {targetId}" onclose={close} class="node-prompt-modal">
  <div class="modal-body">
    <textarea
      class="prompt-textarea"
      bind:value={editedCondition}
      bind:this={transitionTextarea}
      disabled={saving}
      rows="6"
    ></textarea>
    <div class="modal-actions">
      {#if saved}
        <span class="save-indicator saved">Saved</span>
      {/if}
      <button onclick={close} disabled={saving}>Cancel</button>
      <button class="btn-primary" onclick={saveTransition} disabled={saving}>
        {saving ? "Saving..." : "Save"}
      </button>
    </div>
  </div>
</Modal>

<style>
  :global(dialog.node-prompt-modal) {
    min-width: 500px;
    max-width: 700px;
  }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: var(--space-3);
  }
</style>
