import { AiFillSignature } from 'react-icons/ai';
import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { LuGitGraph } from 'react-icons/lu';
import AccountNav from '../accounts/AccountNav';
import { useEffect, useState } from 'react';
import api from '../../config/api';
import SigningOrderDiagram from '../../SigningOrderDiagram ';
import { IoCloseOutline } from 'react-icons/io5';
import { MdEditDocument } from "react-icons/md";
import { useSelector } from 'react-redux';
import { RootState } from '../../store/store';
import { SignTypeEnum } from '../../utlity/types';
import AuditModal from './AuditModal';
import { FaFile } from 'react-icons/fa6';
import { IoMdDownload } from 'react-icons/io';
import downloadDocumentUtils from '../../utlity/downloadDocumentsUtils';
import signSessionRedirect from '../../utlity/signSessionRedirect';

// Sample recipient data — you can replace this with actual API data later
const recipients = [
    {
        id: 1,
        name: "Shanu.R",
        email: "shanu.r@example.com",
        signedAt: "5/1/2025 | 04:24:35 pm",
        status: "Signed",
        viewLink: "#"
    },
    {
        id: 2,
        name: "Amit B",
        email: "amit.b@example.com",
        signedAt: "5/1/2025 | 04:24:35 pm",
        status: "Signed",
        viewLink: "#"
    }
];

