import { Badge, Button, Separator } from "@repo/shadcn-ui/components";
import {
    Calendar,
    Copy,
    CreditCard,
    Download,
    Edit,
    FileText,
    Hash,
    Mail,
    MapPin,
    Pin,
    Trash2,
    User,
    X
} from "lucide-react";
import { InvoiceSummaryFormData } from '../../schemas';


export type InvoicePreviewPanelProps = {
    invoice: InvoiceSummaryFormData;
    isPinned: boolean;
    onClose: () => void;
    onTogglePin: () => void;
};

export function InvoicePreviewPanel({
    invoice,
    isPinned,
    onClose,
    onTogglePin,
}: InvoicePreviewPanelProps) {
    return (
        <div className="flex h-full flex-col">
            {/* Header */}
            <div className="bg-gradient-to-r from-blue-600 to-violet-600 p-6 text-white">
                <div className="flex items-start justify-between mb-4">
                    <div>
                        <h2 className="text-2xl font-bold mb-1">
                            {invoice.is_proforma ? "Proforma" : "Factura"} {invoice.invoice_number}
                        </h2>
                        <p className="text-blue-100 text-sm">
                            Serie: {invoice.series} • Ref: {invoice.reference}
                        </p>
                    </div>
                    <div className="flex gap-2">
                        <Button
                            size="icon"
                            variant="ghost"
                            onClick={onTogglePin}
                            className={`text-white hover:bg-white/20 ${isPinned ? "bg-white/30" : ""}`}
                            title={isPinned ? "Desanclar" : "Anclar"}
                            aria-label={isPinned ? "Desanclar panel" : "Anclar panel"}
                        >
                            <Pin className={`h-4 w-4 ${isPinned ? "fill-current" : ""}`} />
                        </Button>
                        {!isPinned && (
                            <Button
                                size="icon"
                                variant="ghost"
                                onClick={onClose}
                                className="text-white hover:bg-white/20"
                                aria-label="Cerrar vista previa"
                            >
                                <X className="h-4 w-4" />
                            </Button>
                        )}
                    </div>
                </div>
                <Badge variant="outline" className="bg-white/20 text-white border-white/30">
                    {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
                </Badge>
            </div>

            {/* Body */}
            <div className="p-6 overflow-y-auto flex-1">
                <div className="mb-6">
                    <div className="flex items-center gap-2 mb-3">
                        <User className="h-5 w-5 text-blue-600" />
                        <h3 className="font-semibold text-gray-900">Cliente</h3>
                    </div>
                    <div className="bg-gradient-to-r from-blue-50 to-violet-50 p-4 rounded-lg space-y-2">
                        <p className="text-gray-700 font-semibold text-lg">{invoice.recipient.name}</p>
                        <div className="flex items-start gap-2 text-sm">
                            <Hash className="h-4 w-4 text-gray-500 mt-0.5" />
                            <div>
                                <span className="text-gray-500">TIN:</span>
                                <span className="ml-2 text-gray-700 font-medium">{invoice.recipient.tin}</span>
                            </div>
                        </div>
                        <div className="flex items-start gap-2 text-sm">
                            <MapPin className="h-4 w-4 text-gray-500 mt-0.5" />
                            <div className="text-gray-600">
                                <div>{invoice.recipient.street}</div>
                                {invoice.recipient.street2 && <div>{invoice.recipient.street2}</div>}
                                <div>
                                    {invoice.recipient.postal_code} {invoice.recipient.city}, {invoice.recipient.province}
                                </div>
                                <div>{invoice.recipient.country}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <Separator className="my-6" />

                <div className="mb-6">
                    <div className="flex items-center gap-2 mb-3">
                        <Calendar className="h-5 w-5 text-blue-600" />
                        <h3 className="font-semibold text-gray-900">Fechas</h3>
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                        <div className="bg-blue-50 p-3 rounded-lg">
                            <span className="text-xs font-medium text-gray-600 block mb-1">Fecha factura</span>
                            <p className="text-gray-900 font-semibold">{invoice.invoice_date}</p>
                        </div>
                        <div className="bg-violet-50 p-3 rounded-lg">
                            <span className="text-xs font-medium text-gray-600 block mb-1">Fecha operación</span>
                            <p className="text-gray-900 font-semibold">{invoice.operation_date}</p>
                        </div>
                    </div>
                </div>

                <Separator className="my-6" />

                {!!invoice.description && (
                    <>
                        <div className="mb-6">
                            <div className="flex items-center gap-2 mb-3">
                                <FileText className="h-5 w-5 text-blue-600" />
                                <h3 className="font-semibold text-gray-900">Descripción</h3>
                            </div>
                            <p className="text-gray-600 text-sm bg-gray-50 p-3 rounded-lg">{invoice.description}</p>
                        </div>
                        <Separator className="my-6" />
                    </>
                )}

                <div className="mb-6">
                    <div className="flex items-center gap-2 mb-3">
                        <CreditCard className="h-5 w-5 text-blue-600" />
                        <h3 className="font-semibold text-gray-900">Resumen Financiero</h3>
                    </div>
                    <div className="bg-gradient-to-br from-blue-50 to-violet-50 p-4 rounded-lg space-y-3">
                        <div className="flex justify-between text-sm">
                            <span className="text-gray-600">Subtotal</span>
                            <span className="text-gray-900 font-medium">{invoice.subtotal_amount_fmt}</span>
                        </div>

                        {invoice.discount_amount > 0 && (
                            <>
                                <div className="flex justify-between text-sm">
                                    <span className="text-gray-600">Descuento ({invoice.discount_percentage}%)</span>
                                    <span className="text-red-600 font-medium">-{invoice.discount_amount_fmt}</span>
                                </div>
                                <div className="flex justify-between text-sm">
                                    <span className="text-gray-600">Base imponible</span>
                                    <span className="text-gray-900 font-medium">{invoice.taxable_amount_fmt}</span>
                                </div>
                            </>
                        )}

                        <Separator />

                        <div className="flex justify-between text-sm">
                            <span className="text-gray-600">Total impuestos</span>
                            <span className="text-gray-900 font-medium">{invoice.taxes_amoun_fmt}</span>
                        </div>

                        <Separator />

                        <div className="flex justify-between items-center pt-2">
                            <span className="font-bold text-gray-900 text-lg">Total</span>
                            <span className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-violet-600 bg-clip-text text-transparent">
                                {invoice.total_amount_fmt}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {/* Footer acciones */}
            <div className="p-6 bg-gradient-to-r from-blue-50 to-violet-50 border-t border-gray-200">
                <div className="grid grid-cols-2 gap-3">
                    <Button variant="outline" className="border-blue-200 text-blue-600 hover:bg-blue-50 bg-transparent">
                        <Edit className="mr-2 h-4 w-4" /> Editar
                    </Button>
                    <Button variant="outline" className="border-violet-200 text-violet-600 hover:bg-violet-50 bg-transparent">
                        <Copy className="mr-2 h-4 w-4" /> Duplicar
                    </Button>
                    <Button variant="outline" className="border-blue-200 text-blue-600 hover:bg-blue-50 bg-transparent">
                        <Download className="mr-2 h-4 w-4" /> Descargar
                    </Button>
                    <Button variant="outline" className="border-violet-200 text-violet-600 hover:bg-violet-50 bg-transparent">
                        <Mail className="mr-2 h-4 w-4" /> Enviar
                    </Button>
                </div>
                <Button variant="outline" className="w-full mt-3 border-red-200 text-red-600 hover:bg-red-50 bg-transparent">
                    <Trash2 className="mr-2 h-4 w-4" /> Eliminar factura
                </Button>
            </div>
        </div>
    );
}