import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux';
import { useLocation, useNavigate } from 'react-router-dom';
import logoRecord from '../../assets/record.svg';
import LoaderUi from '../../helper/LoaderUi';
import api from '../../config/api';
import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';

const TemplateTable = () => {
    const loaction = useLocation()

    const [loading, setLoading] = useState(false)
    const [templates, setTemplates] = useState([])
    const accountDetails = useSelector((state: any) => state.user.account);
    const accountId = accountDetails.id || "";
    const [showMenu, setShowMenu] = useState(null);

    const [activeAccountId, setActiveAccountId] = useState<string | null>(
        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
    );

    const navigate = useNavigate();

    const getAllTemplates = async () => {
        setLoading(true)
        try {
            let res = await api.get(`/api/accounts/${activeAccountId}/templates?sortBy=lastModifiedAt desc`)
            let templateData = res?.data
            setTemplates(templateData)
        } catch (error) {
            console.log(error)
        } finally {
            setLoading(false)
        }
    }

    useEffect(() => {
        if (activeAccountId) {
            getAllTemplates()
        }
    }, [activeAccountId])


    const formatDate = (timestamp: number) => {
        return new Date(timestamp * 1000).toLocaleString();
    };

    const handleUseClick = async (item: any) => {
        try {
            const payload = {
                name: item?.name ?? "",
                subject: item.subject,
                message: item.message,
                description: item.description,
                expireAfter: item.expireAfter,
                enableIdStamping: item.enableIdStamping,
                allowViewAudit: item.allowViewAudit,
                allowReassign: item.allowReassign,
                enableSignatureIdStamping: item.enableSignatureIdStamping,
                templateId: item.id,
            };
            let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
            console.log("handleUseClick", res.data)
            // /process-step-one/:accountId/:transactionId
            navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}?useTemplate=true`);
        } catch (error) {
            console.log(error)
        }
    }

    const handleEditClick = (templateId: string) => {
        setShowMenu(null);
        navigate(`/process-step-one/${accountId}/template/${templateId}`);
    }

    function formatTimestamp(isoString, options = { timeZone: 'local' }) {
        // Parse the ISO string to a Date object
        const date = new Date(isoString);

        if (isNaN(date)) {
            return 'Invalid date';
        }

        // Return formatted date string
        if (options.timeZone === 'UTC') {
            return date.toUTCString(); // e.g. "Mon, 04 Aug 2025 13:46:46 GMT"
        } else {
            return date.toLocaleString(); // e.g. "8/4/2025, 9:46:46 AM" (based on local time zone)
        }
    }
    return (
        <>
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                {/* Header */}
                {location.pathname !== '/templates' &&
                    <div className="flex justify-between items-center px-6 py-4 border-b border-gray-100">
                        <h2 className="text-sm font-semibold text-gray-800">Recent Template</h2>
                        <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
                    </div>}

                {/* Scrollable Table Container */}
                <div className={`overflow-auto no-scrollbar ${location.pathname === '/templates' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
                    <table className="w-full text-sm">
                        {/* Sticky Header */}
                        <thead className="bg-gray-50 sticky top-0 z-10">
                            <tr className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
                                <th className="px-6 py-4 text-left font-semibold">Name</th>
                                {location.pathname === '/templates' && (
                                    <>
                                        <th className="px-6 py-4 text-center font-semibold">Created</th>
                                        <th className="px-6 py-4 text-center font-semibold">Last Updated</th>
                                    </>
                                )}
                                <th className="px-6 py-4 text-center font-semibold">Use</th>
                                <th className="px-6 py-4 text-center font-semibold">Action</th>
                            </tr>
                        </thead>
                        {loading ? (
                            <tbody>
                                <tr>
                                    <td colSpan="6" className="relative h-100">
                                        <LoaderUi />
                                    </td>
                                </tr>
                            </tbody>
                        ) : templates.length > 0 ? (
                            <>
                                {/* Scrollable Body */}
                                <tbody className="bg-white divide-y divide-gray-100">
                                    {templates.map((item, index) => (
                                        <tr
                                            key={index}
                                            className="hover:bg-gray-50 transition-colors duration-150"
                                        >
                                            <td className="px-6 py-4 text-left">
                                                <div className="text-gray-800 font-medium truncate max-w-xs">
                                                    {item.name || 'Untitled'}
                                                </div>
                                            </td>

                                            {location.pathname === '/templates' && (
                                                <>
                                                    <td className="px-6 py-4 text-center">
                                                        <span className="text-gray-600 whitespace-nowrap">
                                                            {formatTimestamp(item.createdAt)}
                                                        </span>
                                                    </td>
                                                    <td className="px-6 py-4 text-center">
                                                        <span className="text-gray-600 whitespace-nowrap">
                                                            {formatTimestamp(item.lastModifiedAt)}
                                                        </span>
                                                    </td>
                                                </>
                                            )}

                                            <td className="px-6 py-4 text-center">
                                                <button
                                                    className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-xs transition-colors duration-150"
                                                    onClick={() => handleUseClick(item)}
                                                >
                                                    Use
                                                </button>
                                            </td>

                                            <td className="px-6 py-4 text-center">
                                                <div
                                                    className="relative inline-block"
                                                    tabIndex={0}
                                                    onBlur={(e) => {
                                                        if (!e.currentTarget.contains(e.relatedTarget)) {
                                                            setShowMenu(null);
                                                        }
                                                    }}
                                                >
                                                    <button
                                                        className="text-gray-400 hover:text-gray-600 transition-colors duration-150 p-1 rounded-md hover:bg-gray-100"
                                                        onClick={() =>
                                                            setShowMenu(showMenu === index ? null : index)
                                                        }
                                                    >
                                                        <PiDotsThreeOutlineVerticalFill className="text-lg" />
                                                    </button>

                                                    {showMenu === index && (
                                                        <div className="absolute -top-9 right-4 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px]">
                                                            <button
                                                                onMouseDown={() => handleEditClick(item.id)}
                                                                className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
                                                            >
                                                                Edit
                                                            </button>
                                                            <button
                                                                onMouseDown={() => {
                                                                    setShowMenu(null);
                                                                    console.log('Delete clicked', item);
                                                                }}
                                                                className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
                                                            >
                                                                Delete
                                                            </button>
                                                        </div>
                                                    )}
                                                </div>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </>
                        ) : (
                            <tbody>
                                <tr>
                                    <td colSpan="6" className="text-center py-10 text-gray-500">
                                        <div className="flex flex-col items-center justify-center">
                                            <img
                                                src={logoRecord}
                                                alt="Record Not Found"
                                                className="w-70 h-70 mb-4 opacity-70"
                                            />
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        )}
                    </table>
                </div>
            </div>
        </>
    )
}

export default TemplateTable