<template>
  <div class="flex flex-col h-full">
    <LayoutHeader title="Billing">
      <template #right>
        <Button variant="subtle" @click="router.push({ name: 'Invoices' })">
          View All Invoices
        </Button>
      </template>
    </LayoutHeader>

    <div class="flex-1 overflow-auto p-5">
      <div class="grid gap-6 lg:grid-cols-3">
        <div class="lg:col-span-2 space-y-6">
          <SubscriptionCard :subscription="subscription" />

          <div class="rounded-lg border p-5">
            <div class="flex items-center justify-between mb-4">
              <h2 class="text-lg font-semibold text-ink-gray-9">Recent Invoices</h2>
              <Button
                variant="ghost"
                size="sm"
                @click="router.push({ name: 'Invoices' })"
              >
                View All
              </Button>
            </div>
            <InvoiceList :invoices="recentInvoices" />
          </div>
        </div>

        <div class="space-y-6">
          <div class="rounded-lg border p-5">
            <h2 class="text-lg font-semibold text-ink-gray-9 mb-4">Payment Method</h2>
            <div class="flex items-center gap-3 rounded-lg bg-surface-gray-1 px-4 py-3">
              <div class="flex h-10 w-14 items-center justify-center rounded bg-white border">
                <FeatherIcon name="credit-card" class="h-5 w-5 text-ink-gray-5" />
              </div>
              <div>
                <p class="font-medium text-ink-gray-9">Visa ending in 4242</p>
                <p class="text-sm text-ink-gray-5">Expires 12/25</p>
              </div>
            </div>
            <Button class="w-full mt-4" variant="subtle">
              Update Payment Method
            </Button>
          </div>

          <div class="rounded-lg border p-5">
            <h2 class="text-lg font-semibold text-ink-gray-9 mb-4">Billing Address</h2>
            <div class="text-sm text-ink-gray-7">
              <p>Acme Corporation</p>
              <p>123 Business Street</p>
              <p>Mumbai, Maharashtra 400001</p>
              <p>India</p>
            </div>
            <Button class="w-full mt-4" variant="subtle">
              Update Address
            </Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const router = useRouter()

// Mock data
const subscription = ref({
  plan: 'Business',
  price: '$99',
  period: 'month',
  nextBillingDate: 'February 15, 2024',
  sites: 3,
  maxSites: 10,
})

const recentInvoices = 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',
  },
])
</script>
