import { getApplicants, getProgrammes } from "@/app/utils/app"
import { cookies } from 'next/headers';
import Link from "next/link";

// export const generateStaticParams = async () => {  ///  REMOVED THIS BECAUSE IT:S CAUSING ERROR IN HOSTING GENVIRONMENT FR NODE ITSELF
//     const programmes = await getProgrammes();

//     programmes.data.map(programme => {
//         console.log(programme.stream.toLowerCase())
//     });

//     return programmes.data.map(programme => ({ programme: programme.stream.toLowerCase() }));
// }

const fetchApplicants = async (stream) => {
    const applicants = await getApplicants(cookies().get('admin')?.value, stream);

    return applicants?.data
}


const page = async ({ params }) => {
    const { stream } = params
    console.log(stream)
    const applicants = await fetchApplicants(stream);

    return (
        <div>
            <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
                <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                    <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                        <tr>
                            <th scope="col" className="p-4">
                                <div className="flex items-center">
                                    <input id="checkbox-all-search" type="checkbox" className="w-4 h-4 text-orange-600 bg-gray-100 border-gray-300 rounded focus:ring-orange-500 dark:focus:ring-orange-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                                    <label htmlFor="checkbox-all-search" className="sr-only">checkbox</label>
                                </div>
                            </th>
                            <th scope="col" className="px-6 py-3">
                                Name
                            </th>
                            <th scope="col" className="px-6 py-3">
                                Jamb Registration
                            </th>
                            <th scope="col" className="px-6 py-3">
                                Status
                            </th>
                            <th scope="col" className="px-6 py-3">
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {applicants && applicants.length > 0 ? (
                            applicants.map(applicant => (
                                <tr key={applicant.id} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                    <td className="w-4 p-4">
                                        <div className="flex items-center">
                                            <input id={`checkbox-${applicant.id}`} type="checkbox" className="w-4 h-4 text-orange-600 bg-gray-100 border-gray-300 rounded focus:ring-orange-500 dark:focus:ring-orange-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
                                            <label htmlFor={`checkbox-${applicant.id}`} className="sr-only">checkbox</label>
                                        </div>
                                    </td>
                                    <th scope="row" className="flex items-center px-6 py-4 text-gray-900 whitespace-nowrap dark:text-white">
                                        <img className="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Pic" />
                                        <div className="ps-3">
                                            <div className="text-base font-semibold">{applicant.last_name} {applicant.first_name}</div>
                                            <div className="font-normal text-gray-500">{applicant.email}</div>
                                        </div>
                                    </th>
                                    <td className="px-6 py-4">
                                        {applicant.jamb_reg}
                                    </td>
                                    <td className="px-6 py-4">
                                        <div className="flex items-center">
                                            <div className="h-2.5 w-2.5 rounded-full bg-orange-500 me-2"></div> {applicant.status}
                                        </div>
                                    </td>
                                    <td className="px-6 py-4">
                                        <Link href={`/applications/${stream}/${applicant.id}`} className="font-medium text-orange-400 dark:text-orange-500 hover:underline cursor-pointer">View</Link>
                                    </td>
                                </tr>
                            ))
                        ) : (
                            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                                <td colSpan="5" className="px-6 py-10 text-center text-gray-500 dark:text-gray-400">
                                    No applicants found.
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>

            </div>

        </div>
    )
}

export default page