import { useState, useMemo } from 'react';
import { useQuery } from '@tanstack/react-query';
import { useAuth } from '../../contexts/AuthContext';
import { AppLayout } from '../../components/layout/AppLayout';
import { quickbooksApi, type InvoicesResponse } from '../../api/quickbooks';
import { LoadingSpinner } from '../../components/ui/LoadingSpinner';
import {
Search,
Filter,
RefreshCw,
AlertTriangle,
FileText,
Calendar,
ChevronDown,
ChevronUp,
Download,
} from 'lucide-react';
// ─── Helpers ──────────────────────────────────────────────────────────────
function formatCurrency(value: number | null | undefined): string {
if (value == null || value === 0) return '$0';
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(value);
}
function formatDate(dateStr: string | null): string {
if (!dateStr) return '—';
return new Date(dateStr).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
});
}
function statusColor(status: string): string {
const s = status.toLowerCase();
if (s === 'paid') return 'bg-emerald-100 text-emerald-700';
if (s === 'void' || s === 'voided') return 'bg-gray-100 text-gray-500';
if (s === 'draft') return 'bg-slate-100 text-slate-600';
if (s === 'sent') return 'bg-blue-100 text-blue-700';
return 'bg-amber-100 text-amber-700';
}
// ─── Main Page ────────────────────────────────────────────────────────────
export function QuickBooksInvoicesPage() {
const [search, setSearch] = useState('');
const [statusFilter, setStatusFilter] = useState('');
const [dateFrom, setDateFrom] = useState('');
const [dateTo, setDateTo] = useState('');
const [sortBy, setSortBy] = useState<'tx_date' | 'total_amount' | 'invoice_num'>('tx_date');
const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
const { data, isLoading, error, refetch } = useQuery<InvoicesResponse>({
queryKey: ['quickbooks-invoices', search, statusFilter, dateFrom, dateTo],
queryFn: () =>
quickbooksApi.getInvoices({
status: statusFilter || undefined,
date_from: dateFrom || undefined,
date_to: dateTo || undefined,
search: search || undefined,
}),
staleTime: 1 * 60 * 1000,
});
const invoices = useMemo(() => {
let items = data?.invoices || [];
// Client-side sort
return [...items].sort((a, b) => {
let cmp = 0;
if (sortBy === 'tx_date') {
cmp = (a.tx_date || '').localeCompare(b.tx_date || '');
} else if (sortBy === 'total_amount') {
cmp = (a.total_amount ?? 0) - (b.total_amount ?? 0);
} else {
cmp = a.invoice_num.localeCompare(b.invoice_num);
}
return sortDir === 'desc' ? -cmp : cmp;
});
}, [data, sortBy, sortDir]);
const totalAmount = invoices.reduce((sum, inv) => sum + (inv.total_amount ?? 0), 0);
const paidCount = invoices.filter((inv) => inv.status.toLowerCase() === 'paid').length;
const paidAmount = invoices
.filter((inv) => inv.status.toLowerCase() === 'paid')
.reduce((sum, inv) => sum + (inv.total_amount ?? 0), 0);
const hasFilters = search || statusFilter || dateFrom || dateTo;
const handleSort = (field: typeof sortBy) => {
if (sortBy === field) {
setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
} else {
setSortBy(field);
setSortDir('desc');
}
};
const SortIcon = ({ field }: { field: typeof sortBy }) => {
if (sortBy !== field) return <ChevronDown className="h-3 w-3 text-surface-300" />;
return sortDir === 'desc' ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />;
};
if (isLoading) {
return (
<AppLayout title="QuickBooks Invoices">
<div className="flex items-center justify-center py-20">
<LoadingSpinner size="lg" />
</div>
</AppLayout>
);
}
if (error) {
return (
<AppLayout title="QuickBooks Invoices">
<div className="flex flex-col items-center justify-center py-20 text-center">
<AlertTriangle className="h-12 w-12 text-amber-400" />
<h3 className="mt-4 text-lg font-semibold text-surface-900">Failed to Load Invoices</h3>
<p className="mt-1 text-sm text-surface-500">
{error instanceof Error ? error.message : 'Could not load invoice data.'}
</p>
<button
onClick={() => refetch()}
className="mt-4 flex items-center gap-2 rounded-lg bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700 min-h-[44px]"
>
<RefreshCw className="h-4 w-4" />
Try Again
</button>
</div>
</AppLayout>
);
}
return (
<AppLayout title="QuickBooks Invoices">
<div className="space-y-6">
{/* Header */}
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 className="text-xl font-bold text-surface-900">Invoices</h1>
<p className="text-sm text-surface-500">
{invoices.length} invoices · Total: {formatCurrency(totalAmount)}
</p>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => refetch()}
className="flex items-center gap-1.5 rounded-lg border border-surface-200 bg-white px-3 py-2 text-sm font-medium text-surface-700 hover:bg-surface-50 min-h-[44px]"
>
<RefreshCw className="h-4 w-4" />
Refresh
</button>
</div>
</div>
{/* Summary */}
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
<div className="rounded-xl border border-surface-200 bg-white p-4">
<div className="flex items-center gap-2">
<FileText className="h-5 w-5 text-blue-500" />
<span className="text-sm font-medium text-surface-600">Total Invoices</span>
</div>
<p className="mt-1 text-2xl font-bold text-surface-900">{invoices.length}</p>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-4">
<div className="flex items-center gap-2">
<Calendar className="h-5 w-5 text-emerald-500" />
<span className="text-sm font-medium text-surface-600">Paid</span>
</div>
<p className="mt-1 text-2xl font-bold text-emerald-600">{formatCurrency(paidAmount)}</p>
<p className="text-xs text-surface-400">{paidCount} invoices paid</p>
</div>
<div className="rounded-xl border border-surface-200 bg-white p-4">
<div className="flex items-center gap-2">
<Download className="h-5 w-5 text-amber-500" />
<span className="text-sm font-medium text-surface-600">Outstanding</span>
</div>
<p className="mt-1 text-2xl font-bold text-amber-600">
{formatCurrency(totalAmount - paidAmount)}
</p>
<p className="text-xs text-surface-400">{invoices.length - paidCount} invoices outstanding</p>
</div>
</div>
{/* Filters */}
<div className="rounded-xl border border-surface-200 bg-white p-4">
<div className="flex items-center gap-2 mb-3">
<Filter className="h-4 w-4 text-surface-400" />
<span className="text-sm font-medium text-surface-700">Filters</span>
{hasFilters && (
<button
onClick={() => {
setSearch('');
setStatusFilter('');
setDateFrom('');
setDateTo('');
}}
className="text-xs text-brand-600 hover:text-brand-700 min-h-[44px]"
>
Clear all
</button>
)}
</div>
<div className="flex flex-wrap gap-3">
<div className="flex-1 min-w-[200px]">
<div className="relative">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-surface-400" />
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search invoice #, customer..."
className="w-full rounded-lg border border-surface-200 bg-white pl-9 pr-3 py-2 text-sm outline-none focus:border-brand-500 min-h-[44px]"
/>
</div>
</div>
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="rounded-lg border border-surface-200 bg-white px-3 py-2 text-sm font-medium text-surface-700 min-h-[44px]"
>
<option value="">All Statuses</option>
<option value="Draft">Draft</option>
<option value="Sent">Sent</option>
<option value="Paid">Paid</option>
<option value="Void">Void</option>
</select>
<input
type="date"
value={dateFrom}
onChange={(e) => setDateFrom(e.target.value)}
className="rounded-lg border border-surface-200 bg-white px-3 py-2 text-sm font-medium text-surface-700 min-h-[44px]"
/>
<input
type="date"
value={dateTo}
onChange={(e) => setDateTo(e.target.value)}
className="rounded-lg border border-surface-200 bg-white px-3 py-2 text-sm font-medium text-surface-700 min-h-[44px]"
/>
</div>
</div>
{/* Table */}
<div className="overflow-x-auto rounded-xl border border-surface-200 bg-white">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-surface-200 bg-surface-50">
<th
className="cursor-pointer px-4 py-3 text-left text-xs font-medium text-surface-500 hover:text-surface-700"
onClick={() => handleSort('invoice_num')}
>
<div className="flex items-center gap-1">
Invoice #
<SortIcon field="invoice_num" />
</div>
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-surface-500">Customer</th>
<th
className="cursor-pointer px-4 py-3 text-right text-xs font-medium text-surface-500 hover:text-surface-700"
onClick={() => handleSort('total_amount')}
>
<div className="flex items-center justify-end gap-1">
Amount
<SortIcon field="total_amount" />
</div>
</th>
<th className="px-4 py-3 text-center text-xs font-medium text-surface-500">Status</th>
<th
className="cursor-pointer px-4 py-3 text-right text-xs font-medium text-surface-500 hover:text-surface-700"
onClick={() => handleSort('tx_date')}
>
<div className="flex items-center justify-end gap-1">
Date
<SortIcon field="tx_date" />
</div>
</th>
<th className="px-4 py-3 text-right text-xs font-medium text-surface-500">Due Date</th>
</tr>
</thead>
<tbody>
{invoices.length === 0 ? (
<tr>
<td colSpan={6} className="px-4 py-12 text-center text-surface-400">
No invoices found
</td>
</tr>
) : (
invoices.map((inv) => (
<tr
key={inv.id}
className="border-b border-surface-100 hover:bg-surface-50 last:border-b-0"
>
<td className="px-4 py-3 font-mono text-sm font-medium text-brand-600">
{inv.invoice_num}
</td>
<td className="px-4 py-3 text-surface-700">{inv.customer_name || '—'}</td>
<td className="px-4 py-3 text-right font-medium text-surface-900">
{formatCurrency(inv.total_amount)}
</td>
<td className="px-4 py-3 text-center">
<span className={`inline-block rounded-full px-2 py-0.5 text-xs font-semibold ${statusColor(inv.status)}`}>
{inv.status || '—'}
</span>
</td>
<td className="px-4 py-3 text-right text-surface-600">{formatDate(inv.tx_date)}</td>
<td className="px-4 py-3 text-right text-surface-600">{formatDate(inv.due_date)}</td>
</tr>
))
)}
</tbody>
</table>
</div>
</div>
</AppLayout>
);
}