import { redirect } from 'next/navigation';
import { Receipt } from 'lucide-react';
import type { Metadata } from 'next';

import { getPortalSession } from '@/lib/portal/auth';
import { getClientInvoices } from '@/lib/services/portal.service';
import { Badge } from '@/components/ui/badge';
import { formatCurrency } from '@/lib/utils/currency';

export const metadata: Metadata = { title: 'Invoices' };

const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  draft: 'secondary',
  sent: 'default',
  paid: 'outline',
  overdue: 'destructive',
  cancelled: 'destructive',
};

export default async function PortalInvoicesPage() {
  const session = await getPortalSession();
  if (!session) redirect('/portal/login');

  const invoices = await getClientInvoices(session.clientId, session.portId);

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-semibold text-gray-900">Invoices</h1>
        <p className="text-sm text-gray-500 mt-1">Your billing statements and payment history</p>
      </div>

      {invoices.length === 0 ? (
        <div className="bg-white rounded-lg border p-12 text-center">
          <Receipt className="h-10 w-10 text-gray-300 mx-auto mb-3" />
          <p className="text-gray-500 font-medium">No invoices on file</p>
          <p className="text-sm text-gray-400 mt-1">
            Invoices will appear here once issued by the port.
          </p>
        </div>
      ) : (
        <div className="space-y-3">
          {invoices.map((invoice) => (
            <div key={invoice.id} className="bg-white rounded-lg border p-5">
              <div className="flex items-start justify-between gap-4 flex-wrap">
                <div className="flex-1 min-w-0">
                  <div className="flex items-center gap-3">
                    <p className="font-medium text-gray-900">{invoice.invoiceNumber}</p>
                    <Badge variant={STATUS_COLORS[invoice.status] ?? 'default'}>
                      {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
                    </Badge>
                  </div>
                  <div className="flex flex-wrap gap-4 mt-2 text-sm text-gray-500">
                    <span>
                      Due:{' '}
                      {new Date(invoice.dueDate).toLocaleDateString('en-US', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric',
                      })}
                    </span>
                    {invoice.paymentDate && (
                      <span className="text-green-600">
                        Paid:{' '}
                        {new Date(invoice.paymentDate).toLocaleDateString('en-US', {
                          year: 'numeric',
                          month: 'short',
                          day: 'numeric',
                        })}
                      </span>
                    )}
                  </div>
                </div>
                <div className="text-right shrink-0">
                  <p className="text-lg font-semibold text-gray-900">
                    {formatCurrency(invoice.total, invoice.currency)}
                  </p>
                  {invoice.paymentStatus && invoice.paymentStatus !== 'unpaid' && (
                    <p className="text-sm text-gray-400 capitalize">{invoice.paymentStatus}</p>
                  )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
