"use client";
import React, { useEffect, useState } from "react";

import DragAndDrop from "./_components/DragAndDrop";
import ProgressSteps from "./_components/ProgressSteps";
import Grid from "./_components/Grid";
import MessageBox from "./_components/MessageBox";
import Button from "@/_components/Button";
import { RowDataType } from "@/_types/Types";

export default function PageWrapper() {
    const [activeStep, setActiveStep] = useState<number>(0);
    const [rowData, setRowData] = useState<RowDataType[]>([
        {
            firstName: "John",
            lastName: "Doe",
            company: "XYZ Corp",
            phone: "18015555555",
            email: "J.Doe@web.com",
        },
        {
            firstName: "Jane",
            lastName: "Smith",
            company: "Acme Inc.",
            phone: "18012223333",
            email: "jane.smith@example.com",
        },
        {
            firstName: "Alice",
            lastName: "Johnson",
            company: "Globex Corp",
            phone: "18014445555",
            email: "alice.johnson@globex.com",
        },
        {
            firstName: "Bob",
            lastName: "Brown",
            company: "Initech",
            phone: "18019998888",
            email: "bob.brown@initech.com",
        },
        {
            firstName: "Eva",
            lastName: "Lopez",
            company: "Stark Industries",
            phone: "18017776666",
            email: "eva.lopez@stark.com",
        },
    ]);

    useEffect(() => {
        if (activeStep !== 2) return;
        const timer1 = setTimeout(() => setActiveStep(3), 6000);
        return () => {
            clearTimeout(timer1);
        };
    }, [activeStep]);

    return (
        <section className="h-full w-full my-20">
            <ProgressSteps activeStep={activeStep} />
            {activeStep === 0 && (
                <DragAndDrop onDataParsed={setRowData} setActiveStep={setActiveStep} />
            )}
            {activeStep === 1 && (
                <Grid rowData={rowData} setActiveStep={setActiveStep} />
            )}
            {activeStep === 2 && (
                <div className="max-w-lg mx-auto mt-6 space-y-4">
                    <MessageBox type="info" title="CSV uploaded successfully">
                        Your data is being processed. This might take a little while. Once
                        complete, we will notify you via email.
                    </MessageBox>
                </div>
            )}
            {activeStep === 3 && (
                <div className="max-w-lg mx-auto mt-6 space-y-4">
                    <MessageBox type="success" title="Data verified">
                        You&apos;re all set! You can now access all sessions and candidates.
                    </MessageBox>
                    <MessageBox type="error" title="Upload failed">
                        <p>Please check your file and try again.</p>
                        <ul className="ml-5 list-disc">
                            <li>Some candidates are not valid.</li>
                            <li>Some sessions are not available.</li>
                            <li>That center is not available.</li>
                        </ul>
                    </MessageBox>
                    <div className="m-auto text-center">
                    <Button
                        onClick={() => setActiveStep(0)}
                    >
                        Start again
                    </Button>
                    </div>
                </div>
            )}
        </section>
    );
}