import { apiFetch } from "@/lib/api";
import { InvoicesList } from "@/components/invoices-list";

interface Invoice {
  id: string;
  monthStart: string;
  totalHours: number;
  totalAmount: number;
  currency: string;
  sentAt: string | null;
  createdAt: string;
  client: { name: string; email: string | null };
}

interface Client { id: string; name: string; hourlyRate: number; }

async function load(): Promise<{ invoices: Invoice[]; clients: Client[] }> {
  const [iRes, cRes] = await Promise.all([
    apiFetch("/v1/invoices"),
    apiFetch("/v1/clients"),
  ]);
  return {
    invoices: iRes.ok ? await iRes.json() : [],
    clients: cRes.ok ? await cRes.json() : [],
  };
}

export default async function InvoicesPage() {
  const { invoices, clients } = await load();
  return (
    <div>
      <div className="mb-6">
        <h1 className="text-3xl font-bold mb-1">Invoices</h1>
        <p className="text-white/50 text-sm">PDFs auto-generated end of month. Manual trigger below.</p>
      </div>
      <InvoicesList invoices={invoices} clients={clients} />
    </div>
  );
}