import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { FileText, Download, CheckCircle, DollarSign } from "lucide-react";
import { format } from "date-fns";
import { es } from "date-fns/locale";
import { useRecurringInvoice } from "@/hooks/useRecurringInvoice";
import { toast } from "sonner";

export default function RecurringInvoices() {
    const {
        selectedCompany,
        invoices,
        isLoading,
        isMarkingAsPaid,
        totalRevenue,
        pendingAmount,
        getCustomerName,
        markAsPaid,
    } = useRecurringInvoice();

    const statusColors = {
        draft: "bg-gray-100 text-gray-800",
        pending: "bg-yellow-100 text-yellow-800",
        paid: "bg-emerald-100 text-emerald-800",
        overdue: "bg-red-100 text-red-800",
        cancelled: "bg-gray-100 text-gray-800"
    };

    const statusLabels = {
        draft: "Borrador",
        pending: "Pendiente",
        paid: "Pagada",
        overdue: "Vencida",
        cancelled: "Cancelada"
    };

    if (isLoading) {
        return (
            <div className="p-8">
                <div className="animate-pulse space-y-6">
                    <div className="h-8 bg-gray-200 rounded w-1/4"></div>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {[...Array(3)].map((_, i) => (
                            <div key={i} className="h-24 bg-gray-200 rounded-xl"></div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="p-4 lg:p-8 space-y-8">
            <div>
                <h1 className="text-3xl font-bold text-gradient">Facturas Recurrentes</h1>
                <p className="text-gray-600 mt-1">
                    {selectedCompany?.name} • {invoices.length} facturas
                </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <Card className="glass-card border-white/20">
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-gray-600">Total Facturado</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold text-gradient">${totalRevenue.toLocaleString()}</div>
                        <p className="text-xs text-gray-500 mt-1">Facturas pagadas</p>
                    </CardContent>
                </Card>

                <Card className="glass-card border-white/20">
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-gray-600">Por Cobrar</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold text-amber-600">${pendingAmount.toLocaleString()}</div>
                        <p className="text-xs text-gray-500 mt-1">Facturas pendientes</p>
                    </CardContent>
                </Card>

                <Card className="glass-card border-white/20">
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm font-medium text-gray-600">Total Facturas</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold text-blue-600">{invoices.length}</div>
                        <p className="text-xs text-gray-500 mt-1">Todas las facturas</p>
                    </CardContent>
                </Card>
            </div>

            {invoices.length === 0 ? (
                <div className="text-center py-16">
                    <FileText className="w-16 h-16 text-gray-400 mx-auto mb-4" />
                    <h2 className="text-xl font-semibold text-gray-900 mb-2">No hay facturas</h2>
                    <p className="text-gray-500">Las facturas se generarán automáticamente desde las suscripciones activas</p>
                </div>
            ) : (
                <div className="grid grid-cols-1 gap-4">
                    {invoices.map((invoice) => (
                        <Card key={invoice.id} className="glass-card border-white/20 hover:shadow-lg transition-all">
                            <CardContent className="p-6">
                                <div className="flex items-start justify-between">
                                    <div className="flex-1">
                                        <div className="flex items-center gap-3 mb-2">
                                            <FileText className="w-5 h-5 text-emerald-600" />
                                            <h3 className="font-semibold text-lg">{invoice.invoice_number}</h3>
                                            <Badge className={statusColors[invoice.status]}>
                                                {statusLabels[invoice.status]}
                                            </Badge>
                                        </div>
                                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm text-gray-600 mt-4">
                                            <div>
                                                <p className="font-medium text-gray-900">Cliente</p>
                                                <p>{getCustomerName(invoice.customer_id)}</p>
                                            </div>
                                            <div>
                                                <p className="font-medium text-gray-900">Fecha</p>
                                                <p>{format(new Date(invoice.invoice_date), 'dd MMM yyyy', { locale: es })}</p>
                                            </div>
                                            <div>
                                                <p className="font-medium text-gray-900">Vencimiento</p>
                                                <p>{format(new Date(invoice.due_date), 'dd MMM yyyy', { locale: es })}</p>
                                            </div>
                                            <div>
                                                <p className="font-medium text-gray-900">Período</p>
                                                <p className="text-xs">
                                                    {format(new Date(invoice.billing_period_start), 'dd MMM', { locale: es })} - {format(new Date(invoice.billing_period_end), 'dd MMM', { locale: es })}
                                                </p>
                                            </div>
                                        </div>
                                        
                                        <div className="mt-4 p-3 bg-gray-50 rounded-lg">
                                            <div className="flex justify-between text-sm mb-1">
                                                <span>Subtotal:</span>
                                                <span>${invoice.subtotal.toFixed(2)}</span>
                                            </div>
                                            {invoice.discount_amount > 0 && (
                                                <div className="flex justify-between text-sm mb-1 text-emerald-600">
                                                    <span>Descuento:</span>
                                                    <span>-${invoice.discount_amount.toFixed(2)}</span>
                                                </div>
                                            )}
                                            <div className="flex justify-between text-sm mb-1">
                                                <span>Impuesto:</span>
                                                <span>${invoice.tax_amount.toFixed(2)}</span>
                                            </div>
                                            <div className="flex justify-between font-bold text-lg border-t pt-2 mt-2">
                                                <span>Total:</span>
                                                <span className="text-gradient">${invoice.total.toFixed(2)} {invoice.currency}</span>
                                            </div>
                                        </div>

                                        {invoice.status === 'paid' && invoice.paid_date && (
                                            <div className="mt-3 text-sm text-emerald-600">
                                                <CheckCircle className="w-4 h-4 inline mr-1" />
                                                Pagada el {format(new Date(invoice.paid_date), 'dd MMM yyyy', { locale: es })}
                                                {invoice.payment_method && ` - ${invoice.payment_method}`}
                                            </div>
                                        )}
                                    </div>

                                    <div className="flex flex-col gap-2 ml-4">
                                        {(invoice.status === 'pending' || invoice.status === 'overdue') && (
                                            <Button
                                                size="sm"
                                                onClick={() => {
                                                    void markAsPaid({ invoiceId: invoice.id, paymentMethod: "Manual" });
                                                    toast.info("Factura marcada como pagada con método Manual.");
                                                }}
                                                className="bg-gradient-to-r from-emerald-500 to-emerald-600"
                                                disabled={isMarkingAsPaid}
                                            >
                                                <DollarSign className="w-4 h-4 mr-1" />
                                                Marcar Pagada
                                            </Button>
                                        )}
                                        <Button size="sm" variant="outline">
                                            <Download className="w-4 h-4 mr-1" />
                                            Descargar
                                        </Button>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    ))}
                </div>
            )}
        </div>
    );
}