<script setup lang="ts">
import { useSettingsStore } from '../stores/settingsStore';
import CustomSelect from './CustomSelect.vue';
import { X } from 'lucide-vue-next';
import { computed } from 'vue';

const emit = defineEmits(['close']);
const settings = useSettingsStore();

const fontOptions = [
  "Fira Code, Consolas, monospace",
  "Consolas, 'Courier New', monospace",
  "'Courier New', Courier, monospace",
  "Monaco, Menlo, 'Ubuntu Mono', monospace",
  "Arial, sans-serif"
];

const displayFontOptions = computed(() => {
  return fontOptions.map(font => ({
    value: font,
    label: font.split(',')[0].replace(/['"]/g, '')
  }));
});
</script>

<template>
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="emit('close')">
    <div class="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md animate-in fade-in zoom-in-95 duration-200">
      <!-- Header -->
      <div class="flex items-center justify-between px-6 py-4 border-b border-slate-800 bg-slate-950/50 rounded-t-xl">
        <h2 class="text-lg font-semibold text-slate-100">Editor Settings</h2>
        <button 
          @click="emit('close')" 
          class="text-slate-400 hover:text-white transition-colors p-1 hover:bg-slate-800 rounded-md"
        >
          <X class="w-5 h-5" />
        </button>
      </div>

      <!-- Content -->
      <div class="p-6 space-y-6">
        <!-- Font Size -->
        <div class="space-y-3">
          <div class="flex justify-between items-center">
            <label class="text-sm font-medium text-slate-300">Font Size</label>
            <span class="text-xs font-mono text-slate-500 bg-slate-950 px-2 py-1 rounded border border-slate-800">
              {{ settings.editorFontSize }}px
            </span>
          </div>
          <input 
            type="range" 
            v-model.number="settings.editorFontSize" 
            min="10" 
            max="24" 
            step="1"
            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500 hover:accent-indigo-400"
          >
        </div>

        <!-- Font Family -->
        <div class="space-y-3">
          <label class="text-sm font-medium text-slate-300">Font Family</label>
          <div class="space-y-2">
            <CustomSelect
              v-model="settings.editorFontFamily"
              :options="displayFontOptions"
              :full-width="true"
              placeholder="Select or enter font family"
            />
            <input 
              v-if="!fontOptions.includes(settings.editorFontFamily)"
              type="text" 
              v-model="settings.editorFontFamily" 
              placeholder="e.g. 'JetBrains Mono', monospace"
              class="w-full bg-slate-950 border border-slate-700 text-slate-300 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5 font-mono"
            >
          </div>
        </div>
      </div>

      <!-- Footer -->
      <div class="px-6 py-4 bg-slate-950/50 border-t border-slate-800 flex justify-end rounded-b-xl">
        <button 
          @click="emit('close')" 
          class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 text-sm font-medium rounded-lg transition-colors border border-slate-700"
        >
          Done
        </button>
      </div>
    </div>
  </div>
</template>
