import axios from 'axios';
import React, { ReactNode, useEffect, useState } from 'react';
import { FiUpload, FiEdit, FiFolder, FiArrowRight } from 'react-icons/fi';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate, useParams } from 'react-router-dom';
import { AppDispatch, RootState } from '../../store/store';
import api from '../../config/api';
import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from '../../store/slices/transactionSlice';
import { Transaction, TransactionResponse } from '../transactions/Transactions';
import TransactionsTable from '../transactions/TransactionsTable';
import TransactionDataTable from '../accounts/TransactionDataTable';
import StartNow from './StartNow';
import TemplateTable from '../templates/TemplateTable';


export interface StartCard {
    icon: ReactNode;
    title: string;
    description: string;
    buttonText?: string;
    bg: string;
}

const cards = [
    // {
    //     icon: <FiUpload className="w-5 h-5 text-blue-700" />,
    //     title: 'Start a Workflow',
    //     description: 'Begin by uploading a document and tagging fields.',
    //     buttonText: 'Start Now',
    //     bg: 'bg-white/60',
    // },
    // {
    //     icon: <FiEdit className="w-5 h-5 text-green-700" />,
    //     title: 'Sign an Agreement',
    //     description: 'Upload a document you need to sign and place your signature.',
    //     bg: 'bg-white/60',
    // },
    {
        icon: <FiFolder className="w-5 h-5 text-purple-700" />,
        title: 'Use a Template',
        description: 'Pick from ready-made templates for common agreements.',
        link: "/templates",
        bg: 'bg-white/60',
    },
];

const StartSection = () => {
    const navigate = useNavigate();
    const dispatch = useDispatch<AppDispatch>()
    const [activeAccountId, setActiveAccountId] = useState<string | null>(
        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
    );

    const user = useSelector((state: RootState) => state.user);
    if (!user.account || user.account === null) {
        window.location.href = "/login";
        return;
    }

    const defaultAccountId = user.account.id;

    const handleStartSectionClick = (link: string) => {
        // if ("buttonText" in card && card.buttonText === "Start Now") {
        //     api.post(`/api/accounts/${defaultAccountId}/transactions`)
        //         .then(res => {
        //             if (res.status === 200 || res.status === 201) {
        //                 dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
        //                 dispatch(setTransactionId(res.data));
        //                 setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
        //             }
        //         })
        //         .catch(err => console.log(err))
        // }
        navigate(link);
    }

    // useEffect(() => {
    //     try {
    //         axios.get(`${import.meta.env.VITE_BASE_URI}/api/dashboard`, {"withCredentials": true, "ngrok-skip-browser-warning": "69420"}).then((res) => {
    //             console.log(res)
    //         })
    //     } catch (error) {
    //         console.log(error)
    //     }
    // }, [])



    // Listen for sessionStorage changes
    useEffect(() => {
        const handleStorageChange = (e: StorageEvent) => {
            if (e.key === 'activeAccountId') {
                const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
                setActiveAccountId(newActiveAccountId);
            }
        };

        // Listen for storage events (works for changes from other tabs)
        window.addEventListener('storage', handleStorageChange);

        // Custom event listener for same-tab changes
        const handleCustomStorageChange = (e: CustomEvent) => {
            if (e.detail.key === 'activeAccountId') {
                setActiveAccountId(e.detail.newValue);
            }
        };

        window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);

        return () => {
            window.removeEventListener('storage', handleStorageChange);
            window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
        };
    }, []);

    return (
        <section className="px-3 py-2 w-full mt-2">
            <h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
                Upload Document
            </h2>

            {/* Upload card */}
            <div className="w-full">
                <StartNow />
            </div>

            {/* Recent Data Section */}
            <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
                <section className="w-full">
                    <TransactionDataTable activeAccountId={activeAccountId}/>
                </section>
                <section className="w-full">
                    <TemplateTable />
                </section>
            </div>
        </section>

    );
};

export default StartSection;