<script lang="ts">
  import { configStore, type HikariConfig, type Theme } from "$lib/stores/config";
  import { claudeStore } from "$lib/stores/claude";

  let config: HikariConfig = $state({
    model: null,
    api_key: null,
    custom_instructions: null,
    mcp_servers_json: null,
    auto_granted_tools: [],
    theme: "dark",
    greeting_enabled: true,
    greeting_custom_prompt: null,
  });

  let isOpen = $state(false);
  let isSaving = $state(false);
  let saveError: string | null = $state(null);
  let newToolName = $state("");
  let showApiKey = $state(false);
  let grantedTools: string[] = $state([]);

  configStore.config.subscribe((c) => {
    config = { ...c };
  });

  configStore.isSidebarOpen.subscribe((open) => {
    isOpen = open;
  });

  configStore.saveError.subscribe((error) => {
    saveError = error;
  });

  claudeStore.grantedTools.subscribe((tools) => {
    grantedTools = Array.from(tools);
  });

  const availableModels = [
    { value: "", label: "Default (from ~/.claude)" },
    { value: "claude-sonnet-4-20250514", label: "Claude Sonnet 4" },
    { value: "claude-opus-4-20250514", label: "Claude Opus 4" },
  ];

  const commonTools = [
    "Read",
    "Write",
    "Edit",
    "Bash",
    "Glob",
    "Grep",
    "WebFetch",
    "WebSearch",
    "Task",
  ];

  async function handleSave() {
    isSaving = true;
    saveError = null;
    try {
      await configStore.saveConfig(config);
    } catch {
      // Error is handled by the store
    } finally {
      isSaving = false;
    }
  }

  async function handleThemeChange(theme: Theme) {
    config.theme = theme;
    await configStore.setTheme(theme);
  }

  function toggleTool(tool: string) {
    if (config.auto_granted_tools.includes(tool)) {
      config.auto_granted_tools = config.auto_granted_tools.filter((t) => t !== tool);
    } else {
      config.auto_granted_tools = [...config.auto_granted_tools, tool];
    }
  }

  function addCustomTool() {
    if (newToolName.trim() && !config.auto_granted_tools.includes(newToolName.trim())) {
      config.auto_granted_tools = [...config.auto_granted_tools, newToolName.trim()];
      newToolName = "";
    }
  }

  function removeTool(tool: string) {
    config.auto_granted_tools = config.auto_granted_tools.filter((t) => t !== tool);
  }

  function importFromSession() {
    config.auto_granted_tools = [...new Set([...config.auto_granted_tools, ...grantedTools])];
  }
</script>

<!-- Backdrop -->
{#if isOpen}
  <div
    class="fixed inset-0 bg-black/50 z-40 transition-opacity"
    onclick={configStore.closeSidebar}
    onkeydown={(e) => e.key === "Escape" && configStore.closeSidebar()}
    role="button"
    tabindex="-1"
    aria-label="Close sidebar"
  ></div>
{/if}

<!-- Sidebar -->
<aside
  class="fixed right-0 top-0 h-full w-96 bg-[var(--bg-secondary)] border-l border-[var(--border-color)] z-50 transform transition-transform duration-300 ease-in-out overflow-y-auto {isOpen
    ? 'translate-x-0'
    : 'translate-x-full'}"
