import React from "react";
import { SHOP_INFO } from "@/Utils/constants";

const ReceiptTemplate = ({
    title = "Receipt",
    receiptNumber = "N/A",
    date = "N/A",
    party = {},
    salesPerson = null,
    children,
    summary = null,
    showSignatures = true,
    titleColor = "text-blue-700",
    additionalInfo = {},
}) => {
    return (
        <div className="hidden print:block font-sans">
            <div className="max-w-4xl mx-auto  rounded-xl p-8 shadow-sm">
                {/* Header */}
                <div className="text-center mb-2">
                    <h1 className="text-3xl inline-block font-bold text-gray-900 uppercase tracking-wide print:font-prose-antique mb-3 relative">
                        {SHOP_INFO.name}
                        {SHOP_INFO.slogan && (
                            <span className="text-[9px] text-gray-600 absolute right-0 -bottom-6">
                                {SHOP_INFO.slogan}
                            </span>
                        )}
                    </h1>
                    <p className="text-sm text-gray-600">{SHOP_INFO.address}</p>
                    <p className="text-sm text-gray-600">
                        {SHOP_INFO.phone ? `Phone: ${SHOP_INFO.phone} |` : ""}
                        Email: {SHOP_INFO.email}
                    </p>
                </div>
                <h2
                    className={`text-xl  text-center  font-semibold ${titleColor} uppercase ${"w-full "}`}
                >
                    {title}
                </h2>

                <hr className="border-t-2 border-dashed border-gray-300 mb-6" />

                {/* Title + Receipt Info */}
                <div className="flex  justify-between  gap-5 items-start mb-6">
                    {/* Person Info */}
                    <div className={`col-span-6 `}>
                        {party?.name && (
                            <div className="space-y-1 text-gray-700">
                                <p>
                                    <strong>Name:</strong>{" "}
                                    {party?.name ?? "N/A"}
                                </p>
                                <p>
                                    <strong>Phone:</strong>{" "}
                                    {party?.number ?? "N/A"}
                                </p>
                                <p>
                                    <strong>Address:</strong>{" "}
                                    {party?.address ?? "N/A"}
                                </p>
                                {party?.code && (
                                    <p>
                                        <strong>ID:</strong>{" "}
                                        {party?.code ?? "N/A"}
                                    </p>
                                )}
                            </div>
                        )}
                    </div>
                    <div
                        className={`text-sm text-gray-700 text-right space-y-1 `}
                    >
                        <p>
                            <strong>Date:</strong> {date}
                        </p>
                        <p>
                            <strong>Receipt No:</strong> {receiptNumber}
                        </p>

                        {Object.entries(additionalInfo).map(
                            ([key, value], idx) => (
                                <p key={idx}>
                                    <strong>{key}:</strong> {value}
                                </p>
                            )
                        )}
                        {party?.user_type && (
                            <p>
                                <strong>Type:</strong> {party.user_type}
                            </p>
                        )}
                    </div>
                </div>

                {/* Person, Salesperson, Summary */}

                {/* Custom Children Content */}
                <div className="mb-6">{children}</div>

                <div className="grid gap-4  grid-cols-12  text-sm mb-6">
                    {/* Sales Person */}
                    {salesPerson && (
                        <div className="col-span-6">
                            <h3 className="text-base font-semibold text-gray-800 mb-2 border-b border-gray-300 pb-1">
                                Sales Person
                            </h3>
                            <div className="space-y-1 text-gray-700">
                                <p>
                                    <strong>Name:</strong>{" "}
                                    {salesPerson?.name ?? "N/A"}
                                </p>
                                {salesPerson?.code && (
                                    <p>
                                        <strong>Code:</strong>{" "}
                                        {salesPerson?.code ?? "N/A"}
                                    </p>
                                )}

                                {salesPerson?.number && (
                                    <p>
                                        <strong>Phone:</strong>{" "}
                                        {salesPerson.number}
                                    </p>
                                )}
                                {salesPerson?.email && (
                                    <p>
                                        <strong>Email:</strong>{" "}
                                        {salesPerson.email}
                                    </p>
                                )}
                            </div>
                        </div>
                    )}

                    {/* Summary Info */}
                    {summary && (
                        <div className="col-span-6">
                            <h3 className="text-base font-semibold text-gray-800 mb-2 border-b border-gray-300 pb-1">
                                Payment Summary
                            </h3>
                            <div className="space-y-1 text-gray-700">
                                {Object.entries(summary).map(
                                    ([key, value], idx) => (
                                        <p key={idx}>
                                            <strong>{key}:</strong> {value}
                                        </p>
                                    )
                                )}
                            </div>
                        </div>
                    )}
                </div>

                {/* Signatures */}
                {showSignatures && (
                    <div className="grid grid-cols-2 gap-8 pt-10 mt-8 border-t border-gray-200">
                        <div className="text-center text-sm text-gray-700">
                            <p className="font-semibold mb-6">
                                {party?.user_type ? party.user_type : "Party"}{" "}
                                Signature
                            </p>
                            <div className="w-40 mx-auto border-t border-gray-400"></div>
                        </div>
                        <div className="text-center text-sm text-gray-700">
                            <p className="font-semibold mb-6">Authorized By</p>
                            <div className="w-40 mx-auto border-t border-gray-400"></div>
                        </div>
                    </div>
                )}

                {/* Footer */}
                {/* <div className="text-center text-xs text-gray-500 mt-10 pt-4 border-t border-gray-200">
                    <p>Thank you for your business!</p>
                    <p>
                        This is a computer-generated document and does not
                        require a signature.
                    </p>
                </div> */}
            </div>
        </div>
    );
};

export default ReceiptTemplate;
