<template>
  <div class="flex flex-col h-full">
    <LayoutHeader>
      <template #left>
        <div class="flex items-center gap-3">
          <Button variant="ghost" @click="router.push({ name: 'Billing' })">
            <FeatherIcon name="arrow-left" class="h-4 w-4" />
          </Button>
          <h1 class="text-xl font-semibold text-ink-gray-9">Invoices</h1>
        </div>
      </template>
    </LayoutHeader>

    <div class="flex-1 overflow-auto p-5">
      <div class="rounded-lg border">
        <table class="w-full">
          <thead>
            <tr class="border-b bg-surface-gray-1">
              <th class="px-4 py-3 text-left text-sm font-medium text-ink-gray-5">
                Invoice
              </th>
              <th class="px-4 py-3 text-left text-sm font-medium text-ink-gray-5">
                Date
              </th>
              <th class="px-4 py-3 text-left text-sm font-medium text-ink-gray-5">
                Amount
              </th>
              <th class="px-4 py-3 text-left text-sm font-medium text-ink-gray-5">
                Status
              </th>
              <th class="px-4 py-3 text-right text-sm font-medium text-ink-gray-5">
                Actions
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="invoice in invoices"
              :key="invoice.id"
              class="border-b last:border-0"
            >
              <td class="px-4 py-3">
                <span class="font-medium text-ink-gray-9">{{ invoice.id }}</span>
              </td>
              <td class="px-4 py-3 text-sm text-ink-gray-7">
                {{ invoice.date }}
              </td>
              <td class="px-4 py-3 text-sm font-medium text-ink-gray-9">
                {{ invoice.amount }}
              </td>
              <td class="px-4 py-3">
                <Badge
                  :variant="invoice.status === 'Paid' ? 'success' : 'warning'"
                  :label="invoice.status"
                />
              </td>
              <td class="px-4 py-3 text-right">
                <Button variant="ghost" size="sm">
                  <FeatherIcon name="download" class="h-4 w-4" />
                </Button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Button, Badge, FeatherIcon } from 'frappe-ui'
import LayoutHeader from '@/components/Common/LayoutHeader.vue'

const router = useRouter()

// Mock data
const invoices = ref([
  {
    id: 'INV-2024-001',
    date: 'January 15, 2024',
    amount: '$99.00',
    status: 'Paid',
  },
  {
    id: 'INV-2023-012',
    date: 'December 15, 2023',
    amount: '$99.00',
    status: 'Paid',
  },
  {
    id: 'INV-2023-011',
    date: 'November 15, 2023',
    amount: '$99.00',
    status: 'Paid',
  },
  {
    id: 'INV-2023-010',
    date: 'October 15, 2023',
    amount: '$99.00',
    status: 'Paid',
  },
  {
    id: 'INV-2023-009',
    date: 'September 15, 2023',
    amount: '$99.00',
    status: 'Paid',
  },
  {
    id: 'INV-2023-008',
    date: 'August 15, 2023',
    amount: '$99.00',
    status: 'Paid',
  },
])
</script>
