<script setup lang="ts">
interface ReadingHistoryEntry {
  novelId: string
  novelTitle: string
  chapterId: string
  chapterTitle: string
  cover: string
  readAt: string
}

const router = useRouter()
const toast = useToast()
const history = ref<ReadingHistoryEntry[]>([])
const fileInput = ref<HTMLInputElement | null>(null)
const searchQuery = ref('')

const filteredHistory = computed(() => {
  if (!searchQuery.value) return history.value
  const query = searchQuery.value.toLowerCase()
  return history.value.filter(entry =>
    entry.novelTitle.toLowerCase().includes(query)
    || entry.chapterTitle.toLowerCase().includes(query)
  )
})

const loadHistory = () => {
  const saved = localStorage.getItem('reading_history')
  if (saved) {
    history.value = JSON.parse(saved).sort((a: ReadingHistoryEntry, b: ReadingHistoryEntry) =>
      new Date(b.readAt).getTime() - new Date(a.readAt).getTime()
    )
  }
}

const clearHistory = () => {
  history.value = []
  localStorage.removeItem('reading_history')
  toast.add({ title: 'History cleared', color: 'info' })
}

const removeEntry = (entry: ReadingHistoryEntry) => {
  const index = history.value.findIndex(e =>
    e.novelId === entry.novelId
    && e.chapterId === entry.chapterId
    && e.readAt === entry.readAt
  )
  if (index !== -1) {
    history.value.splice(index, 1)
    localStorage.setItem('reading_history', JSON.stringify(history.value))
  }
}

const exportHistory = () => {
  const dataStr = JSON.stringify(history.value, null, 2)
  const dataBlob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(dataBlob)
  const link = document.createElement('a')
  link.href = url
  link.download = `history-export-${new Date().toISOString().split('T')[0]}.json`
  link.click()
  URL.revokeObjectURL(url)
  toast.add({ title: 'History exported successfully', color: 'success' })
}

const importHistory = () => {
  fileInput.value?.click()
}

const isValidHistoryEntry = (item: any): item is ReadingHistoryEntry => {
  return (
    typeof item === 'object'
    && item !== null
    && typeof item.novelId === 'string'
    && typeof item.novelTitle === 'string'
    && typeof item.chapterId === 'string'
    && typeof item.chapterTitle === 'string'
    && typeof item.cover === 'string'
    && typeof item.readAt === 'string'
  )
}

const handleFileUpload = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (!file) return

  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const imported = JSON.parse(e.target?.result as string)
      if (!Array.isArray(imported)) {
        throw new Error('Invalid format: expected an array')
      }

      // Validate each item has correct structure
      const validEntries = imported.filter(isValidHistoryEntry)
      if (validEntries.length === 0) {
        throw new Error('No valid history entries found')
      }

      if (validEntries.length < imported.length) {
        toast.add({
          title: 'Warning',
          description: `${imported.length - validEntries.length} invalid entries skipped`,
          color: 'warning'
        })
      }

      // Merge with existing history
      history.value = [...history.value, ...validEntries].sort((a, b) =>
        new Date(b.readAt).getTime() - new Date(a.readAt).getTime()
      )
      localStorage.setItem('reading_history', JSON.stringify(history.value))
      toast.add({ title: `Imported ${validEntries.length} entries`, color: 'success' })
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Invalid file format'
      toast.add({ title: 'Failed to import history', description: message, color: 'error' })
    }
  }
  reader.readAsText(file)
  target.value = ''
}

onMounted(() => {
  loadHistory()
})

useSeoMeta({
  title: 'Reading History - LastWebNovel',
  description: 'Your reading history and recently read chapters'
})
</script>

