<script setup lang="ts">
const route = useRoute()
const providerId = route.params.provider_id as string
const toast = useToast()
const { $providers } = useNuxtApp()

const { data, pending, error, refresh } = useProviders(`/providers/${providerId}`)
const provider = computed(() => data.value?.data)

// templates and default_templates come directly from provider
const templates         = computed(() => provider.value?.templates ?? {})
const defaultTemplates  = computed(() => provider.value?.default_templates ?? {})

// ── Template upload ──────────────────────────────────────────────────────────
const isUploadOpen     = ref(false)
const uploadFile       = ref<File | null>(null)
const uploadPolicyType = ref('car')
const uploadClientType = ref('natural')
const uploading        = ref(false)

async function handleUpload() {
  if (!uploadFile.value) return
  uploading.value = true
  try {
    const formData = new FormData()
    formData.append('file',        uploadFile.value)
    formData.append('policy_type', uploadPolicyType.value)
    formData.append('client_type', uploadClientType.value)

    await $providers(`/providers/${providerId}/templates`, {
      method: 'POST',
      body:   formData
    })

    toast.add({ title: 'Template uploaded', color: 'green' })
    isUploadOpen.value = false
    uploadFile.value   = null
    await refresh()   // single refresh — gets updated templates + defaults together
  } catch (e: any) {
    toast.add({ title: 'Upload failed', description: e?.data?.error ?? e.message, color: 'red' })
  } finally {
    uploading.value = false
  }
}

function onFileChange(e: Event) {
  const input = e.target as HTMLInputElement
  uploadFile.value = input.files?.[0] ?? null
}

async function setDefault(templateId: string, policyType: string, clientType: string) {
  try {
    await $providers(`/providers/${providerId}/templates/${templateId}/set-default`, {
      method: 'POST',
      body:   { policy_type: policyType, client_type: clientType }
    })
    toast.add({ title: 'Default template updated', color: 'green' })
    await refresh()
  } catch (e: any) {
    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
  }
}

async function toggleTemplate(templateId: string, active: boolean, policyType: string, clientType: string) {
  const path = active ? 'deactivate' : 'activate'
  try {
    await $providers(`/providers/${providerId}/templates/${templateId}/${path}`, {
      method: 'POST',
      body:   { policy_type: policyType, client_type: clientType }
    })
    toast.add({ title: `Template ${active ? 'deactivated' : 'activated'}`, color: 'green' })
    await refresh()
  } catch (e: any) {
    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
  }
}

async function toggleProvider() {
  const path = provider.value?.active ? 'deactivate' : 'reactivate'
  try {
    await $providers(`/providers/${providerId}/${path}`, { method: 'POST' })
    toast.add({ title: `Provider ${provider.value?.active ? 'deactivated' : 'reactivated'}`, color: 'green' })
    await refresh()
  } catch (e: any) {
    toast.add({ title: 'Failed', description: e?.data?.error ?? e.message, color: 'red' })
  }
}

const policyTypeItems = [
  { label: 'Car',  value: 'car'  },
  { label: 'Life', value: 'life' },
  { label: 'Fire', value: 'fire' }
]

const clientTypeItems = [
  { label: 'Natural',  value: 'natural'  },
  { label: 'Jurídico', value: 'juridico' }
]

const clientTypeLabel = (ct: string) =>
  ct === 'natural' ? 'Natural' : ct === 'juridico' ? 'Jurídico' : ct

const clientTypeColor = (ct: string) =>
  ct === 'natural' ? 'blue' : 'purple'
</script>

