<script lang="ts">
  import { onMount } from "svelte";
  import { get } from "svelte/store";
  import { prdStore, type PrdTask } from "$lib/stores/prd";
  import { characterState } from "$lib/stores/character";
  import { claudeStore } from "$lib/stores/claude";

  interface Props {
    onClose: () => void;
    workingDirectory: string;
    onBackToWorkflow?: () => void;
  }

  const { onClose, workingDirectory, onBackToWorkflow }: Props = $props();

  const tasks = $derived(prdStore.tasks);
  const goal = $derived(prdStore.goal);
  const isGenerating = $derived(prdStore.isGenerating);
  const isLoaded = $derived(prdStore.isLoaded);
  const isLoading = $derived(prdStore.isLoading);
  const isSaving = $derived(prdStore.isSaving);

  let goalInput = $state("");
  let previousCharacterState = $state<string>("idle");

  onMount(() => {
    prdStore.loadFromFile(workingDirectory);
  });

  $effect(() => {
    if ($isLoaded) {
      goalInput = $goal;
    }
  });

  // Auto-reload hikari-tasks.json when Claude finishes generating it
  $effect(() => {
    const currentState = $characterState;
    if ($isGenerating && previousCharacterState !== "idle" && currentState === "idle") {
      void prdStore.loadFromFile(workingDirectory).then(() => {
        prdStore.finishGenerating();
      });
    }
    previousCharacterState = currentState;
  });

  async function handleGenerate(): Promise<void> {
    if (!goalInput.trim()) return;
    const conversationId = get(claudeStore.activeConversationId);
    if (!conversationId) return;
    await prdStore.generatePrd(goalInput.trim(), workingDirectory, conversationId);
  }

  function handleRegenerate(): void {
    prdStore.reset();
    goalInput = "";
  }

  async function handleSave(): Promise<void> {
    await prdStore.saveToFile(workingDirectory);
  }

  async function handleExecute(): Promise<void> {
    const conversationId = get(claudeStore.activeConversationId);
    if (!conversationId) return;
    await prdStore.executePrd(workingDirectory, conversationId);
    onClose();
  }

  function handleUpdateTask(id: string, field: keyof Omit<PrdTask, "id">, value: string): void {
    if (field === "priority") {
      prdStore.updateTask(id, { priority: value as PrdTask["priority"] });
    } else {
      prdStore.updateTask(id, { [field]: value });
    }
  }

  function priorityColour(priority: PrdTask["priority"]): string {
    switch (priority) {
      case "high":
        return "bg-red-500/20 text-red-400 border-red-500/30";
      case "medium":
        return "bg-amber-500/20 text-amber-400 border-amber-500/30";
      case "low":
        return "bg-green-500/20 text-green-400 border-green-500/30";
    }
  }
</script>

<div
  class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
  onclick={onClose}
  role="button"
  tabindex="0"
  onkeydown={(e) => e.key === "Escape" && onClose()}
