<script lang="ts">
  import { onMount } from "svelte";
  import { quickActionsStore, type QuickAction } from "$lib/stores/quickActions";

  interface Props {
    onClose: () => void;
    onAction: (prompt: string) => void;
  }

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

  let editingAction = $state<QuickAction | null>(null);
  let isCreating = $state(false);
  let showDeleteConfirm = $state<string | null>(null);

  let editName = $state("");
  let editPrompt = $state("");
  let editIcon = $state("zap");

  const actions = $derived(quickActionsStore.actions);
  const isLoading = $derived(quickActionsStore.isLoading);

  const availableIcons = [
    { id: "zap", label: "Lightning" },
    { id: "play", label: "Play" },
    { id: "file-text", label: "File" },
    { id: "alert-circle", label: "Alert" },
    { id: "check-square", label: "Check" },
    { id: "refresh-cw", label: "Refresh" },
    { id: "git-pull-request", label: "Git PR" },
    { id: "code", label: "Code" },
    { id: "search", label: "Search" },
    { id: "terminal", label: "Terminal" },
    { id: "bug", label: "Bug" },
    { id: "shield", label: "Shield" },
  ];

  onMount(() => {
    quickActionsStore.loadQuickActions();
  });

  function handleAction(action: QuickAction): void {
    onAction(action.prompt);
    onClose();
  }

  function handleStartCreate(): void {
    isCreating = true;
    editingAction = null;
    editName = "";
    editPrompt = "";
    editIcon = "zap";
  }

  function handleStartEdit(action: QuickAction): void {
    editingAction = action;
    isCreating = false;
    editName = action.name;
    editPrompt = action.prompt;
    editIcon = action.icon;
  }

  function handleCancelEdit(): void {
    editingAction = null;
    isCreating = false;
  }

  async function handleSave(): Promise<void> {
    if (!editName.trim() || !editPrompt.trim()) {
      return;
    }

    if (isCreating) {
      await quickActionsStore.createQuickAction(editName.trim(), editPrompt.trim(), editIcon);
    } else if (editingAction) {
      await quickActionsStore.updateQuickAction(
        editingAction.id,
        editName.trim(),
        editPrompt.trim(),
        editIcon
      );
    }

    handleCancelEdit();
  }

  async function handleDelete(actionId: string): Promise<void> {
    await quickActionsStore.deleteQuickAction(actionId);
    showDeleteConfirm = null;
  }

  function getIconSvg(icon: string): string {
    const icons: Record<string, string> = {
      "git-pull-request":
        '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 3v12M18 9a3 3 0 100 6 3 3 0 000-6zm0 0V3m0 18v-6M6 21a3 3 0 100-6 3 3 0 000 6z" />',
      play: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />',
      "file-text":
        '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />',
      "alert-circle":
        '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />',
      "check-square":
        '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />',
      "refresh-cw":
        '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />',
      zap: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />',
      code: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />',
      search:
        '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />',
      terminal:
        '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />',
      bug: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />',
      shield:
        '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />',
    };
    return icons[icon] || icons["zap"];
  }
