<script lang="ts" setup>
import { router } from '@inertiajs/vue3'
import AccountLayout from '@/Layouts/AccountLayout.vue'
import type { LoginHistoryEntry, PaginatedResponse } from '@/types'

interface Props {
  loginHistories: PaginatedResponse<LoginHistoryEntry>
}

defineOptions({ layout: AccountLayout })

const props = defineProps<Props>()

function formatDateTime(dateStr: string): string {
  const date = new Date(dateStr)
  return date.toLocaleDateString('en-US', {
    month: 'short',
    day: '2-digit',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

function formatLocation(entry: LoginHistoryEntry): string {
  const parts = [entry.location_city, entry.location_country].filter(Boolean)
  return parts.length > 0 ? parts.join(', ') : '-'
}

function formatBrowserOs(entry: LoginHistoryEntry): string {
  const parts = [entry.browser, entry.os].filter(Boolean)
  return parts.length > 0 ? parts.join(' / ') : 'Unknown'
}

function goToPage(page: number): void {
  router.get('/login-history', { page }, {
    preserveState: true,
    preserveScroll: true,
  })
}
</script>

<template>
  <div>
    <div class="d-flex align-center justify-space-between mb-6">
      <div>
        <h4 class="text-h4 font-weight-bold">
          Login History
        </h4>
        <p class="text-body-2 text-medium-emphasis mt-1">
          Review all sign-in activity on your account.
        </p>
      </div>
      <VChip
        v-if="loginHistories.total > 0"
        color="primary"
        variant="tonal"
        size="small"
      >
        {{ loginHistories.total }} entries
      </VChip>
    </div>

    <VCard>
      <VCardText v-if="loginHistories.data.length === 0" class="text-center py-12">
        <VIcon icon="tabler-history-off" size="48" color="disabled" class="mb-2" />
        <div class="text-h6 text-medium-emphasis mb-1">
          No login history
        </div>
        <div class="text-body-2 text-disabled">
          Your sign-in activity will appear here.
        </div>
      </VCardText>

      <VTable v-else density="comfortable" hover>
        <thead>
          <tr>
            <th>BROWSER / OS</th>
            <th>DEVICE</th>
            <th>LOCATION</th>
            <th>IP ADDRESS</th>
            <th>TIME</th>
            <th>STATUS</th>
            <th>NEW DEVICE</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="entry in loginHistories.data" :key="entry.id">
            <td class="text-body-2">
              {{ formatBrowserOs(entry) }}
            </td>
            <td class="text-body-2">
              {{ entry.device_type ?? '-' }}
            </td>
            <td class="text-body-2">
              {{ formatLocation(entry) }}
            </td>
            <td class="text-body-2 text-medium-emphasis">
              {{ entry.ip_address }}
            </td>
            <td class="text-body-2 text-medium-emphasis">
              {{ formatDateTime(entry.created_at) }}
            </td>
            <td>
              <VChip
                :color="entry.success ? 'success' : 'error'"
                size="small"
                variant="tonal"
              >
                {{ entry.success ? 'Success' : 'Failed' }}
              </VChip>
            </td>
            <td>
              <VChip
                v-if="entry.is_new_device"
                color="warning"
                size="small"
                variant="tonal"
              >
                New
              </VChip>
              <span v-else class="text-body-2 text-disabled">-</span>
            </td>
          </tr>
        </tbody>
      </VTable>

      <!-- Pagination -->
      <VCardText v-if="loginHistories.last_page > 1" class="d-flex align-center justify-center pt-4">
        <VPagination
          :model-value="Math.ceil((loginHistories.from || 1) / 15)"
          :length="loginHistories.last_page"
          :total-visible="7"
          rounded
          @update:model-value="goToPage"
        />
      </VCardText>
    </VCard>
  </div>
</template>
