"use client";

import { useState, useEffect } from "react";
import { fetchInvoices, type InvoiceRow, type InvoiceListFilter } from "@/lib/supabase/invoicing-actions";
import InvoicesShell from "../invoices/InvoicesShell";
import PageSkeleton from "./PageSkeleton";

export default function InvoicesPage() {
  const [invoices, setInvoices] = useState<InvoiceRow[] | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    let cancelled = false;
    fetchInvoices("all")
      .then((data) => { if (!cancelled) setInvoices(data); })
      .catch(() => { if (!cancelled) setError("Failed to load invoices"); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, []);

  if (loading) return <PageSkeleton />;
  if (error) {
    return (
      <div className="p-6 lg:p-8">
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">{error}</div>
      </div>
    );
  }
  if (!invoices) return null;

  return <InvoicesShell initialInvoices={invoices} />;
}