>
  <div class="p-4">
    <!-- Header -->
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-lg font-semibold text-[var(--text-primary)]">Settings</h2>
      <button
        onclick={configStore.closeSidebar}
        class="p-1 text-gray-400 hover:text-white transition-colors"
        aria-label="Close settings"
      >
        <svg class="w-6 h-6" 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>

    {#if saveError}
      <div class="mb-4 p-3 bg-red-500/20 border border-red-500/50 rounded-lg text-red-400 text-sm">
        {saveError}
      </div>
    {/if}

    <!-- Agent Settings Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Agent Settings
      </h3>

      <!-- Model Selection -->
      <div class="mb-4">
        <label for="model" class="block text-sm text-gray-400 mb-1">Model</label>
        <select
          id="model"
          bind:value={config.model}
          class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
        >
          {#each availableModels as model (model.value)}
            <option value={model.value}>{model.label}</option>
          {/each}
        </select>
      </div>

      <!-- API Key -->
      <div class="mb-4">
        <label for="api-key" class="block text-sm text-gray-400 mb-1">
          API Key <span class="text-gray-600">(optional override)</span>
        </label>
        <div class="relative">
          <input
            id="api-key"
            type={showApiKey ? "text" : "password"}
            bind:value={config.api_key}
            placeholder="Falls back to ~/.claude settings"
            class="w-full px-3 py-2 pr-10 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
          />
          <button
            type="button"
            onclick={() => (showApiKey = !showApiKey)}
            class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
            aria-label={showApiKey ? "Hide API key" : "Show API key"}
          >
            {#if showApiKey}
              <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="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
                />
              </svg>
            {:else}
              <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 12a3 3 0 11-6 0 3 3 0 016 0z"
                />
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                />
              </svg>
            {/if}
          </button>
        </div>
      </div>

      <!-- Custom Instructions -->
      <div class="mb-4">
        <label for="instructions" class="block text-sm text-gray-400 mb-1"
          >Custom Instructions</label
        >
        <textarea
          id="instructions"
          bind:value={config.custom_instructions}
          rows="4"
          placeholder="Additional instructions for the agent..."
          class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)] resize-none"
        ></textarea>
      </div>
    </section>

    <!-- Greeting Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Greeting
      </h3>

      <!-- Enable/Disable Toggle -->
      <div class="mb-4">
        <label class="flex items-center gap-3 cursor-pointer">
          <input
            type="checkbox"
            bind:checked={config.greeting_enabled}
            class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
          />
          <span class="text-sm text-gray-300">Send greeting on connect</span>
        </label>
        <p class="text-xs text-gray-500 mt-1 ml-7">
          Automatically greet you when a session starts with time-based messages
        </p>
      </div>

      <!-- Custom Greeting Prompt -->
      {#if config.greeting_enabled}
        <div class="mb-4">
          <label for="greeting-prompt" class="block text-sm text-gray-400 mb-1">
            Custom Greeting Prompt <span class="text-gray-600">(optional)</span>
          </label>
          <textarea
            id="greeting-prompt"
            bind:value={config.greeting_custom_prompt}
            rows="3"
            placeholder="Leave empty for time-based greetings, or customize how you'd like to be greeted..."
            class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)] resize-none"
          ></textarea>
        </div>
      {/if}
    </section>

    <!-- MCP Servers Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        MCP Servers
      </h3>
      <div class="mb-2">
        <label for="mcp-config" class="block text-sm text-gray-400 mb-1">
          Server Configuration <span class="text-gray-600">(JSON)</span>
        </label>
        <textarea
          id="mcp-config"
          bind:value={config.mcp_servers_json}
          rows="6"
          placeholder={`{\n  "servers": {\n    "example": {\n      "command": "npx",\n      "args": ["-y", "@example/mcp-server"]\n    }\n  }\n}`}
          class="w-full px-3 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] font-mono text-sm focus:outline-none focus:border-[var(--accent-primary)] resize-none"
        ></textarea>
      </div>
    </section>

    <!-- Auto-Granted Tools Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Auto-Granted Tools
      </h3>
      <p class="text-xs text-gray-500 mb-3">
        These tools will be pre-approved for every session (no permission prompts).
      </p>

      <!-- Common tools checkboxes -->
      <div class="grid grid-cols-2 gap-2 mb-3">
        {#each commonTools as tool (tool)}
          <label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
            <input
              type="checkbox"
              checked={config.auto_granted_tools.includes(tool)}
              onchange={() => toggleTool(tool)}
              class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
            />
            {tool}
          </label>
        {/each}
      </div>

      <!-- Currently granted tools (with import) -->
      {#if grantedTools.length > 0}
        <div class="mb-3">
          <div class="flex items-center justify-between mb-2">
            <span class="text-xs text-gray-500">Session-granted tools:</span>
            <button
              onclick={importFromSession}
              class="text-xs text-[var(--accent-primary)] hover:text-[var(--accent-secondary)] transition-colors"
            >
              Import all
            </button>
          </div>
          <div class="flex flex-wrap gap-1">
            {#each grantedTools as tool (tool)}
              <span
                class="px-2 py-0.5 text-xs bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] rounded"
              >
                {tool}
              </span>
            {/each}
          </div>
        </div>
      {/if}

      <!-- Custom tools list -->
      {#if config.auto_granted_tools.filter((t) => !commonTools.includes(t)).length > 0}
        <div class="mb-3">
          <span class="text-xs text-gray-500 block mb-2">Custom tools:</span>
          <div class="flex flex-wrap gap-1">
            {#each config.auto_granted_tools.filter((t) => !commonTools.includes(t)) as tool (tool)}
              <span
                class="px-2 py-0.5 text-xs bg-[var(--bg-primary)] border border-[var(--border-color)] rounded flex items-center gap-1"
              >
                {tool}
                <button
                  onclick={() => removeTool(tool)}
                  class="text-gray-500 hover:text-red-400"
                  aria-label="Remove {tool}"
                >
                  ×
                </button>
              </span>
            {/each}
          </div>
        </div>
      {/if}

      <!-- Add custom tool -->
      <div class="flex gap-2">
        <input
          type="text"
          bind:value={newToolName}
          placeholder="Add custom tool..."
          onkeydown={(e) => e.key === "Enter" && addCustomTool()}
          class="flex-1 px-3 py-1.5 text-sm bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg text-[var(--text-primary)] focus:outline-none focus:border-[var(--accent-primary)]"
        />
        <button
          onclick={addCustomTool}
          disabled={!newToolName.trim()}
          class="px-3 py-1.5 text-sm bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          Add
        </button>
      </div>
    </section>

    <!-- Appearance Section -->
    <section class="mb-6">
      <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
        Appearance
      </h3>
      <div class="flex gap-2">
        <button
          onclick={() => handleThemeChange("dark")}
          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-gray-400 hover:border-[var(--accent-primary)]'}"
        >
          Dark
        </button>
        <button
          onclick={() => handleThemeChange("light")}
          class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
            ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-gray-400 hover:border-[var(--accent-primary)]'}"
        >
          Light
        </button>
      </div>
    </section>

    <!-- Save Button -->
    <div class="sticky bottom-0 pt-4 pb-2 bg-[var(--bg-secondary)]">
      <button
        onclick={handleSave}
        disabled={isSaving}
        class="w-full py-3 bg-[var(--accent-primary)] hover:bg-[var(--accent-secondary)] text-white font-medium rounded-lg transition-colors disabled:opacity-50"
      >
        {isSaving ? "Saving..." : "Save Settings"}
      </button>
    </div>
  </div>
</aside>
