---
import DashboardLayout from '../../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import StatCard from '../../../components/StatCard.astro';
import { db } from '../../../db';
import { invoices, clients } from '../../../db/schema';
import { eq, desc, and, gte, lte, sql } from 'drizzle-orm';
import { getCurrentTeam } from '../../../lib/getCurrentTeam';
import { formatCurrency } from '../../../lib/formatTime';

const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');

const userMembership = await getCurrentTeam(user, Astro.cookies.get('currentTeamId')?.value);
if (!userMembership) return Astro.redirect('/dashboard');

const currentTeamIdResolved = userMembership.organizationId;

// Get filter parameters
const currentYear = new Date().getFullYear();
const yearParam = Astro.url.searchParams.get('year');
const selectedYear: string | number = yearParam === 'current' || !yearParam ? 'current' : parseInt(yearParam);
const yearNum = typeof selectedYear === 'number' ? selectedYear : currentYear;
const selectedType = Astro.url.searchParams.get('type') || 'all';
const selectedStatus = Astro.url.searchParams.get('status') || 'all';
const sortBy = Astro.url.searchParams.get('sort') || 'date-desc';

// Fetch all invoices for the organization (for year dropdown)
const allInvoicesRaw = await db.select({
  invoice: invoices,
  client: clients,
})
  .from(invoices)
  .leftJoin(clients, eq(invoices.clientId, clients.id))
  .where(eq(invoices.organizationId, currentTeamIdResolved))
  .all();

// Get unique years from invoices
const availableYears = [...new Set(allInvoicesRaw.map(i => i.invoice.issueDate.getFullYear()))].sort((a, b) => b - a);

// Ensure current year is in the list
if (!availableYears.includes(currentYear)) {
  availableYears.unshift(currentYear);
}

// Filter by year
const yearStart = new Date(yearNum, 0, 1);
const yearEnd = selectedYear === 'current' ? new Date() : new Date(yearNum, 11, 31, 23, 59, 59);

let filteredInvoices = allInvoicesRaw.filter(i => {
  const issueDate = i.invoice.issueDate;
  return issueDate >= yearStart && issueDate <= yearEnd;
});

// Filter by type
if (selectedType !== 'all') {
  filteredInvoices = filteredInvoices.filter(i => i.invoice.type === selectedType);
}

// Filter by status
if (selectedStatus !== 'all') {
  filteredInvoices = filteredInvoices.filter(i => i.invoice.status === selectedStatus);
}

// Sort invoices
const allInvoices = filteredInvoices.sort((a, b) => {
  switch (sortBy) {
    case 'date-desc':
      return b.invoice.issueDate.getTime() - a.invoice.issueDate.getTime();
    case 'date-asc':
      return a.invoice.issueDate.getTime() - b.invoice.issueDate.getTime();
    case 'amount-desc':
      return b.invoice.total - a.invoice.total;
    case 'amount-asc':
      return a.invoice.total - b.invoice.total;
    case 'number-desc':
      return b.invoice.number.localeCompare(a.invoice.number);
    case 'number-asc':
      return a.invoice.number.localeCompare(b.invoice.number);
    default:
      return b.invoice.issueDate.getTime() - a.invoice.issueDate.getTime();
  }
});

// Calculate stats for the selected year
const yearInvoices = allInvoicesRaw.filter(i => {
  const issueDate = i.invoice.issueDate;
  return issueDate >= yearStart && issueDate <= yearEnd;
});

const getStatusColor = (status: string) => {
  switch (status) {
    case 'paid': return 'badge-success';
    case 'accepted': return 'badge-success';
    case 'sent': return 'badge-info';
    case 'draft': return 'badge-ghost';
    case 'void': return 'badge-error';
    case 'declined': return 'badge-error';
    default: return 'badge-ghost';
  }
};
---

