fourge-portal/src/pages/client/MyInvoices.jsx

import { useState, useEffect } from 'react';
import Layout from '../../components/Layout';
import LoadingButton from '../../components/LoadingButton';
import SortTh from '../../components/SortTh';
import { supabase } from '../../lib/supabase';
import { generateInvoicePDF } from '../../lib/invoice';
import { useAuth } from '../../context/AuthContext';
import { useSortable } from '../../hooks/useSortable';

const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };

export default function MyInvoices() {
  const { currentUser } = useAuth();
  const companies = (currentUser?.companies?.length ? currentUser.companies : (currentUser?.company ? [currentUser.company] : [])).slice().sort((a, b) => a.name.localeCompare(b.name));
  const [activeCompanyId, setActiveCompanyId] = useState(companies[0]?.id || null);

  const [invoices, setInvoices] = useState([]);
  const [loading, setLoading] = useState(true);
  const [generatingInvoiceId, setGeneratingInvoiceId] = useState('');
  const { sortKey, sortDir, toggle, sort } = useSortable('invoice_date');

  useEffect(() => {
    async function load() {
      const { data } = await supabase
        .from('invoices')
        .select('*, company:companies(name), items:invoice_items(*)')
        .order('created_at', { ascending: false });
      setInvoices((data || []).filter(inv => inv.status !== 'draft'));
      setLoading(false);
    }
    load();
  }, []);

  const handleDownload = async (invoice) => {
    if (generatingInvoiceId) return;
    setGeneratingInvoiceId(invoice.id);
    try {
      await generateInvoicePDF(invoice, invoice.company, invoice.items || []);
    } finally {
      setGeneratingInvoiceId('');
    }
  };

  const visible = companies.length > 1 && activeCompanyId
    ? invoices.filter(inv => inv.company_id === activeCompanyId)
    : invoices;

  const outstanding = visible.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total), 0);
  const paid = visible.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total), 0);
  const overdueCount = visible.filter(inv => inv.status !== 'paid' && new Date(inv.due_date) < new Date()).length;

  const sorted = sort(visible, (inv, key) => {
    if (key === 'invoice_date' || key === 'due_date') return new Date(inv[key] || 0).getTime();
    if (key === 'total') return Number(inv.total || 0);
    return inv[key] || '';
  });

  const th = { sortKey, sortDir, onSort: toggle };

  return (
    <Layout>
      <div className="page-header">
        <div>
          <div className="page-title">Invoices</div>
          <div className="page-subtitle">{visible.length} invoice{visible.length !== 1 ? 's' : ''}</div>
        </div>
      </div>

      <div className="stats-grid" style={{ marginBottom: 24 }}>
        <div className="stat-card stat-card-highlight">
          <div className="stat-value">${outstanding.toFixed(2)}</div>
          <div className="stat-label">Outstanding</div>
        </div>
        <div className="stat-card">
          <div className="stat-value">${paid.toFixed(2)}</div>
          <div className="stat-label">Paid</div>
        </div>
        <div className="stat-card">
          <div className="stat-value" style={{ color: overdueCount > 0 ? 'var(--danger)' : undefined }}>{overdueCount}</div>
          <div className="stat-label">Overdue</div>
        </div>
      </div>

      {companies.length > 1 && (
        <div style={{ marginBottom: 16 }}>
          <select className="filter-select" value={activeCompanyId || ''} onChange={e => setActiveCompanyId(e.target.value)}>
            {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
      )}

      {loading ? (
        <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
      ) : visible.length === 0 ? (
        <div className="empty-state">
          <h3>No invoices yet</h3>
          <p>Your invoices will appear here once they are sent.</p>
        </div>
      ) : (
        <div className="card">
          <div className="table-wrapper">
            <table>
              <thead>
                <tr>
                  <SortTh col="invoice_number" {...th}>Invoice #</SortTh>
                  <SortTh col="invoice_date" {...th}>Issued</SortTh>
                  <SortTh col="due_date" {...th}>Due</SortTh>
                  <SortTh col="status" {...th}>Status</SortTh>
                  <SortTh col="total" {...th}>Total</SortTh>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                {sorted.map(inv => {
                  const isOverdue = inv.status !== 'paid' && new Date(inv.due_date) < new Date();
                  return (
                    <tr key={inv.id}>
                      <td style={{ fontWeight: 600 }}>{inv.invoice_number}</td>
                      <td style={{ color: 'var(--text-muted)' }}>{new Date(inv.invoice_date).toLocaleDateString()}</td>
                      <td style={{ color: isOverdue ? 'var(--danger)' : 'var(--text-muted)' }}>
                        {inv.due_date ? new Date(inv.due_date).toLocaleDateString() : '—'}
                        {isOverdue && <span style={{ marginLeft: 6, fontSize: 11 }}>Overdue</span>}
                      </td>
                      <td><span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span></td>
                      <td style={{ fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</td>
                      <td>
                        <LoadingButton
                          className="btn btn-outline btn-sm"
                          loading={generatingInvoiceId === inv.id}
                          disabled={Boolean(generatingInvoiceId)}
                          loadingText="Generating..."
                          onClick={() => handleDownload(inv)}
                        >
                          Download PDF
                        </LoadingButton>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}
    </Layout>
  );
}