import { useState, type ReactElement } from "react";
import MdProcessor from "../components/MdProcessor";
import CurrentActivity from "../components/CurrentActivity";
import About from "../components/About";

interface ProjectInfo {
    id: string;
    name: string;
    url: string;
}

interface Section {
    id: string;
    title: string;
    content: ReactElement;
}

export default function Home(): ReactElement {
    const projectList: ProjectInfo[] = [
        {
            id: "site",
            name: "aramjonghu-site",
            url: "https://git.aramjonghu.dev/AramJonghu/aramjonghu-site/raw/branch/master/README.md",
        },
        {
            id: "maran freelance portfolio",
            name: "maran-site",
            url: "https://git.aramjonghu.dev/AramJonghu/maran-site/src/branch/main/README.md",
        },
        {
            id: "file-organizer",
            name: "file-organizer written in zig",
            url: "https://git.aramjonghu.dev/AramJonghu/file-organizer/src/branch/main/README.md",
        },
        {
            id: "nvim",
            name: "Nvim Config",
            url: "https://git.aramjonghu.dev/AramJonghu/nvim/src/branch/main/README.md",
        },
    ];

    const [projIdx, setProjIdx] = useState<number>(0);
    const prevProject = () =>
        setProjIdx((i) => (i - 1 + projectList.length) % projectList.length);
    const nextProject = () => setProjIdx((i) => (i + 1) % projectList.length);

    const [activeTab, setActiveTab] = useState<string>("projects");

    const sections: Section[] = [
        {
            id: "projects",
            title: "Projects",
            content: (
                <>
                    <h1 className="text-center m-6 text-3xl font-bold text-ctp-mauve">
                        Projects
                    </h1>
                    <div className="flex justify-center mb-6">
                        <button
                            onClick={prevProject}
                            className="px-3 py-1 rounded ui-btn text-ctp-text"
                        >
                            ◀︎ Prev
                        </button>
                        <span className="self-center mx-6 font-medium">
                            {projectList[projIdx].name} ({projIdx + 1}/
                            {projectList.length})
                        </span>
                        <button
                            onClick={nextProject}
                            className="px-3 py-1 rounded ui-btn text-ctp-text"
                        >
                            Next ▶︎
                        </button>
                    </div>
                    <MdProcessor repoUrl={projectList[projIdx].url} />
                </>
            ),
        },
        {
            id: "current-activity",
            title: "Current-activity",
            content: (
                <>
                    <CurrentActivity />
                </>
            ),
        },
        {
            id: "about",
            title: "About",
            content: (
                <>
                    <About />
                </>
            ),
        },
    ];

    return (
        <div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
            <div className="w-full max-w-6xl text-center">
                <h1 className="text-4xl font-bold text-ctp-mauve">
                    AramJonghu
                </h1>
                <div className="mt-10 border rounded p-4">
                    <div className="flex flex-wrap justify-center gap-12 mb-6">
                        {sections.map((section) => (
                            <button
                                key={section.id}
                                onClick={() => setActiveTab(section.id)}
                                className={`ui-btn ${
                                    activeTab === section.id
                                        ? "ui-btn-active"
                                        : ""
                                }`}
                            >
                                {section.title}
                            </button>
                        ))}
                    </div>
                    <div className="mt-6 text-left relative min-h-20">
                        {sections.map((section) => (
                            <div
                                key={section.id}
                                className={`transition-all duration-300 ${
                                    activeTab === section.id
                                        ? "opacity-100 translate-y-0"
                                        : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
                                }`}
                            >
                                {section.content}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}