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';


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 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)
    //     }
    // }, [])

    return (
        <section className="px-4 pt-2 pb-3 w-full">
            <h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>

            <div className="grid grid-cols-3 gap-4">

                <StartNow />

                <div className='col-span-1 grid grid-cols-1 justify-between gap-4'>
                    {cards.map((card, index) => (
                        <div
                            onClick={() => handleStartSectionClick(card.link)}
                            key={index}
                            className={`${card.bg} w-full max-h-max cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
                        >
                            {/* Icon + Text */}
                            <div className="flex flex-col gap-3">
                                <div className="w-9 h-9 flex items-center justify-center border border-gray-200 rounded-md bg-white">
                                    {card.icon}
                                </div>

                                <h3 className="text-base font-medium text-gray-900">{card.title}</h3>
                                <p className="text-sm text-gray-700">{card.description}</p>
                            </div>

                            {/* Bottom Area */}
                            <div className="flex items-center justify-between mt-2">
                                {card.buttonText ? (
                                    <button className="text-sm cursor-pointer font-medium text-white bg-gradient-to-r from-blue-600 to-blue-500 px-4 py-2 rounded-md shadow hover:opacity-90 transition">
                                        {card.buttonText}
                                    </button>
                                ) : (
                                    <div />
                                )}

                                <FiArrowRight className="w-4 h-4 text-gray-500" />
                            </div>
                        </div>
                    ))}
                </div>

            </div>

            <section className='pt-2 pb-3'>
                <h2 className="mt-3 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2>
                <section>
                    <TransactionDataTable />
                </section>
            </section>


        </section>
    );
};

export default StartSection;