<template>
  <div class="p-8 space-y-8 bg-gray-50 min-h-screen">
    <NuxtLink to="/providers">
      <UButton icon="i-heroicons-arrow-left" color="gray" variant="ghost">Back to Providers</UButton>
    </NuxtLink>

    <UAlert v-if="error" color="red" variant="soft" title="Failed to load provider" :description="error.message" />

    <div v-else-if="pending" class="space-y-4">
      <UCard v-for="n in 2" :key="n"><div class="h-32 animate-pulse bg-gray-200 rounded" /></UCard>
    </div>

    <template v-else-if="provider">
      <!-- Header -->
      <div class="flex justify-between items-start">
        <div class="space-y-1">
          <div class="flex items-center gap-2">
            <UBadge :color="provider.active ? 'green' : 'gray'" variant="soft">
              {{ provider.active ? 'Active' : 'Inactive' }}
            </UBadge>
          </div>
          <h1 class="text-2xl font-bold text-slate-900">{{ provider.name }}</h1>
          <p class="text-gray-500 text-sm font-mono">{{ provider.provider_id }}</p>
        </div>
        <div class="flex gap-2">
          <UButton icon="i-heroicons-arrow-path" color="gray" variant="soft" :loading="pending" @click="refresh()" />
          <UButton
            :icon="provider.active ? 'i-heroicons-pause' : 'i-heroicons-play'"
            :color="provider.active ? 'red' : 'green'"
            variant="soft"
            @click="toggleProvider"
          >
            {{ provider.active ? 'Deactivate' : 'Reactivate' }}
          </UButton>
        </div>
      </div>

      <!-- Info -->
      <UCard>
        <template #header>
          <p class="font-semibold text-slate-700 flex items-center gap-2">
            <UIcon name="i-heroicons-building-office" class="w-4 h-4" /> Provider Details
          </p>
        </template>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
          <div><p class="text-gray-500 text-xs">Email</p><p class="font-medium">{{ provider.email }}</p></div>
          <div><p class="text-gray-500 text-xs">Phone</p><p>{{ provider.phone ?? '—' }}</p></div>
          <div><p class="text-gray-500 text-xs">Contact</p><p>{{ provider.contact_name ?? '—' }}</p></div>
          <div><p class="text-gray-500 text-xs">RUC</p><p class="font-mono">{{ provider.ruc ?? '—' }}</p></div>
          <div class="col-span-2"><p class="text-gray-500 text-xs">Address</p><p>{{ provider.address ?? '—' }}</p></div>
        </div>
      </UCard>

      <!-- Templates — grouped by policy_type → client_type -->
      <UCard>
        <template #header>
          <div class="flex justify-between items-center">
            <p class="font-semibold text-slate-700 flex items-center gap-2">
              <UIcon name="i-heroicons-document" class="w-4 h-4" /> Solicitation Templates
            </p>
            <UButton icon="i-heroicons-arrow-up-tray" color="primary" size="sm" @click="isUploadOpen = true">
              Upload Template
            </UButton>
          </div>
        </template>

        <div v-if="Object.keys(templates).length === 0" class="text-center py-10 text-gray-400">
          <UIcon name="i-heroicons-document-plus" class="w-10 h-10 mx-auto mb-2" />
          <p class="text-sm">No templates yet. Upload a provider PDF form.</p>
        </div>

        <!-- policy_type level -->
        <div v-else class="space-y-8">
          <div v-for="(clientMap, policyType) in templates" :key="policyType">
            <p class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-4">
              {{ String(policyType) }}
            </p>

            <!-- client_type level -->
            <div class="space-y-6 pl-2">
              <div v-for="(tmplList, clientType) in clientMap" :key="clientType">
                <div class="flex items-center gap-2 mb-3">
                  <UBadge :color="clientTypeColor(String(clientType))" variant="soft" size="sm">
                    {{ clientTypeLabel(String(clientType)) }}
                  </UBadge>
                  <span class="text-xs text-gray-400">{{ tmplList?.length ?? 0 }} template(s)</span>
                </div>

                <div class="space-y-2">
                  <div
                    v-for="t in tmplList"
                    :key="t.template_id"
                    class="flex items-center justify-between p-3 border rounded-lg text-sm"
                    :class="t.active ? 'border-gray-200 bg-white' : 'border-gray-100 bg-gray-50 opacity-60'"
                  >
                    <div class="space-y-0.5 min-w-0">
                      <div class="flex items-center gap-2 flex-wrap">
                        <span class="font-mono text-xs text-gray-500">{{ t.template_id?.slice(0, 8) }}...</span>
                        <UBadge
                          v-if="defaultTemplates?.[policyType]?.[clientType] === t.template_id"
                          color="blue" variant="soft" size="xs"
                        >
                          Default
                        </UBadge>
                        <UBadge :color="t.active ? 'green' : 'gray'" variant="soft" size="xs">
                          {{ t.active ? 'Active' : 'Inactive' }}
                        </UBadge>
                      </div>
                      <p class="text-xs text-gray-400 font-mono truncate">{{ t.s3_key }}</p>
                      <p class="text-xs text-gray-400">v{{ t.version }} · {{ t.fields?.length ?? 0 }} fields</p>
                    </div>

                    <div class="flex gap-2 flex-shrink-0">
                      <UButton
                        size="xs" color="gray" variant="soft"
                        :disabled="defaultTemplates?.[policyType]?.[clientType] === t.template_id"
                        @click="setDefault(t.template_id, String(policyType), String(clientType))"
                      >
                        Set Default
                      </UButton>
                      <UButton
                        size="xs" :color="t.active ? 'red' : 'green'" variant="ghost"
                        @click="toggleTemplate(t.template_id, t.active, String(policyType), String(clientType))"
                      >
                        {{ t.active ? 'Deactivate' : 'Activate' }}
                      </UButton>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </UCard>
    </template>

    <!-- Upload Slideover -->
    <USlideover v-model:open="isUploadOpen" side="right">
      <template #content>
        <div class="flex flex-col h-full">
          <div class="flex justify-between items-center p-6 border-b">
            <div>
              <h2 class="text-lg font-semibold text-slate-900">Upload Template</h2>
              <p class="text-sm text-gray-500">Upload a fillable PDF solicitation form</p>
            </div>
            <UButton icon="i-heroicons-x-mark" color="gray" variant="ghost" @click="isUploadOpen = false" />
          </div>

          <div class="flex-1 p-6 space-y-6">
            <div class="grid grid-cols-2 gap-4">
              <UFormField label="Policy Type" required>
                <USelect v-model="uploadPolicyType" :items="policyTypeItems" class="w-full" />
              </UFormField>
              <UFormField label="Client Type" required>
                <USelect v-model="uploadClientType" :items="clientTypeItems" class="w-full" />
              </UFormField>
            </div>

            <UFormField label="PDF Template File" required>
              <div
                class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary-400 transition-colors cursor-pointer"
                @click="($refs.fileInput as HTMLInputElement).click()"
              >
                <UIcon name="i-heroicons-document-arrow-up" class="w-10 h-10 mx-auto mb-2 text-gray-400" />
                <p class="text-sm text-gray-500">
                  {{ uploadFile ? uploadFile.name : 'Click to select a PDF file' }}
                </p>
                <p v-if="uploadFile" class="text-xs text-gray-400 mt-1">
                  {{ (uploadFile.size / 1024).toFixed(1) }} KB
                </p>
              </div>
              <input ref="fileInput" type="file" accept=".pdf" class="hidden" @change="onFileChange" />
            </UFormField>

            <UAlert
              color="blue" variant="soft" icon="i-heroicons-information-circle"
              description="The PDF must be an AcroForm (fillable PDF). Fields will be auto-discovered after upload."
            />
          </div>

          <div class="p-6 border-t flex justify-end gap-3">
            <UButton color="gray" variant="soft" @click="isUploadOpen = false">Cancel</UButton>
            <UButton
              color="primary" icon="i-heroicons-arrow-up-tray"
              :loading="uploading" :disabled="!uploadFile"
              @click="handleUpload"
            >
              Upload
            </UButton>
          </div>
        </div>
      </template>
    </USlideover>
  </div>
</template>
