import React from "react";

function PrintOrder({ order, auth }) {
    const invoiceData = {
        invoiceNumber: order.order_no,
        date: new Date(order.created_at).toLocaleDateString('en-us', {
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
        }),
        company: {
            name: auth.shop_info.name,
            address: auth.shop_info.address,
            email: auth.shop_info.email,
            provider: auth.shop_info.provider,
            manager: auth.shop_info.manager,
            phone: auth.shop_info.phone,
        },
        sr: {
            name: order?.sr?.name,
            address: order?.sr?.address,
            phone: order?.sr?.phone,
            email: order?.sr?.email,
        },
        customer: {
            name: order?.client?.name,
            address: order?.client?.address,
            phone: order?.client?.phone,
            email: order?.client?.email,
        },
        items: order?.order_details?.map((item) => ({
            description: `${item.attribute.product.name} (${item.attribute.sku})`,
            quantity: item.quantity,
            price: Number(item.price),
            total: Number(item.total),
        })) || [],
        totals: {
            subtotal: Number(order.total),
            discount: Number(order.discount_first),
            discount_2nd: Number(order.discount_second),
            total: Number(order.grand_total),
        },
    };

    const { invoiceNumber, date, company, sr, customer, items, totals } = invoiceData;

    return (
        <div className="bg-gray-100 p-4 min-h-screen flex items-center justify-center print:bg-white print:p-0">
            <div
                className="bg-white p-8 rounded-lg shadow-md print:shadow-none"
                style={{
                    width: "210mm", // A4 width
                    minHeight: "297mm", // A4 height
                    display: "flex",
                    flexDirection: "column",
                }}
            >
                {/* Header Section */}
                <div className="flex justify-between items-center border-b pb-4 mb-6">
                    <div>
                        <h1 className="text-3xl font-bold text-gray-700">
                            Order Invoice
                        </h1>
                        <p className="text-sm text-gray-500">
                            Invoice #: {invoiceNumber}
                        </p>
                        <p className="text-sm text-gray-500">Date: {date}</p>
                    </div>
                    <div className="text-right">
                        <h2 className="text-xl font-semibold text-gray-700">
                            {company.name}
                        </h2>
                        <p className="text-sm text-gray-500">
                            {company.address}
                        </p>
                        <p className="text-sm text-gray-500">
                            Email: {company.email}
                        </p>
                        <p className="text-sm text-gray-500">
                            Provider: {company.provider}
                        </p>
                        <p className="text-sm text-gray-500">
                            Manager: {company.manager}
                        </p>
                        <p className="text-sm text-gray-500">
                            Phone: {company.phone}
                        </p>
                    </div>
                </div>

                {/* Billing Information */}
                <div className="grid grid-cols-2 gap-4 mb-6">
                    <div>
                        <h3 className="text-lg font-semibold text-gray-700">
                            SR:
                        </h3>
                        <p className="text-sm text-gray-500">{sr.name}</p>
                        <p className="text-sm text-gray-500">
                            {sr.address}
                        </p>
                        <p className="text-sm text-gray-500">
                            Phone: {sr.phone}
                        </p>
                        <p className="text-sm text-gray-500">
                            Email: {sr.email}
                        </p>
                    </div>
                    <div>
                        <h3 className="text-lg font-semibold text-gray-700">
                            Bill To:
                        </h3>
                        <p className="text-sm text-gray-500">{customer.name}</p>
                        <p className="text-sm text-gray-500">
                            {customer.address}
                        </p>
                        <p className="text-sm text-gray-500">
                            Phone: {customer.phone}
                        </p>
                        <p className="text-sm text-gray-500">
                            Email: {customer.email}
                        </p>
                    </div>
                </div>

                {/* Itemized Table */}
                <table className="min-w-full mb-6">
                    <thead>
                        <tr className="uppercase text-sm leading-normal">
                            <th className="py-3 px-6 text-left border w-[22rem]">Item</th>
                            <th className="py-3 px-6 text-center border">Qty</th>
                            <th className="py-3 px-6 text-center border">Price</th>
                            <th className="py-3 px-6 text-center border">Total</th>
                        </tr>
                    </thead>
                    <tbody className="text-sm font-light">
                        {items.map((item, index) => (
                            <tr key={index} className="border-b hover:bg-gray-100">
                                <td className="py-3 px-6 text-left border">{item.description}</td>
                                <td className="py-3 px-6 text-center border">{item.quantity}</td>
                                <td className="py-3 px-6 text-right border">{item.price.toFixed(2)} ৳</td>
                                <td className="py-3 px-6 text-right border">{item.total.toFixed(2)} ৳</td>
                            </tr>
                        ))}
                    </tbody>
                </table>

                {/* Totals Section */}
                <div className="flex justify-between mb-6">
                    <div className="gap-3 text-wrap text-sm">{order.note}</div>
                    <div className="w-1/2">
                        <div className="flex justify-between py-2">
                            <span className="text-gray-600">Subtotal:</span>
                            <span className="font-semibold text-gray-700">{totals.subtotal.toFixed(2)} ৳</span>
                        </div>
                        <div className="flex justify-between py-2">
                            <span className="text-gray-600">Discount:</span>
                            <span className="font-semibold text-gray-700">{totals.discount.toFixed(2)} %</span>
                        </div>
                        <div className="flex justify-between py-2">
                            <span className="text-gray-600">Discount 2nd:</span>
                            <span className="font-semibold text-gray-700">{totals.discount_2nd.toFixed(2)} %</span>
                        </div>
                        <div className="flex justify-between py-2 border-t border-gray-200 mt-2">
                            <span className="text-gray-600">Total:</span>
                            <span className="font-bold text-gray-700">{totals.total.toFixed(2)} ৳</span>
                        </div>
                    </div>
                </div>

                {/* Signature Section */}
                <div className="mt-auto">
                    <div className="flex justify-between mt-12 border-t -200 pt-4">
                        <p>SR Signature: ____________________</p>
                        <p>Customer Signature: ____________________</p>
                    </div>
                </div>

                {/* Footer */}
                <div className="text-center mt-8">
                    <p className="text-sm text-gray-500">Thank you for your business!</p>
                </div>
            </div>
        </div>
    );
}

export default PrintOrder;
