import { getAssignedCourses, getCourses, getProgrammes } from "@/app/utils/app"
import { cookies } from 'next/headers';
import Link from "next/link";
import jwt from 'jsonwebtoken'
// import jwtDecode from 'jwt-decode'

export const dynamic = 'force-dynamic'

export const generateStaticParams = async () => {
    const programmes = await getProgrammes();

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

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

const fetchCourses = async (stream) => {
    const courses = await getCourses(cookies().get('admin')?.value, stream);

    return courses?.data
}

const fetchAssignedCourses = async (stream) => {
    const assigned_courses = await getAssignedCourses(cookies().get('admin')?.value, stream);

    return assigned_courses?.data;
}

const page = async ({ params }) => {
    const { stream } = params
    // console.log(stream)
    const courses = await fetchCourses(stream);
    const assigned_courses = await fetchAssignedCourses(stream);

    // const role = cookies().get('admin_role').value
    // console.log(role)

    const { role } = jwt.decode(cookies().get('admin').value)
    // const { role } = jwtDecode(cookies().get('admin').value)
    console.log(role, 'RoLe')

    return (
        <div>
            {role !== 'Staff' && (
                <div>
                    <div className="flex justify-between items-center mb-3">
                        <h1 className="text-3xl font-bold dark:text-white">Available courses</h1>
                        <button className="p-3 bg-white text-black rounded-lg w-16">Add</button>
                    </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="px-6 py-3">
                                        Code
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Title
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Unit
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Type
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Level
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Semester
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        <span className="sr-only">View</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {courses?.map(course => (
                                    <tr key={course.id} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                            {course.code}
                                        </th>
                                        <td className="px-6 py-4">
                                            {course.title}
                                        </td>
                                        <td className="px-6 py-4">
                                            {course.unit}
                                        </td>
                                        <td className="px-6 py-4">
                                            {course.type}
                                        </td>
                                        <td className="px-6 py-4">
                                            {course.level}
                                        </td>
                                        <td className="px-6 py-4">
                                            {course.semester}
                                        </td>
                                        <td className="px-6 py-4">
                                            <Link href={`/courses/standard/${course.id}`} className="font-medium text-blue-600 dark:text-blue-500 hover:underline">View</Link>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>


                    </div>
                </div>

            )}

            {role === 'Staff' && (
                <div>
                    <h1 className="text-3xl font-bold dark:text-white mt-5 mb-5">Assigned courses</h1>

                    <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="px-6 py-3">
                                        Code
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Title
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Unit
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Type
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Level
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        Semester
                                    </th>
                                    <th scope="col" className="px-6 py-3">
                                        <span className="sr-only">View</span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {assigned_courses?.map(course => (
                                    <tr key={course.id} className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
                                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                            {course.code}
                                        </th>
                                        <td className="px-6 py-4">
                                            {course.title}
                                        </td>
                                        <td className="px-6 py-4">
                                            {course.unit}
                                        </td>
                                        <td className="px-6 py-4">
                                            {course.type}
                                        </td>
                                        <td className="px-6 py-4">
                                            {course.level}
                                        </td>
                                        <td className="px-6 py-4">
                                            {course.semester}
                                        </td>
                                        <td className="px-6 py-4">
                                            <Link href={`/courses/standard/${course.course_id}`} className="font-medium text-blue-600 dark:text-blue-500 hover:underline">View</Link>
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            )}
        </div>
    )
}

export default page