const sqlResponse = await sql`
    SELECT * 
    FROM Profiles 
    WHERE ProfileID = ${params.profile};
`;

import { ProfileLayout } from "@/components/Layout";
import { useEffect, useState } from "react";
import { Button, Spinner } from "@nextui-org/react";
import Link from "next/link";
import {getUserData} from "@/app/[profile]/getprofile";

export default function Page({ params }) {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await getUserData(params.profile)
                setData(JSON.stringify(response[0]));
            } catch (error) {
                console.error('Error fetching data:', error);
            } finally {
                setIsLoading(false);
            }
        };

        fetchData();
    }, [params.profile]);

    useEffect(() => {
        const updateVisitedProfiles = () => {
            if (data) {
                const currentProfile = params.profile;
                const visitedProfiles = JSON.parse(localStorage.getItem('visitedProfiles') || '{}');

                if (!visitedProfiles[currentProfile]) {
                    fetch(`api/increaseViews?profileID=${currentProfile}`);
                    localStorage.setItem('visitedProfiles', JSON.stringify({
                        ...visitedProfiles,
                        [currentProfile]: true
                    }));
                }
            }
        };

        updateVisitedProfiles();
    }, [data, params.profile]);

    if (isLoading) {
        return (
            <div className="bg-[#0A0B0C] flex h-screen w-full items-center justify-center">
                <Spinner size="lg" className="scale-150" />
            </div>
        );
    }

    if (!data) {
        return (
            <div className="flex flex-col text-center items-center justify-center min-h-screen bg-gradient-to-br from-primary p-8">
                <p className="text-4xl text-white mb-8 font-bold">Page not found</p>
                <Button as={Link} href="/" color="primary" variant="faded">Go to Homepage</Button>
            </div>
        );
    }

    return <ProfileLayout Profile={data} />;
}