<template>
  <UDashboardPanel id="history">
    <template #header>
      <UDashboardNavbar title="My History" :ui="{ right: 'gap-3' }">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <UContainer class="py-8">
        <div v-if="history.length === 0" class="text-center py-12">
          <UIcon name="i-lucide-history" class="size-12 mx-auto mb-4 text-gray-400" />
          <h3 class="text-lg font-semibold mb-2">
            No reading history yet
          </h3>
          <p class="text-gray-600 dark:text-gray-400 mb-4">
            Your recently read chapters will appear here
          </p>

          <div class="flex flex-col md:flex-row gap-2 justify-center">
            <UButton
              icon="i-lucide-book"
              color="primary"
              @click="router.push('/')"
            >
              Start Reading
            </UButton>
            <UButton
              icon="i-lucide-upload"
              color="secondary"
              variant="subtle"
              @click="importHistory"
            >
              Import History
            </UButton>
            <input
              ref="fileInput"
              type="file"
              accept=".json"
              class="hidden"
              @change="handleFileUpload"
            >
          </div>
        </div>

        <div v-else class="space-y-4">
          <!-- Search Bar -->
          <UInput
            v-model="searchQuery"
            icon="i-lucide-search"
            placeholder="Search by novel or chapter title..."
            size="xl"
            class="mb-8 w-full"
          />

          <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
            <h2 class="text-xl font-semibold">
              {{ filteredHistory.length }} of {{ history.length }} entries
            </h2>
            <div class="flex gap-2">
              <UButton
                size="sm"
                color="secondary"
                variant="soft"
                icon="i-lucide-download"
                @click="exportHistory"
              >
                Export
              </UButton>
              <UButton
                size="sm"
                color="secondary"
                variant="soft"
                icon="i-lucide-upload"
                @click="importHistory"
              >
                Import
              </UButton>
              <UButton
                size="sm"
                color="error"
                variant="soft"
                icon="i-lucide-trash-2"
                @click="clearHistory"
              >
                Clear history
              </UButton>
              <input
                ref="fileInput"
                type="file"
                accept=".json"
                class="hidden"
                @change="handleFileUpload"
              >
            </div>
          </div>

          <!-- No Results -->
          <div v-if="filteredHistory.length === 0" class="text-center py-12">
            <UIcon name="i-lucide-search-x" class="size-12 mx-auto mb-4 text-gray-400" />
            <h3 class="text-lg font-semibold mb-2">
              No entries found
            </h3>
            <p class="text-gray-600 dark:text-gray-400">
              Try adjusting your search query
            </p>
          </div>

          <div v-else class="grid gap-4">
            <div
              v-for="(entry, index) in filteredHistory"
              :key="index"
              class="flex flex-col md:flex-row md:items-start gap-4 p-4 rounded-lg border border-gray-200 dark:border-gray-800 hover:border-primary-500 hover:shadow-md transition-all"
            >
              <div class="flex-1">
                <h3 class="font-semibold cursor-pointer hover:text-primary-500 transition-colors" @click="router.push(`/novel/${entry.novelId}/${entry.chapterId}`)">
                  {{ entry.novelTitle }}
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                  {{ entry.chapterTitle }}
                </p>
                <p class="text-xs text-gray-500 mt-1">
                  Read: {{ new Date(entry.readAt).toLocaleDateString() }} at {{ new Date(entry.readAt).toLocaleTimeString() }}
                </p>
              </div>
              <div class="flex gap-2 md:flex-col md:h-auto md:justify-start">
                <UButton
                  size="md"
                  icon="i-lucide-play"
                  color="primary"
                  variant="soft"
                  class="flex-1 md:flex-none"
                  @click="router.push(`/novel/${entry.novelId}/${entry.chapterId}`)"
                >
                  Continue
                </UButton>
                <UButton
                  size="md"
                  icon="i-lucide-x"
                  color="error"
                  variant="soft"
                  class="flex-1 md:flex-none"
                  @click="removeEntry(entry)"
                >
                  Remove
                </UButton>
              </div>
            </div>
          </div>
        </div>
      </UContainer>
    </template>
  </UDashboardPanel>
</template>