const TransactionView = () => {
    const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();

    const navigate = useNavigate();

    if (!accountId || !transactionId) {
        window.location.href = "/";
        return null;
    }

    const [transactionDetails, setTransactionDetails] = useState(null);
    const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
    const user = useSelector((state: RootState) => state.user)
    const location = useLocation();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [documentsData, setDocumentsData] = useState([])

    useEffect(() => {
        // update whenever location changes
        setIsModalOpen(location.search.includes("auditStatus"));
    }, [location]);

    const handleOpenAuditModal = () => {
        const { pathname, search } = location;
        let newSearch = search
            ? search.includes("auditStatus")
                ? search
                : `${search}&auditStatus`
            : "?auditStatus";

        window.history.pushState({}, "", pathname + newSearch);
        setIsModalOpen(true); // update state immediately
    };

    const closeModal = () => {
        let search = location.search
            .replace(/[?&]auditStatus\b/, "")
            .replace(/^&/, "?")
            .replace(/\?$/, "");

        window.history.pushState({}, "", location.pathname + search);
        setIsModalOpen(false); //  update state immediately
    };

    const fetchData = async () => {
        try {
            const [res1, res2] = await Promise.all([api.get(`/api/accounts/${accountId}/transactions/${transactionId}`),
            api.get(`/api/accounts/${accountId}/transactions/${transactionId}/recipients`)])
            setTransactionDetails({ transaction: res1.data, recipients: res2.data });
        } catch (error) {
            console.error("Error Gettign Transaction and its Recipient: ", error.message)
        }
    }


    console.log(transactionDetails, "transactionDetails")


    const fetchDocuments = async () => {
        try {
            const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents`)
            if (res?.status === 200) {
                let resDoc = res?.data
                setDocumentsData(resDoc)
            }

        } catch (error) {
            console.log(error)
        }
    }

    useEffect(() => {
        fetchData()
        fetchDocuments()
    }, [accountId, transactionId])


    const handleNavigateToSign = (id: number) => {
        signSessionRedirect(accountId, transactionId, id+"" as string)
    }

    const getStatusBadge = (status: string) => {
        const statusClasses = {
            'SENT': 'bg-blue-100 text-blue-800',
            'COMPLETED': 'bg-green-100 text-green-800',
            'FAILED': 'bg-red-100 text-red-800',
            'PENDING': 'bg-yellow-100 text-yellow-800',
            'VIEWED': 'bg-purple-100 text-purple-800',
            'REJECTED': 'bg-red-100 text-red-800'
        };
        return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
    };

    return (
        <>
            {transactionDetails &&
                <>
                    <div className='mt-2 grid grid-cols-1 lg:grid-cols-12 items-stretch max-w-90vw min-h-[88vh]  h-full bg-white rounded-lg  shadow-sm mx-3'>
                        <div className="lg:col-span-10 w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
                            {/* Header */}
                            <h1 className='text-lg font-semibold text-gray-800'>
                                Complete with Sign Made Easy: <span className='text-slate-600'>{transactionDetails?.transaction?.subject ?? "Untitled"}</span>
                            </h1>

                            <div className='mt-2'>
                                {/* new Date(transactionDetails?.transaction?.lastModifiedAt * 1000) */}
                                <p className='text-slate-600'>From <span className='text-blue-600'>{transactionDetails?.transaction.createdBy.firstName + " " + transactionDetails?.transaction.createdBy.lastName}</span></p>
                                <p className=''><span className='text-slate-600 font-semibold'>Last Change on</span> <span className='text-slate-400'>{(transactionDetails?.transaction?.lastModifiedAt)}</span></p>
                                <p className='text-slate-600'>Created at <span>{(transactionDetails?.transaction?.createdAt)}</span></p>
                            </div>

                            <p className='text-slate-600 text-[0.98rem] mt-2 font-semibold'>{transactionDetails?.transaction.status}</p>

                            {/* Buttons */}
                            <div className='my-2 flex gap-2'>
                                {/* <button
                                    type="button"
                                    aria-label="Sign the document"
                                    className='cursor-pointer border border-gray-300 rounded-sm px-4 py-1 bg-[var(--primary)] text-white'
                                >
                                    Sign
                                </button> */}
                                <button className='cursor-pointer border border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold'>
                                    More
                                </button>

                                {transactionDetails.transaction.status === "CREATED" && <Link className='cursor-pointer border  text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/process-step-one/${accountId}/${transactionId}`}>
                                    Edit
                                </Link>}

                                <button className='cursor-pointer border  text-[var(--primary)] border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' onClick={handleOpenAuditModal}>
                                    Audit
                                </button>



                            </div>

                            <hr className='my-6 border-slate-200' />

                            {/* Recipients Section */}
                            {transactionDetails.recipients.length > 0 &&
                                <div>
                                    <div className='flex justify-between items-center text-md'>
                                        <h2 className='text-lg font-semibold text-gray-800 cursor-pointer'>Signers</h2>
                                        <p className='font-bold flex items-center gap-1.5 text-slate-800 cursor-pointer' onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}>
                                            <LuGitGraph className='text-[0.9rem] text-[var(--primary)]' />
                                            Signing Graph
                                        </p>
                                    </div>

                                    {/* Recipients List */}
                                    {transactionDetails.recipients.map((recipient, index) => (
                                        <div key={index}>
                                            <div className="mt-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0 ">

                                                {/* Left section: recipient info */}
                                                <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
                                                    <div>
                                                        <p className="text-slate-600 font-semibold text-xs sm:xs">{recipient.name}</p>
                                                        <p className="text-slate-600 text-xs sm:text-xs">{recipient.email} | {recipient.type}</p>
                                                        {recipient.hostEmail && (
                                                            <p className="text-xs text-gray-500 italic">
                                                                <strong>Host:</strong> {recipient.hostEmail}
                                                            </p>
                                                        )}
                                                    </div>
                                                </div>

                                                {/* Right section: status and actions */}
                                                <div className="flex flex-col items-start sm:items-end gap-1 text-sm text-slate-600">
                                                    <div className="flex flex-wrap gap-3 items-center relative">
                                                        <div className="pl-6 relative">
                                                            <AiFillSignature className="absolute left-0 top-0 text-[1rem]" />
                                                            <p className={`text-black text-xs font-semibold rounded-lg px-2 py-0.5 ${getStatusBadge(recipient.status)}`}>{recipient.status}</p>
                                                        </div>

                                                        {transactionDetails.transaction.status === "SENT" && recipient.email === user.email && recipient.status !== "COMPLETED" && (
                                                            <button
                                                                onClick={() => handleNavigateToSign(recipient.id)}
                                                                className="text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold text-xs hover:bg-opacity-90 transition"
                                                            >
                                                                Sign
                                                            </button>
                                                        )}
                                                    </div>

                                                    {recipient.status !== "PENDING" && (
                                                        <p className="text-xs text-gray-500">on {recipient.completedAt}</p>
                                                    )}
                                                    {/* Optional signed document link */}
                                                    {/* {recipient.viewLink && (
          <a href={recipient.viewLink} className="text-blue-600 text-xs hover:underline">
            View signed location
          </a>
        )} */}
                                                </div>
                                            </div>

                                            <hr className="my-3 border-slate-200" />
                                        </div>
                                    ))}

                                </div>
                            }


                            {transactionDetails?.transaction?.subject !== "" &&
                                <div>
                                    <h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Subject</h2>
                                    <p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.subject ? transactionDetails?.transaction?.subject : "Not Found"} `}</p>
                                </div>}

                            {transactionDetails?.transaction?.message !== "" &&
                                <div>
                                    <h2 className='text-lg mt-4 font-semibold text-gray-800 cursor-pointer'>Message</h2>
                                    <p className='mt-2 text-slate-600'>{`${transactionDetails?.transaction?.message ? transactionDetails?.transaction?.message : "Not Found"} `}</p>
                                </div>}
                        </div>

                        <div className='lg:col-span-2 text-xs rounded-sm max-h-[88vh] overflow-y-auto no-scrollbar'>
                            {documentsData.map((docsD, index) => (
                                <div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}>
                                    <p>{docsD.name}</p>
                                    <div className='border-3 rounded-sm border-slate-300 relative text-xs'>
                                        {docsD?.thumbnail ? (
                                            <img
                                                style={{ width: "200px", height: "160px" }}
                                                src={`data:image/jpeg;base64,${docsD.thumbnail}`}  // Adjust MIME type if needed
                                                alt=""
                                                loading="lazy"
                                            />
                                        ) : (
                                            <FaFile className="h-35 w-20 mx-5 text-gray-300" />
                                        )}
                                        <div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
                                            <p className='text-[0.7rem] text-slate-500 flex justify-end items-center'>
                                                {/* <span> 1 of {docsD?.pages?.length}</span> */}
                                                
                                                    <IoMdDownload 
                                                    className='cursor-pointer'
                                                    onClick={() => downloadDocumentUtils(accountId, transactionId, docsD.id)}
                                                    size={18} />
                                                
                                            </p>

                                        </div>
                                    </div>
                                </div>
                            ))}

                        </div>

                    </div>

                    {signingOrderModal.open &&
                        <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center overflow-hidden">
                            <div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full ">
                                <div className="pb-2 text-white flex justify-between items-center bg-[var(--primary)] px-2 py-3 rounded-t-lg">
                                    <p className="font-semibold">Signing Order</p>
                                    <div
                                        onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}
                                        className="text-xl cursor-pointer hover:text-gray-200 transition-all">
                                        <IoCloseOutline />
                                    </div>
                                </div>
                                <span className='overflow-y-auto'>
                                    <SigningOrderDiagram signers={transactionDetails.recipients} />
                                </span>
                            </div>
                        </div>
                    }

                    {isModalOpen && <AuditModal closeModal={closeModal} />}
                </>
            }
        </>
    );
};

export default TransactionView;