import React, { useEffect, useState } from "react";
import DashboardNavBar from "./DashboardNavBar";
import { projectTutorialApi } from "../../services/dashboard/projectTutorialApi";
import { TutorialCard } from "./TutorialCard";
import { getUserData } from "../../functions/getUserData";
import { ALPHA_ORG } from "../../pages/Dashboard";

const DUMMY_DATA = [
    //remove later
    {
        _id: "1",
        name: "Robotic Arm Control",
        thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
        updatedAt: new Date().toISOString(),
    },
    {
        _id: "2",
        name: "Simulation Basics",
        thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
        updatedAt: new Date().toISOString(),
    },
    {
        _id: "3",
        name: "3D Visualization",
        thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
        updatedAt: new Date().toISOString(),
    },
];

const DashboardUseCases: React.FC = () => {
    const [useCases, setUseCases] = useState<Tutorial[]>(DUMMY_DATA || []); // default []
    const { organization } = getUserData();

    useEffect(() => {
        const fetchTutorials = async () => {
            try {
                const res = await projectTutorialApi();
                if (res && Array.isArray(res) && res.length > 0) {
                    setUseCases(res);
                }
            } catch (error) {
                console.error("Error fetching useCases:", error);
            }
        };

        fetchTutorials();
    }, []);

    return (
        <div className="dashboard-home-container">
            <DashboardNavBar page="tutorial" />
            <div className="dashboard-container" style={{ height: "calc(100% - 87px)" }}>
                <div className="tutorials-list">
                    {organization === ALPHA_ORG && (
                        <div className="tutorials-main-header">
                            <div className="tutorial-buttons-container">
                                <button className="add-tutorials-button">
                                    <span>+</span>
                                </button>
                            </div>
                        </div>
                    )}
                    {useCases.length > 0 ? (
                        useCases.map((tut) => <TutorialCard key={tut._id} tutorial={tut} />)
                    ) : (
                        <div className="empty-state">
                            No Use Cases available click on '+' button to add
                        </div>
                    )}
                </div>
            </div>
        </div>
    );
};

export default DashboardUseCases;
