import { useState } from "react";
import ProjectsReadme from "../components/ProjectsReadme";

export default function Home() {
    const projectList = [
        {
            id: "site",
            name: "aramjonghu-site",
            url: "https://git.aramjonghu.nl/AramJonghu/aramjonghu-site/raw/branch/master/README.md",
        },
        {
            id: "game",
            name: "Game (Gameron the Lost Level)",
            url: "https://git.aramjonghu.nl/AramJonghu/gameron-the-lost-level/src/branch/master/README.md",
        },
        {
            id: "nvim",
            name: "Nvim Config",
            url: "https://git.aramjonghu.nl/AramJonghu/nvim/src/branch/main/README.md",
        },
    ];

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

    const [activeTab, setActiveTab] = useState("about");

    const sections = [
        {
            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>
                    <ProjectsReadme repoUrl={projectList[projIdx].url} />
                </>
            ),
        },
        {
            id: "systems",
            title: "Systems",
            content: <p>Systems content goes here.</p>,
        },
        {
            id: "about",
            title: "About",
            content: <p>About content goes here.</p>,
        },
    ];

    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>
                <p className="mt-4">
                    Software engineer building systems, services, and
                    experiments across a self-hosted environment.
                </p>
                <p className="mt-3">
                    This site acts as a hub for projects, infrastructure, and
                    personal tooling.
                </p>
                <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>
    );
}