import axios from 'axios';
import React, { ReactNode, useEffect } from 'react';
import { FiUpload, FiEdit, FiFolder, FiArrowRight } from 'react-icons/fi';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } 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';


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.',
        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 = (card: StartCard) => {
        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("/process-step-one");
    }

    // 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 py-3 w-full">
            <h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {cards.map((card, index) => (
                    <div
                        onClick={() => handleStartSectionClick(card)}
                        key={index}
                        className={`${card.bg} cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all h-full flex flex-col justify-between min-h-[220px]`}
                    >
                        {/* 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>
        </section>
    );
};

export default StartSection;