>
  <div
    class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-3xl w-full max-h-[90vh] flex flex-col"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
    role="dialog"
    aria-labelledby="prd-panel-title"
    tabindex="-1"
  >
    <!-- Header -->
    <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
      <div class="flex items-center gap-3">
        <h2 id="prd-panel-title" class="text-xl font-semibold text-[var(--text-primary)]">
          PRD Creator
        </h2>
        {#if $isGenerating}
          <span class="text-xs text-[var(--text-tertiary)]">Generating tasks...</span>
        {:else if $isLoading}
          <span class="text-xs text-[var(--text-tertiary)]">Loading...</span>
        {:else if $isLoaded}
          <span
            class="text-xs px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 border border-green-500/30"
          >
            {$tasks.length} task{$tasks.length === 1 ? "" : "s"}
          </span>
        {/if}
      </div>
      <div class="flex items-center gap-2">
        {#if onBackToWorkflow}
          <button
            onclick={onBackToWorkflow}
            class="px-2 py-1 text-xs text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-md transition-colors"
          >
            ← Workflow
          </button>
        {/if}
        <button
          onclick={onClose}
          class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
          aria-label="Close"
        >
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
    </div>

    <!-- Body -->
    <div class="flex-1 overflow-y-auto p-4 min-h-0">
      {#if $isGenerating}
        <!-- Generating -->
        <div class="flex flex-col items-center justify-center h-full gap-4 text-center py-16">
          <div class="text-4xl animate-spin">⚙️</div>
          <h3 class="text-lg font-semibold text-[var(--text-primary)]">Generating Tasks...</h3>
          <p class="text-sm text-[var(--text-secondary)]">
            Claude is breaking down your goal into actionable tasks and writing
            <span class="font-mono text-xs">hikari-tasks.json</span>. This will auto-reload when
            complete.
          </p>
        </div>
      {:else if $isLoaded}
        <!-- Task review -->
        <div class="flex flex-col gap-3">
          <div
            class="text-sm text-[var(--text-secondary)] bg-[var(--bg-secondary)] rounded-lg px-4 py-2 border border-[var(--border-color)]"
          >
            <span class="text-[var(--text-tertiary)] font-medium">Goal:</span>
            {$goal}
          </div>
          {#each $tasks as task, index (task.id)}
            <div
              class="bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4 flex flex-col gap-3"
            >
              <!-- Task header row -->
              <div class="flex items-center gap-2">
                <span class="text-xs text-[var(--text-tertiary)] font-mono w-8 shrink-0"
                  >#{index + 1}</span
                >
                <input
                  type="text"
                  value={task.title}
                  oninput={(e) =>
                    handleUpdateTask(task.id, "title", (e.target as HTMLInputElement).value)}
                  class="flex-1 bg-transparent text-sm font-medium text-[var(--text-primary)] border-b border-transparent hover:border-[var(--border-color)] focus:border-[var(--accent-primary)] focus:outline-none transition-colors py-0.5"
                  placeholder="Task title"
                />
                <select
                  value={task.priority}
                  onchange={(e) =>
                    handleUpdateTask(task.id, "priority", (e.target as HTMLSelectElement).value)}
                  class="text-xs px-2 py-1 rounded-full border {priorityColour(
                    task.priority
                  )} bg-transparent cursor-pointer focus:outline-none"
                >
                  <option value="high">high</option>
                  <option value="medium">medium</option>
                  <option value="low">low</option>
                </select>
                <div class="flex items-center gap-1 shrink-0">
                  <button
                    onclick={() => prdStore.moveTaskUp(task.id)}
                    disabled={index === 0}
                    class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                    title="Move up"
                    aria-label="Move task up"
                  >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M5 15l7-7 7 7"
                      />
                    </svg>
                  </button>
                  <button
                    onclick={() => prdStore.moveTaskDown(task.id)}
                    disabled={index === $tasks.length - 1}
                    class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
                    title="Move down"
                    aria-label="Move task down"
                  >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M19 9l-7 7-7-7"
                      />
                    </svg>
                  </button>
                  <button
                    onclick={() => prdStore.removeTask(task.id)}
                    class="p-1 text-[var(--text-secondary)] hover:text-red-400 transition-colors"
                    title="Remove task"
                    aria-label="Remove task"
                  >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
                      />
                    </svg>
                  </button>
                </div>
              </div>
              <!-- Prompt textarea -->
              <textarea
                value={task.prompt}
                oninput={(e) =>
                  handleUpdateTask(task.id, "prompt", (e.target as HTMLTextAreaElement).value)}
                rows={3}
                class="w-full bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg p-3 font-mono text-xs text-[var(--text-secondary)] resize-y focus:outline-none focus:border-[var(--accent-primary)] leading-relaxed"
                placeholder="Prompt for Claude Code..."
              ></textarea>
            </div>
          {/each}
          {#if $tasks.length === 0}
            <p class="text-sm text-[var(--text-tertiary)] text-center py-4">
              No tasks — all removed. Click Regenerate to start over.
            </p>
          {/if}
        </div>
      {:else}
        <!-- Input form -->
        <div class="flex flex-col gap-4">
          <div>
            <label
              for="prd-goal"
              class="block text-sm font-medium text-[var(--text-secondary)] mb-2"
            >
              What do you want to build?
            </label>
            <textarea
              id="prd-goal"
              bind:value={goalInput}
              rows={5}
              class="w-full bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg p-4 text-sm text-[var(--text-primary)] resize-none focus:outline-none focus:border-[var(--accent-primary)] leading-relaxed"
              placeholder="Describe the feature or project you want Claude to break down into tasks…"
              spellcheck="false"
            ></textarea>
          </div>
          <p class="text-xs text-[var(--text-tertiary)]">
            Claude will analyse your goal and write a
            <span class="font-mono">hikari-tasks.json</span> file with 3–10 actionable tasks, each with
            a detailed prompt ready to execute.
          </p>
        </div>
      {/if}
    </div>

    <!-- Footer -->
    <div
      class="flex items-center justify-between p-4 pt-2 border-t border-[var(--border-color)] gap-3"
    >
      <div class="text-xs text-[var(--text-tertiary)] font-mono">
        {workingDirectory}/hikari-tasks.json
      </div>
      <div class="flex items-center gap-2">
        {#if $isLoaded}
          <button
            onclick={handleRegenerate}
            class="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-colors"
          >
            Regenerate
          </button>
          <button
            onclick={handleSave}
            disabled={$isSaving}
            class="px-3 py-1.5 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {$isSaving ? "Saving..." : "Save"}
          </button>
          <button
            onclick={handleExecute}
            disabled={$tasks.length === 0}
            class="px-4 py-1.5 text-sm btn-trans-gradient rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Execute
          </button>
        {:else if !$isGenerating}
          <button
            onclick={handleGenerate}
            disabled={!goalInput.trim()}
            class="px-4 py-1.5 text-sm btn-trans-gradient rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          >
            Generate PRD
          </button>
        {/if}
      </div>
    </div>
  </div>
</div>

<style>
  [role="dialog"] {
    animation: slideIn 0.2s ease-out;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  textarea {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }

  textarea::-webkit-scrollbar {
    width: 8px;
  }

  textarea::-webkit-scrollbar-track {
    background: transparent;
  }

  textarea::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
  }

  textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-primary);
  }
</style>
