<template>
  <div class="h-full min-h-0 flex flex-col">
    <AppHeader title="Intake" />

    <div class="page-container flex-1">
      <h1 class="text-2xl font-bold mb-6">Upload Scanned Document</h1>

      <!-- Barcode-assisted upload -->
      <div class="card mb-6">
        <h2 class="text-lg font-semibold mb-4">Quick Upload with Cover Sheet</h2>
        <p class="text-sm text-gray-600 mb-4">
          Scan or type a cover sheet barcode to auto-populate batch details.
        </p>

        <div class="flex gap-4 items-end">
          <div class="flex-1">
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Cover Sheet Code
            </label>
            <input
              v-model="coverSheetCode"
              @keydown.enter.prevent="lookupCoverSheet"
              type="text"
              class="form-input"
              placeholder="VCR-CS-XXXXXXXX"
              autofocus
            />
          </div>
          <button
            type="button"
            @click="lookupCoverSheet"
            class="btn-secondary"
            :disabled="!coverSheetCode.trim() || lookupLoading"
          >
            {{ lookupLoading ? 'Looking up...' : 'Lookup' }}
          </button>
        </div>

        <div v-if="lookupError" class="text-clinical-danger text-sm mt-3">
          {{ lookupError }}
        </div>

        <div
          v-if="resolvedCoverSheet"
          class="mt-4 bg-green-50 border border-green-200 rounded-md p-4"
        >
          <p class="text-sm font-medium text-green-800">Cover Sheet Found</p>
          <dl class="mt-2 text-sm text-green-700 space-y-1">
            <div>
              <dt class="inline font-medium">Type:</dt>
              <dd class="inline">{{ formatBatchType(resolvedCoverSheet.batchType) }}</dd>
            </div>
            <div>
              <dt class="inline font-medium">Track:</dt>
              <dd class="inline">{{ formatTrack(resolvedCoverSheet.track) }}</dd>
            </div>
            <div v-if="resolvedCoverSheet.patientName">
              <dt class="inline font-medium">Patient:</dt>
              <dd class="inline">
                {{ resolvedCoverSheet.patientName }}
                ({{ resolvedCoverSheet.patientMrn }})
              </dd>
            </div>
            <div v-if="resolvedCoverSheet.assignToUserName">
              <dt class="inline font-medium">Assign to:</dt>
              <dd class="inline">{{ resolvedCoverSheet.assignToUserName }}</dd>
            </div>
          </dl>
          <p class="text-sm text-green-600 mt-3">
            Select a file below and click "Upload with Cover Sheet" to create the batch.
          </p>
          <button
            type="button"
            @click="clearCoverSheet"
            class="text-xs text-green-700 hover:text-green-900 mt-2"
          >
            Clear cover sheet (use manual upload)
          </button>
        </div>
      </div>

      <!-- Upload form -->
      <div class="card mb-6">
        <h2 class="text-lg font-semibold mb-4">New Batch</h2>

        <form @submit.prevent="handleUpload" class="space-y-4">
          <!-- File input -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Scanned Document (PDF, JPEG, PNG &mdash; max 25 MB)
            </label>
            <input
              type="file"
              ref="fileInput"
              @change="onFileChange"
              accept=".pdf,.jpg,.jpeg,.png"
              class="block w-full text-sm text-gray-500
                     file:mr-4 file:py-2 file:px-4
                     file:rounded-md file:border-0
                     file:text-sm file:font-semibold
                     file:bg-primary-50 file:text-primary-700
                     hover:file:bg-primary-100"
            />
            <p v-if="selectedFile" class="text-sm text-gray-500 mt-2">
              {{ selectedFile.name }} ({{ (selectedFile.size / 1024 / 1024).toFixed(2) }} MB)
            </p>
          </div>

          <!-- Batch type -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Batch Type</label>
            <select
              v-model="batchType"
              class="form-input"
              :required="!resolvedCoverSheet"
            >
              <option value="">Select batch type...</option>
              <option value="PATIENT_REGISTRATION">Patient Registration</option>
              <option value="ENCOUNTER_SUMMARY">Encounter Summary</option>
              <option value="VITALS_SHEET">Vitals Sheet</option>
              <option value="LAB_RESULTS">Lab Results</option>
              <option value="MEDICATION_LIST">Medication List</option>
              <option value="ALLERGY_UPDATE">Allergy Update</option>
              <option value="MIXED">Mixed</option>
            </select>
          </div>

          <!-- Track -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">Track</label>
            <select v-model="track" class="form-input">
              <option value="BACKFILL">Backfill (Track A)</option>
              <option value="LIVE_CAPTURE">Live Capture (Track B)</option>
            </select>
          </div>

          <!-- Patient search -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Patient (optional &mdash; can link later)
            </label>
            <PatientSearch v-model="patientId" />
          </div>

          <!-- Supersession (correction) -->
          <div v-if="supersedesBatchId" class="bg-blue-50 border border-blue-200 rounded-md p-4">
            <p class="text-sm font-medium text-blue-800">Correction Batch</p>
            <p class="text-sm text-blue-700 mt-1">
              This upload will supersede batch
              <span class="font-mono">{{ supersedesBatchId.substring(0, 8) }}...</span>
            </p>
            <button
              type="button"
              @click="clearCorrection"
              class="text-xs text-blue-600 hover:text-blue-800 mt-2"
            >
              Cancel correction (upload as new batch)
            </button>
          </div>

          <div v-if="uploadError" class="text-clinical-danger text-sm">
            {{ uploadError }}
          </div>

          <button
            type="submit"
            class="btn-primary"
            :disabled="!canUpload"
          >
            {{ uploadButtonLabel }}
          </button>
        </form>
      </div>

      <!-- Recent uploads -->
      <div class="card">
        <h2 class="text-lg font-semibold mb-4">Recent Uploads</h2>
        <div v-if="assignError" class="text-clinical-danger text-sm mb-4">
          {{ assignError }}
        </div>
        <BatchList
          :batches="batchStore.batches"
          :loading="batchStore.loading"
          :error="batchStore.error"
          empty-title="No uploaded batches waiting for assignment."
          empty-description="New uploads appear here after a scan is submitted."
          show-assign
          @assign="openAssignDialog"
          @retry="loadRecent"
        />
      </div>
    </div>

    <AssignClerkDialog
      :show="assignDialogOpen"
      :batch-id="assignBatchId"
      @close="closeAssignDialog"
      @assigned="handleAssign"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { get } from '../api/client'
