import React from "react";
import ReceiptTemplate from "@/Components/ReceiptTemplate";

/**
 * Direct Purchase Return Receipt Print Component
 * 
 * Uses the generic ReceiptTemplate for direct purchase return transactions
 */
export default function DirectPurchaseReturnReceiptPrint({ purchaseReturn }) {
    // Prepare summary information
    const summaryInfo = {
        "Total Return Qty": purchaseReturn?.details?.reduce((acc, item) => acc + Number(item.return_qty || 0), 0) || 0,
        "Total Return Amount": `৳ ${purchaseReturn?.total ?? 0}`,
        "Return Status": "Processed"
    };

    // Additional header info - Direct returns don't have invoice
    const additionalInfo = {
        "Return Type": "Direct Return"
    };

    // Supplier information (treating supplier as party for template)
    const supplierInfo = {
        name: purchaseReturn?.supplier?.name,
        number: purchaseReturn?.supplier?.number || purchaseReturn?.supplier?.phone,
        address: purchaseReturn?.supplier?.address,
        code: purchaseReturn?.supplier?.code,
        email: purchaseReturn?.supplier?.email,
        user_type: "Supplier"
    };

    return (
        <ReceiptTemplate
            title="Direct Purchase Return Voucher"
            receiptNumber={purchaseReturn?.reference_no ?? "N/A"}
            date={
                purchaseReturn?.return_date
                    ? new Date(purchaseReturn.return_date).toLocaleDateString(
                          "en-GB"
                        
                      )
                    : "N/A"
            }
            party={supplierInfo}
            summary={summaryInfo}
            additionalInfo={additionalInfo}
            titleColor="text-red-700"
            showSignatures={true}
        >
            {/* Returned Items Table */}
            <div className="mb-6">
                <h4 className="text-md font-semibold text-gray-800 mb-3">
                    Returned Items Details
                </h4>
                <div className="overflow-x-auto">
                    <table className="w-full text-sm border-collapse border border-gray-300">
                        <thead className="bg-red-50">
                            <tr>
                                <th className="border border-gray-300 px-3 py-2 text-left">
                                    Product
                                </th>
                                <th className="border border-gray-300 px-3 py-2 text-center">
                                    Return Qty
                                </th>
                                <th className="border border-gray-300 px-3 py-2 text-right">
                                    Return Price
                                </th>
                                <th className="border border-gray-300 px-3 py-2 text-right">
                                    Total Return
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {purchaseReturn?.details?.map((item, index) => (
                                <tr key={index} className="hover:bg-gray-50">
                                    <td className="border border-gray-300 px-3 py-2">
                                        <div className="font-medium">
                                            {item?.product?.name ?? "N/A"}
                                        </div>
                                        {item?.attribute && (
                                            <div className="text-xs text-gray-500 mt-1">
                                                SKU: {item.attribute.sku}
                                                {item.attribute.brand?.name &&
                                                    `, Brand: ${item.attribute.brand.name}`}
                                                {item.attribute.color?.name &&
                                                    `, Color: ${item.attribute.color.name}`}
                                                {item.attribute.size?.name &&
                                                    `, Size: ${item.attribute.size.name}`}
                                            </div>
                                        )}
                                    </td>
                                    <td className="border border-gray-300 px-3 py-2 text-center font-medium text-red-600">
                                        {item?.return_qty ?? 0}
                                    </td>
                                    <td className="border border-gray-300 px-3 py-2 text-right">
                                        ৳ {item?.return_price ?? 0}
                                    </td>
                                    <td className="border border-gray-300 px-3 py-2 text-right font-medium">
                                        ৳ {item?.total ?? 0}
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                        <tfoot className="bg-gray-100">
                            <tr>
                                <td
                                    colSpan="2"
                                    className="border border-gray-300 px-3 py-2 font-semibold text-right"
                                >
                                    Total:
                                </td>
                                <td className="border border-gray-300 px-3 py-2 text-center font-bold text-red-600">
                                    {purchaseReturn?.details?.reduce(
                                        (acc, item) =>
                                            acc + Number(item.return_qty || 0),
                                        0
                                    ) || 0}
                                </td>
                                <td className="border border-gray-300 px-3 py-2 text-right font-bold text-lg">
                                    ৳ {purchaseReturn?.total ?? 0}
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            {/* Supplier Information */}
            {purchaseReturn?.supplier && (
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                    <h4 className="text-md font-semibold text-blue-800 mb-3">
                        Supplier Information
                    </h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-700">
                        <p>
                            <strong>Supplier Name:</strong>{" "}
                            {purchaseReturn?.supplier?.name ?? "N/A"}
                        </p>
                        <p>
                            <strong>Phone:</strong>{" "}
                            {purchaseReturn?.supplier?.number || 
                             purchaseReturn?.supplier?.phone || 
                             "N/A"}
                        </p>
                        {purchaseReturn?.supplier?.code && (
                            <p>
                                <strong>Supplier Code:</strong>{" "}
                                {purchaseReturn.supplier.code}
                            </p>
                        )}
                        {purchaseReturn?.supplier?.address && (
                            <p>
                                <strong>Address:</strong>{" "}
                                {purchaseReturn.supplier.address}
                            </p>
                        )}
                        {purchaseReturn?.supplier?.email && (
                            <p>
                                <strong>Email:</strong>{" "}
                                {purchaseReturn.supplier.email}
                            </p>
                        )}
                    </div>
                </div>
            )}

            {/* Return Information */}
            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
                <h4 className="text-md font-semibold text-red-800 mb-3">
                    Return Information
                </h4>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-red-700">
                    <p>
                        <strong>Return Date:</strong>{" "}
                        {purchaseReturn?.return_date
                            ? new Date(
                                  purchaseReturn.return_date
                              ).toLocaleDateString()
                            : "N/A"}
                    </p>
                    <p>
                        <strong>Return Type:</strong> Direct Return
                    </p>
                    <p>
                        <strong>Supplier:</strong>{" "}
                        {purchaseReturn?.supplier?.name ?? "N/A"}
                    </p>
                    <p>
                        <strong>Reference No:</strong>{" "}
                        {purchaseReturn?.reference_no ?? "N/A"}
                    </p>
                </div>
            </div>
        </ReceiptTemplate>
    );
}

