'use client'

import { Download } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import type { Invoice } from '@/lib/types'

interface InvoiceTableProps {
  invoices: Invoice[]
}

const statusColors: Record<Invoice['status'], string> = {
  paid: 'bg-emerald-500/10 text-emerald-400',
  pending: 'bg-yellow-500/10 text-yellow-400',
  refunded: 'bg-red-500/10 text-red-400',
  cancelled: 'bg-gray-500/10 text-gray-400',
}

export function InvoiceTable({ invoices }: InvoiceTableProps) {
  return (
    <Card className="bg-card border-border">
      <CardHeader>
        <CardTitle>Invoice History</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-border">
                <th className="text-left py-3 px-4 text-sm font-semibold text-foreground">
                  Description
                </th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-foreground">
                  Date
                </th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-foreground">
                  Amount
                </th>
                <th className="text-left py-3 px-4 text-sm font-semibold text-foreground">
                  Status
                </th>
                <th className="text-right py-3 px-4 text-sm font-semibold text-foreground">
                  Download
                </th>
              </tr>
            </thead>
            <tbody>
              {invoices.map((invoice) => (
                <tr key={invoice.id} className="border-b border-border hover:bg-white/5">
                  <td className="py-4 px-4">
                    <p className="font-medium text-foreground">{invoice.description}</p>
                    {invoice.projectId && (
                      <p className="text-xs text-muted-foreground mt-1">
                        Project: {invoice.projectId}
                      </p>
                    )}
                  </td>
                  <td className="py-4 px-4 text-sm text-muted-foreground">
                    {new Date(invoice.date).toLocaleDateString()}
                  </td>
                  <td className="py-4 px-4">
                    <p className="font-semibold text-foreground">
                      {invoice.total} {invoice.currency}
                    </p>
                  </td>
                  <td className="py-4 px-4">
                    <Badge className={statusColors[invoice.status]}>
                      {invoice.status}
                    </Badge>
                  </td>
                  <td className="py-4 px-4 text-right">
                    {invoice.downloadUrl && (
                      <Button variant="ghost" size="sm" asChild>
                        <a href={invoice.downloadUrl} download>
                          <Download className="w-4 h-4" />
                        </a>
                      </Button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  )
}