<script setup lang="ts">
import { ref } from 'vue'
import { useEditorStore } from '@/stores/editor'
import { storeToRefs } from 'pinia'
import { useClickOutside } from '@/composables/useClickOutside'
import type { PaneLayout } from '@/composables/useResizablePane'

const props = defineProps<{
  hideModeToggle?: boolean
  hidePreview?: boolean
  githubConnected?: boolean
  paneLayout?: PaneLayout
}>()

const store = useEditorStore()
const { mode, dirty, saving } = storeToRefs(store)

const emit = defineEmits<{
  save: []
  'save-pr': []
  preview: []
  'toggle-mode': []
  'set-layout': [layout: PaneLayout]
}>()

const showSaveMenu = ref(false)
const saveMenuRef = ref<HTMLElement | null>(null)
useClickOutside(saveMenuRef, () => { showSaveMenu.value = false })

function toggleMode() {
  emit('toggle-mode')
}

function handleSaveChoice(method: 'commit' | 'pr') {
  showSaveMenu.value = false
  if (method === 'commit') {
    emit('save')
  } else {
    emit('save-pr')
  }
}
</script>

<template>
  <div class="flex items-center gap-2 flex-wrap">
    <!-- Mode toggle -->
    <div v-if="!props.hideModeToggle" class="flex rounded-md border border-border-light dark:border-slate-600 overflow-hidden">
      <button
        class="px-3 py-1.5 text-xs font-medium transition-colors"
        :class="mode === 'source' ? 'bg-accent-500 text-white' : 'text-slate-600 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated'"
        @click="mode === 'structured' && toggleMode()"
      >
        Source
      </button>
      <button
        class="px-3 py-1.5 text-xs font-medium transition-colors"
        :class="mode === 'structured' ? 'bg-accent-500 text-white' : 'text-slate-600 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated'"
        @click="mode === 'source' && toggleMode()"
      >
        Structured
      </button>
    </div>

    <div class="flex-1"></div>

    <!-- Layout toggle (source mode only) -->
    <div v-if="!props.hidePreview && mode === 'source'" class="flex rounded-md border border-border-light dark:border-slate-600 overflow-hidden">
      <button
        class="p-1.5 transition-colors"
        :class="props.paneLayout === 'editor-only' ? 'bg-accent-500 text-white' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated'"
        title="Editor only"
        @click="emit('set-layout', props.paneLayout === 'editor-only' ? 'split' : 'editor-only')"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
          <rect x="1" y="2" width="14" height="12" rx="1.5" />
        </svg>
      </button>
      <button
        class="p-1.5 transition-colors"
        :class="props.paneLayout === 'split' || !props.paneLayout ? 'bg-accent-500 text-white' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated'"
        title="Split view"
        @click="emit('set-layout', 'split')"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
          <rect x="1" y="2" width="6" height="12" rx="1.5" />
          <rect x="9" y="2" width="6" height="12" rx="1.5" />
        </svg>
      </button>
      <button
        class="p-1.5 transition-colors"
        :class="props.paneLayout === 'preview-only' ? 'bg-accent-500 text-white' : 'text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated'"
        title="Preview only"
        @click="emit('set-layout', props.paneLayout === 'preview-only' ? 'split' : 'preview-only')"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
          <rect x="1" y="2" width="14" height="12" rx="1.5" />
          <line x1="8" y1="2" x2="8" y2="14" stroke-dasharray="2 2" />
        </svg>
      </button>
    </div>

    <!-- Fallback preview for structured mode -->
    <button
      v-if="!props.hidePreview && mode === 'structured'"
      class="px-3 py-1.5 text-sm rounded-md border border-border-light dark:border-slate-600 text-slate-600 dark:text-slate-400 hover:bg-surface-light-elevated dark:hover:bg-surface-elevated transition-colors"
      @click="emit('preview')"
    >
      Preview
    </button>

    <!-- Save button with dropdown -->
    <div ref="saveMenuRef" class="relative">
      <button
        class="px-3 py-1.5 text-sm rounded-md bg-accent-500 text-white hover:bg-accent-600 transition-colors disabled:opacity-50 flex items-center gap-1.5"
        :disabled="saving"
        @click="showSaveMenu = !showSaveMenu"
      >
        <template v-if="saving">
          <svg class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
          Saving...
        </template>
        <template v-else>
          Save
          <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
          </svg>
        </template>
      </button>

      <!-- Dropdown menu -->
      <div
        v-if="showSaveMenu"
        class="absolute right-0 z-20 mt-1 bg-surface-light dark:bg-surface-elevated border border-border-light dark:border-slate-700 rounded-lg shadow-lg py-1 min-w-[220px]"
      >
        <button
          class="w-full text-left px-3 py-2 hover:bg-surface-light-alt dark:hover:bg-surface-alt transition-colors"
          :disabled="!dirty"
          :class="!dirty ? 'opacity-40 cursor-not-allowed' : ''"
          @click="dirty && handleSaveChoice('commit')"
        >
          <div class="flex items-center gap-2">
            <svg class="w-4 h-4 text-accent-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75H6.912a2.25 2.25 0 00-2.15 1.588L2.35 13.177a2.25 2.25 0 00-.1.661V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 00-2.15-1.588H15M2.25 13.5h3.86a2.25 2.25 0 012.012 1.244l.256.512a2.25 2.25 0 002.013 1.244h3.218a2.25 2.25 0 002.013-1.244l.256-.512a2.25 2.25 0 012.013-1.244h3.859" />
            </svg>
            <div>
              <div class="text-sm font-medium text-slate-700 dark:text-slate-200">Commit to branch</div>
              <div class="text-[11px] text-slate-400 dark:text-slate-500">Save directly to the current branch</div>
            </div>
          </div>
        </button>
        <button
          class="w-full text-left px-3 py-2 hover:bg-surface-light-alt dark:hover:bg-surface-alt transition-colors"
          @click="handleSaveChoice('pr')"
        >
          <div class="flex items-center gap-2">
            <svg class="w-4 h-4 text-amber-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
            </svg>
            <div>
              <div class="text-sm font-medium text-slate-700 dark:text-slate-200">Open pull request</div>
              <div class="text-[11px] text-slate-400 dark:text-slate-500">Create a branch and PR for review</div>
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>
