<script setup lang="ts">
import type { ConflictState } from '@/stores/editor'

defineProps<{
  conflict: ConflictState
  localContent: string
}>()

const emit = defineEmits<{
  'use-server': []
  'overwrite': []
  cancel: []
}>()
</script>

<template>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
    <div class="bg-surface-light dark:bg-surface-alt rounded-lg shadow-lg max-w-4xl w-full mx-4 max-h-[80vh] flex flex-col">
      <div class="p-4 border-b border-border-light dark:border-slate-700">
        <h2 class="text-lg font-semibold text-slate-800 dark:text-slate-200">Conflict Detected</h2>
        <p class="text-sm text-slate-500 mt-1">The file was modified on GitHub since you started editing. Choose a resolution:</p>
      </div>

      <div class="flex-1 overflow-auto p-4">
        <div class="grid grid-cols-2 gap-4">
          <div>
            <h3 class="text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">Your Version</h3>
            <pre class="p-3 bg-surface-light-alt dark:bg-surface rounded-lg text-xs font-mono overflow-auto max-h-80 border border-border-light dark:border-slate-700">{{ localContent }}</pre>
          </div>
          <div>
            <h3 class="text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">Server Version</h3>
            <pre class="p-3 bg-surface-light-alt dark:bg-surface rounded-lg text-xs font-mono overflow-auto max-h-80 border border-border-light dark:border-slate-700">{{ conflict.serverContent }}</pre>
          </div>
        </div>
      </div>

      <div class="p-4 border-t border-border-light dark:border-slate-700 flex justify-end gap-3">
        <button
          class="px-4 py-2 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"
          @click="emit('cancel')"
        >
          Cancel
        </button>
        <button
          class="px-4 py-2 text-sm rounded-md bg-brand-600 text-white hover:bg-brand-700"
          @click="emit('use-server')"
        >
          Use Server Version
        </button>
        <button
          class="px-4 py-2 text-sm rounded-md bg-amber-500 text-white hover:bg-amber-600"
          @click="emit('overwrite')"
        >
          Overwrite with Mine
        </button>
      </div>
    </div>
  </div>
</template>