<DashboardLayout title="Invoices & Quotes - Chronus">
  <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
    <div>
      <h1 class="text-2xl font-extrabold tracking-tight">Invoices & Quotes</h1>
      <p class="text-base-content/60 text-sm mt-1">Manage your billing and estimates</p>
    </div>
    <a href="/dashboard/invoices/new" class="btn btn-primary btn-sm">
      <Icon name="heroicons:plus" class="w-4 h-4" />
      Create New
    </a>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-6">
    <StatCard
      title="Total Invoices"
      value={String(yearInvoices.filter(i => i.invoice.type === 'invoice').length)}
      description={selectedYear === 'current' ? `${currentYear} (YTD)` : String(selectedYear)}
      icon="heroicons:document-text"
      color="text-primary"
    />
    <StatCard
      title="Open Quotes"
      value={String(yearInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length)}
      description="Waiting for approval"
      icon="heroicons:clipboard-document-list"
      color="text-secondary"
    />
    <StatCard
      title="Total Revenue"
      value={formatCurrency(yearInvoices
        .filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid')
        .reduce((acc, curr) => acc + curr.invoice.total, 0), 'USD')}
      description={`Paid invoices (${selectedYear === 'current' ? `${currentYear} YTD` : selectedYear})`}
      icon="heroicons:currency-dollar"
      color="text-success"
    />
  </div>

  <!-- Filters -->
  <div class="card card-border bg-base-100 mb-6">
    <div class="card-body p-4">
      <form method="GET" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Year</legend>
          <select name="year" class="select w-full" onchange="this.form.submit()">
            <option value="current" selected={selectedYear === 'current'}>Current Year to Date ({currentYear})</option>
            {availableYears.map(year => (
              <option value={year} selected={year === selectedYear}>{year}</option>
            ))}
          </select>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Type</legend>
          <select name="type" class="select w-full" onchange="this.form.submit()">
            <option value="all" selected={selectedType === 'all'}>All Types</option>
            <option value="invoice" selected={selectedType === 'invoice'}>Invoices</option>
            <option value="quote" selected={selectedType === 'quote'}>Quotes</option>
          </select>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Status</legend>
          <select name="status" class="select w-full" onchange="this.form.submit()">
            <option value="all" selected={selectedStatus === 'all'}>All Statuses</option>
            <option value="draft" selected={selectedStatus === 'draft'}>Draft</option>
            <option value="sent" selected={selectedStatus === 'sent'}>Sent</option>
            <option value="paid" selected={selectedStatus === 'paid'}>Paid</option>
            <option value="accepted" selected={selectedStatus === 'accepted'}>Accepted</option>
            <option value="declined" selected={selectedStatus === 'declined'}>Declined</option>
            <option value="void" selected={selectedStatus === 'void'}>Void</option>
          </select>
        </fieldset>

        <fieldset class="fieldset">
          <legend class="fieldset-legend text-xs">Sort By</legend>
          <select name="sort" class="select w-full" onchange="this.form.submit()">
            <option value="date-desc" selected={sortBy === 'date-desc'}>Date (Newest First)</option>
            <option value="date-asc" selected={sortBy === 'date-asc'}>Date (Oldest First)</option>
            <option value="amount-desc" selected={sortBy === 'amount-desc'}>Amount (High to Low)</option>
            <option value="amount-asc" selected={sortBy === 'amount-asc'}>Amount (Low to High)</option>
            <option value="number-desc" selected={sortBy === 'number-desc'}>Number (Z-A)</option>
            <option value="number-asc" selected={sortBy === 'number-asc'}>Number (A-Z)</option>
          </select>
        </fieldset>
      </form>

      {(selectedYear !== 'current' || selectedType !== 'all' || selectedStatus !== 'all' || sortBy !== 'date-desc') && (
        <div class="mt-3">
          <a href="/dashboard/invoices" class="btn btn-ghost btn-xs">
            <Icon name="heroicons:x-mark" class="w-3 h-3" />
            Clear Filters
          </a>
        </div>
      )}
    </div>
  </div>

  <div class="card card-border bg-base-100">
    <div class="card-body p-0">
      <div class="px-4 py-3 border-b border-base-200">
        <p class="text-xs text-base-content/50">
          Showing <span class="font-semibold text-base-content">{allInvoices.length}</span>
          {allInvoices.length === 1 ? 'result' : 'results'}
          {selectedYear === 'current' ? ` for ${currentYear} (year to date)` : ` for ${selectedYear}`}
        </p>
      </div>
      <div class="overflow-x-auto md:overflow-visible pb-32 md:pb-0">
        <table class="table table-sm">
          <thead>
            <tr>
              <th>Number</th>
              <th>Client</th>
              <th>Date</th>
              <th>Due Date</th>
              <th>Amount</th>
              <th>Status</th>
              <th>Type</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {allInvoices.length === 0 ? (
              <tr>
                <td colspan="8" class="text-center py-8 text-base-content/50 text-sm">
                  No invoices or quotes found. Create one to get started.
                </td>
              </tr>
            ) : (
              allInvoices.map(({ invoice, client }) => (
                <tr class="hover">
                  <td class="font-mono font-medium text-sm">
                    <a href={`/dashboard/invoices/${invoice.id}`} class="link link-hover text-primary">
                      {invoice.number}
                    </a>
                  </td>
                  <td>
                    {client ? (
                      <div class="font-medium">{client.name}</div>
                    ) : (
                      <span class="text-base-content/40 italic">Deleted Client</span>
                    )}
                  </td>
                  <td>{invoice.issueDate.toLocaleDateString()}</td>
                  <td>{invoice.dueDate.toLocaleDateString()}</td>
                  <td class="font-mono font-medium">
                    {formatCurrency(invoice.total, invoice.currency)}
                  </td>
                  <td>
                    <div class={`badge ${getStatusColor(invoice.status)} badge-xs uppercase font-bold tracking-wider`}>
                      {invoice.status}
                    </div>
                  </td>
                  <td>
                    <span class="capitalize text-sm">{invoice.type}</span>
                  </td>
                  <td class="text-right">
                    <div class="dropdown dropdown-end">
                      <div role="button" tabindex="0" class="btn btn-ghost btn-xs btn-square">
                        <Icon name="heroicons:ellipsis-vertical" class="w-4 h-4" />
                      </div>
                      <ul tabindex="0" class="dropdown-content menu p-2 bg-base-100 rounded-box w-52 border border-base-200 z-100">
                        <li>
                          <a href={`/dashboard/invoices/${invoice.id}`}>
                            <Icon name="heroicons:eye" class="w-4 h-4" />
                            View Details
                          </a>
                        </li>
                        <li>
                          <a href={`/dashboard/invoices/${invoice.id}/edit`}>
                            <Icon name="heroicons:pencil-square" class="w-4 h-4" />
                            Edit
                          </a>
                        </li>
                        <li>
                          <a href={`/api/invoices/${invoice.id}/generate`} download>
                            <Icon name="heroicons:arrow-down-tray" class="w-4 h-4" />
                            Download PDF
                          </a>
                        </li>
                        {invoice.status === 'draft' && (
                          <li>
                            <form method="POST" action={`/api/invoices/${invoice.id}/status`} class="w-full">
                              <input type="hidden" name="status" value="sent" />
                              <button type="submit" class="w-full justify-start">
                                <Icon name="heroicons:paper-airplane" class="w-4 h-4" />
                                Mark as Sent
                              </button>
                            </form>
                          </li>
                        )}
                        <div class="divider my-1"></div>
                        <li>
                          <form method="POST" action={`/api/invoices/delete`} onsubmit="return confirm('Are you sure? This action cannot be undone.');" class="w-full">
                            <input type="hidden" name="id" value={invoice.id} />
                            <button type="submit" class="w-full justify-start text-error hover:bg-error/10">
                              <Icon name="heroicons:trash" class="w-4 h-4" />
                              Delete
                            </button>
                          </form>
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</DashboardLayout>