<script setup lang="ts">
import { useRequestStore } from '../stores/requestStore';
import { ShieldCheck, Key, User, Lock, Fingerprint } from 'lucide-vue-next';
import CustomSelect from './CustomSelect.vue';
import { ref } from 'vue';

const store = useRequestStore();

const authTypes = [
  { value: 'none', label: 'No Auth' },
  { value: 'basic', label: 'Basic Auth' },
  { value: 'bearer', label: 'Bearer Token' },
  { value: 'api_key', label: 'API Key' },
];

const showPassword = ref(false);
const showApiKey = ref(false);
</script>

<template>
  <div class="h-full p-4 flex flex-col gap-6 overflow-y-auto text-slate-300">
    <!-- Type Selector -->
    <div class="flex flex-col gap-2">
      <label class="text-xs font-bold uppercase text-slate-500 tracking-wider">Authentication Type</label>
      <CustomSelect 
        v-model="store.activeRequest.auth.type"
        :options="authTypes"
        :full-width="true"
      />
    </div>

    <!-- Dynamic Content -->
    <div class="flex-1">
      
      <!-- No Auth -->
      <div v-if="store.activeRequest.auth.type === 'none'" class="flex flex-col items-center justify-center h-40 text-slate-600 gap-3">
        <ShieldCheck class="w-12 h-12 opacity-20" />
        <p class="text-sm">This request does not use any authentication.</p>
      </div>

      <!-- Basic Auth -->
      <div v-else-if="store.activeRequest.auth.type === 'basic'" class="flex flex-col gap-4 animate-fade-in">
        <div class="flex flex-col gap-1">
          <label class="text-xs font-medium text-slate-400">Username</label>
          <div class="relative">
            <User class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
            <input 
              type="text" 
              v-model="store.activeRequest.auth.basic.username"
              placeholder="username"
              class="w-full bg-slate-950 border border-slate-800 rounded-lg pl-10 pr-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none placeholder-slate-600"
            />
          </div>
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-xs font-medium text-slate-400">Password</label>
          <div class="relative">
            <Lock class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
            <input 
              :type="showPassword ? 'text' : 'password'"
              v-model="store.activeRequest.auth.basic.password"
              placeholder="password"
              class="w-full bg-slate-950 border border-slate-800 rounded-lg pl-10 pr-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none placeholder-slate-600"
            />
            <button 
                @click="showPassword = !showPassword"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500 hover:text-indigo-400 font-medium"
            >
                {{ showPassword ? 'Hide' : 'Show' }}
            </button>
          </div>
        </div>
      </div>

      <!-- Bearer Token -->
      <div v-else-if="store.activeRequest.auth.type === 'bearer'" class="flex flex-col gap-4 animate-fade-in">
         <div class="flex flex-col gap-1 h-full">
          <label class="text-xs font-medium text-slate-400">Token</label>
          <div class="relative flex-1 min-h-[120px]">
            <div class="absolute top-3 left-3 text-xs font-mono text-slate-500 select-none">Bearer</div>
            <textarea 
              v-model="store.activeRequest.auth.bearer.token"
              placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
              class="w-full h-full bg-slate-950 border border-slate-800 rounded-lg pl-14 pr-3 py-2 text-sm font-mono text-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none resize-none placeholder-slate-700 leading-relaxed"
            ></textarea>
          </div>
        </div>
      </div>

      <!-- API Key -->
      <div v-else-if="store.activeRequest.auth.type === 'api_key'" class="flex flex-col gap-4 animate-fade-in">
        <div class="flex flex-col gap-1">
          <label class="text-xs font-medium text-slate-400">Key</label>
          <div class="relative">
            <Key class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
            <input 
              type="text" 
              v-model="store.activeRequest.auth.apiKey.key"
              placeholder="x-api-key"
              class="w-full bg-slate-950 border border-slate-800 rounded-lg pl-10 pr-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none placeholder-slate-600"
            />
          </div>
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-xs font-medium text-slate-400">Value</label>
          <div class="relative">
            <Fingerprint class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
            <input 
              :type="showApiKey ? 'text' : 'password'"
              v-model="store.activeRequest.auth.apiKey.value"
              placeholder="value"
              class="w-full bg-slate-950 border border-slate-800 rounded-lg pl-10 pr-3 py-2 text-sm text-slate-200 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 outline-none placeholder-slate-600"
            />
            <button 
                @click="showApiKey = !showApiKey"
                class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500 hover:text-indigo-400 font-medium"
            >
                {{ showApiKey ? 'Hide' : 'Show' }}
            </button>
          </div>
        </div>
        <div class="flex flex-col gap-1">
          <label class="text-xs font-medium text-slate-400">Add To</label>
          <div class="flex gap-4 mt-1">
            <label class="flex items-center gap-2 cursor-pointer group">
                <input type="radio" v-model="store.activeRequest.auth.apiKey.addTo" value="header" class="accent-indigo-500" />
                <span class="text-sm text-slate-300 group-hover:text-white">Header</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer group">
                <input type="radio" v-model="store.activeRequest.auth.apiKey.addTo" value="query" class="accent-indigo-500" />
                <span class="text-sm text-slate-300 group-hover:text-white">Query Params</span>
            </label>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.animate-fade-in {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