</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-2xl w-full max-h-[80vh] overflow-hidden flex flex-col"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
    role="dialog"
    aria-labelledby="quick-actions-title"
    tabindex="-1"
  >
    <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
      <div class="flex items-center gap-3">
        {#if editingAction || isCreating}
          <button
            onclick={handleCancelEdit}
            class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
            aria-label="Back to list"
          >
            <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="M15 19l-7-7 7-7"
              />
            </svg>
          </button>
        {/if}
        <h2 id="quick-actions-title" class="text-xl font-semibold text-[var(--text-primary)]">
          {#if isCreating}
            Create Quick Action
          {:else if editingAction}
            Edit Quick Action
          {:else}
            Quick Actions
          {/if}
        </h2>
      </div>
      <div class="flex items-center gap-2">
        {#if !editingAction && !isCreating}
          <button
            onclick={handleStartCreate}
            class="px-3 py-1.5 text-sm font-medium btn-trans-gradient rounded flex items-center gap-2"
          >
            <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="M12 4v16m8-8H4"
              />
            </svg>
            New Action
          </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>

    {#if editingAction || isCreating}
      <div class="p-6 flex-1 overflow-y-auto">
        <div class="space-y-4">
          <div>
            <label
              for="action-name"
              class="block text-sm font-medium text-[var(--text-secondary)] mb-1"
            >
              Name
            </label>
            <input
              id="action-name"
              type="text"
              bind:value={editName}
              placeholder="Enter action name..."
              class="w-full px-4 py-2 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-tertiary)] focus:outline-none focus:border-[var(--accent-primary)]"
            />
          </div>

          <div>
            <label
              for="action-icon"
              class="block text-sm font-medium text-[var(--text-secondary)] mb-1"
            >
              Icon
            </label>
            <div class="grid grid-cols-6 gap-2">
              {#each availableIcons as icon (icon.id)}
                <button
                  onclick={() => (editIcon = icon.id)}
                  class="p-3 rounded-lg border transition-colors {editIcon === icon.id
                    ? 'bg-[var(--accent-primary)]/10 border-[var(--accent-primary)] text-[var(--accent-primary)]'
                    : 'bg-[var(--bg-secondary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]/50'}"
                  title={icon.label}
                >
                  <svg
                    class="w-5 h-5 mx-auto"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <!-- eslint-disable-next-line svelte/no-at-html-tags -- Icons are from controlled internal function -->
                    {@html getIconSvg(icon.id)}
                  </svg>
                </button>
              {/each}
            </div>
          </div>

          <div>
            <label
              for="action-prompt"
              class="block text-sm font-medium text-[var(--text-secondary)] mb-1"
            >
              Prompt
            </label>
            <textarea
              id="action-prompt"
              bind:value={editPrompt}
              placeholder="Enter the prompt to send..."
              rows="4"
              class="w-full px-4 py-3 bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] placeholder-[var(--text-tertiary)] focus:outline-none focus:border-[var(--accent-primary)] resize-none font-mono text-sm"
            ></textarea>
          </div>

          <div class="flex justify-end gap-2 pt-4">
            <button
              onclick={handleCancelEdit}
              class="px-4 py-2 text-sm font-medium bg-[var(--bg-secondary)] text-[var(--text-secondary)] rounded-lg hover:bg-[var(--bg-tertiary)] transition-colors"
            >
              Cancel
            </button>
            <button
              onclick={handleSave}
              disabled={!editName.trim() || !editPrompt.trim()}
              class="px-4 py-2 text-sm font-medium btn-trans-gradient rounded-lg"
            >
              {isCreating ? "Create" : "Save"}
            </button>
          </div>
        </div>
      </div>
    {:else}
      <div class="flex-1 overflow-y-auto p-6">
        {#if $isLoading}
          <div class="flex items-center justify-center p-8">
            <div class="text-[var(--text-tertiary)]">Loading quick actions...</div>
          </div>
        {:else if $actions.length === 0}
          <div class="flex flex-col items-center justify-center p-8 text-center">
            <svg
              class="w-16 h-16 text-[var(--text-tertiary)] mb-4"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
                d="M13 10V3L4 14h7v7l9-11h-7z"
              />
            </svg>
            <p class="text-[var(--text-secondary)]">No quick actions available</p>
            <button
              onclick={handleStartCreate}
              class="mt-4 px-4 py-2 text-sm font-medium btn-trans-gradient rounded-lg"
            >
              Create your first action
            </button>
          </div>
        {:else}
          <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
            {#each $actions as action (action.id)}
              <div
                class="group relative bg-[var(--bg-secondary)] border border-[var(--border-color)] rounded-lg hover:border-[var(--accent-primary)]/50 transition-colors"
              >
                <button onclick={() => handleAction(action)} class="w-full p-4 text-left">
                  <div class="flex items-center gap-3 mb-2">
                    <div
                      class="w-10 h-10 rounded-lg bg-[var(--accent-primary)]/10 flex items-center justify-center text-[var(--accent-primary)]"
                    >
                      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <!-- eslint-disable-next-line svelte/no-at-html-tags -- Icons are from controlled internal function -->
                        {@html getIconSvg(action.icon)}
                      </svg>
                    </div>
                    <div class="flex-1 min-w-0">
                      <h3 class="font-medium text-[var(--text-primary)] truncate">{action.name}</h3>
                      {#if action.is_default}
                        <span class="text-xs text-[var(--text-tertiary)]">Default</span>
                      {:else}
                        <span class="text-xs text-[var(--accent-secondary)]">Custom</span>
                      {/if}
                    </div>
                  </div>
                  <p class="text-xs text-[var(--text-tertiary)] line-clamp-2">{action.prompt}</p>
                </button>
                <div
                  class="absolute top-2 right-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  <button
                    onclick={(e) => {
                      e.stopPropagation();
                      handleStartEdit(action);
                    }}
                    class="p-1.5 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] bg-[var(--bg-primary)] rounded transition-colors"
                    title="Edit action"
                  >
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
                      />
                    </svg>
                  </button>
                  {#if !action.is_default}
                    {#if showDeleteConfirm === action.id}
                      <div class="flex items-center gap-1 bg-[var(--bg-primary)] rounded p-1">
                        <button
                          onclick={(e) => {
                            e.stopPropagation();
                            handleDelete(action.id);
                          }}
                          class="px-2 py-0.5 text-xs font-medium bg-red-500 text-white rounded hover:bg-red-600 transition-colors"
                        >
                          Delete
                        </button>
                        <button
                          onclick={(e) => {
                            e.stopPropagation();
                            showDeleteConfirm = null;
                          }}
                          class="px-2 py-0.5 text-xs font-medium bg-[var(--bg-tertiary)] text-[var(--text-secondary)] rounded hover:bg-[var(--bg-secondary)] transition-colors"
                        >
                          Cancel
                        </button>
                      </div>
                    {:else}
                      <button
                        onclick={(e) => {
                          e.stopPropagation();
                          showDeleteConfirm = action.id;
                        }}
                        class="p-1.5 text-[var(--text-tertiary)] hover:text-red-400 bg-[var(--bg-primary)] rounded transition-colors"
                        title="Delete action"
                      >
                        <svg
                          class="w-3.5 h-3.5"
                          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>
                    {/if}
                  {/if}
                </div>
              </div>
            {/each}
          </div>
        {/if}
      </div>
    {/if}
  </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);
    }
  }

  .overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }

  .overflow-y-auto::-webkit-scrollbar {
    width: 8px;
  }

  .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
  }

  .overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
  }

  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-primary);
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
</style>