import { useBatchStore } from '../stores/batches'
import { useToast } from '../composables/useToast'
import AppHeader from '../components/AppHeader.vue'
import PatientSearch from '../components/PatientSearch.vue'
import BatchList from '../components/BatchList.vue'
import AssignClerkDialog from '../components/AssignClerkDialog.vue'
import type { CoverSheetResponse } from '../types'

const route = useRoute()
const batchStore = useBatchStore()
const toast = useToast()

const selectedFile = ref<File | null>(null)
const batchType = ref((route.query.batchType as string) || '')
const track = ref('BACKFILL')
const patientId = ref<string | undefined>((route.query.patientId as string) || undefined)
const supersedesBatchId = ref<string | undefined>((route.query.supersedesBatchId as string) || undefined)
const uploadError = ref('')
const assignError = ref('')
const assignDialogOpen = ref(false)
const assignBatchId = ref<string | null>(null)

const coverSheetCode = ref('')
const resolvedCoverSheet = ref<CoverSheetResponse | null>(null)
const lookupLoading = ref(false)
const lookupError = ref('')

const canUpload = computed(() => {
  if (!selectedFile.value || batchStore.loading) return false
  if (resolvedCoverSheet.value) return true
  return !!batchType.value
})

const uploadButtonLabel = computed(() => {
  if (batchStore.loading) return 'Uploading...'
  if (resolvedCoverSheet.value) return 'Upload with Cover Sheet'
  return 'Upload and Create Batch'
})

watch(coverSheetCode, () => {
  if (resolvedCoverSheet.value && coverSheetCode.value.trim().toUpperCase() !== resolvedCoverSheet.value.code) {
    resolvedCoverSheet.value = null
    lookupError.value = ''
  }
})

function formatBatchType(type: string): string {
  return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
}

function formatTrack(value: string): string {
  return value === 'BACKFILL' ? 'Backfill (Track A)' : 'Live Capture (Track B)'
}

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

async function lookupCoverSheet(): Promise<void> {
  const code = coverSheetCode.value.trim().toUpperCase()
  if (!code) return

  lookupLoading.value = true
  lookupError.value = ''
  resolvedCoverSheet.value = null

  try {
    const response = await get<CoverSheetResponse>(
      `cover-sheets/lookup/${encodeURIComponent(code)}`,
    )

    if (!response.success || !response.data) {
      throw new Error(response.error?.message ?? 'Cover sheet not found')
    }

    if (response.data.isUsed) {
      throw new Error('Cover sheet has already been used')
    }

    resolvedCoverSheet.value = response.data
    coverSheetCode.value = response.data.code
    batchType.value = response.data.batchType
    track.value = response.data.track
    patientId.value = response.data.patientId ?? undefined
    toast.success('Cover sheet found')
  } catch (e: unknown) {
    const msg = e instanceof Error ? e.message : 'Lookup failed'
    lookupError.value = msg
    toast.error(msg)
  } finally {
    lookupLoading.value = false
  }
}

function clearCoverSheet(): void {
  coverSheetCode.value = ''
  resolvedCoverSheet.value = null
  lookupError.value = ''
}

async function handleUpload() {
  if (!selectedFile.value || !canUpload.value) return

  uploadError.value = ''
  try {
    const batch = await batchStore.uploadBatch(
      selectedFile.value,
      batchType.value,
      track.value,
      patientId.value,
      supersedesBatchId.value,
      resolvedCoverSheet.value?.code,
    )
    if (batch) {
      const isCorrection = !!supersedesBatchId.value
      const usedCoverSheet = !!resolvedCoverSheet.value
      selectedFile.value = null
      batchType.value = ''
      track.value = 'BACKFILL'
      patientId.value = undefined
      supersedesBatchId.value = undefined
      clearCoverSheet()
      toast.success(
        isCorrection
          ? 'Correction batch created'
          : usedCoverSheet
            ? 'Batch uploaded with cover sheet'
            : 'Batch uploaded successfully',
      )
      await loadRecent()
    }
  } catch (e: unknown) {
    const msg = e instanceof Error ? e.message : 'Upload failed'
    uploadError.value = msg
    toast.error(msg)
  }
}

function clearCorrection() {
  supersedesBatchId.value = undefined
}

function openAssignDialog(batchId: string) {
  assignError.value = ''
  assignBatchId.value = batchId
  assignDialogOpen.value = true
}

function closeAssignDialog() {
  assignDialogOpen.value = false
  assignBatchId.value = null
}

async function handleAssign(batchId: string, clerkUserId: string) {
  assignError.value = ''
  try {
    await batchStore.assignBatch(batchId, clerkUserId)
    closeAssignDialog()
    toast.success('Batch assigned to entry clerk')
    await loadRecent()
  } catch (e: unknown) {
    const msg = e instanceof Error ? e.message : 'Assignment failed'
    assignError.value = msg
    toast.error(msg)
  }
}

async function loadRecent() {
  await batchStore.listBatches({ status: 'UPLOADED', page: 1, pageSize: 20 })
}

onMounted(loadRecent)
</script>
