import React from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { FileText, Download, DollarSign, Clock, CheckCircle2 } from "lucide-react";
import { Button } from "@/components/ui/button";

export default function ClientInvoices() {
  const invoices = [
    { id: "INV-001", event: "Tech Conference 2025", amount: 12400, status: "Paid", date: "2025-01-10", dueDate: "2025-01-20" },
    { id: "INV-002", event: "Product Launch", amount: 8950, status: "Pending", date: "2025-01-15", dueDate: "2025-01-25" },
    { id: "INV-003", event: "Annual Gala", amount: 15200, status: "Overdue", date: "2024-12-20", dueDate: "2025-01-05" },
  ];

  const stats = {
    total: invoices.reduce((sum, inv) => sum + inv.amount, 0),
    paid: invoices.filter(i => i.status === "Paid").length,
    pending: invoices.filter(i => i.status === "Pending").length,
    overdue: invoices.filter(i => i.status === "Overdue").length,
  };

  const getStatusColor = (status) => {
    const colors = {
      'Paid': 'bg-green-100 text-green-700',
      'Pending': 'bg-yellow-100 text-yellow-700',
      'Overdue': 'bg-red-100 text-red-700',
    };
    return colors[status] || 'bg-slate-100 text-slate-700';
  };

  return (
    <div className="p-4 md:p-8 bg-slate-50 min-h-screen">
      <div className="max-w-7xl mx-auto">
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-[#1C323E]">My Invoices</h1>
          <p className="text-slate-500 mt-1">View and manage your billing</p>
        </div>

        {/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card className="border-slate-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-2">
                <DollarSign className="w-8 h-8 text-[#0A39DF]" />
              </div>
              <p className="text-sm text-slate-500">Total Amount</p>
              <p className="text-3xl font-bold text-[#1C323E]">${stats.total.toLocaleString()}</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-2">
                <CheckCircle2 className="w-8 h-8 text-green-600" />
              </div>
              <p className="text-sm text-slate-500">Paid</p>
              <p className="text-3xl font-bold text-green-600">{stats.paid}</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-2">
                <Clock className="w-8 h-8 text-yellow-600" />
              </div>
              <p className="text-sm text-slate-500">Pending</p>
              <p className="text-3xl font-bold text-yellow-600">{stats.pending}</p>
            </CardContent>
          </Card>

          <Card className="border-slate-200">
            <CardContent className="p-6">
              <div className="flex items-center justify-between mb-2">
                <FileText className="w-8 h-8 text-red-600" />
              </div>
              <p className="text-sm text-slate-500">Overdue</p>
              <p className="text-3xl font-bold text-red-600">{stats.overdue}</p>
            </CardContent>
          </Card>
        </div>

        {/* Invoices List */}
        <Card className="border-slate-200">
          <CardHeader className="bg-gradient-to-br from-slate-50 to-white border-b">
            <CardTitle>All Invoices</CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            <div className="space-y-4">
              {invoices.map((invoice) => (
                <div key={invoice.id} className="p-6 bg-white border-2 border-slate-200 rounded-xl hover:border-[#0A39DF] transition-all">
                  <div className="flex items-center justify-between mb-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h3 className="text-lg font-bold text-[#1C323E]">{invoice.id}</h3>
                        <Badge className={getStatusColor(invoice.status)}>
                          {invoice.status}
                        </Badge>
                      </div>
                      <p className="text-sm text-slate-600">{invoice.event}</p>
                      <p className="text-xs text-slate-500 mt-1">
                        Issued: {invoice.date} • Due: {invoice.dueDate}
                      </p>
                    </div>
                    <div className="text-right">
                      <p className="text-3xl font-bold text-[#0A39DF]">${invoice.amount.toLocaleString()}</p>
                      <div className="flex gap-2 mt-3">
                        <Button variant="outline" size="sm">
                          <Download className="w-4 h-4 mr-2" />
                          Download
                        </Button>
                        {invoice.status === "Pending" && (
                          <Button size="sm" className="bg-[#0A39DF]">
                            Pay Now
                          </Button>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}