import { getACourse, getAssignedStaff } from '@/app/utils/app'
import { cookies } from 'next/headers';
import Result from '../../component/Result';
import CTA from '../../component/CTA';

const fetchCourse = async (token, stream, id) => {
    const course = await getACourse(token, stream, id);

    return course.data;
}

const getStaffInCharge = async (token, stream, id) => {
    const staff = await getAssignedStaff(token, stream, id);

    return staff.data || {}
}


const page = async ({ params }) => {
    const { stream, id } = params;
    // const course = await fetchCourse(cookies().get('admin').value, stream, id) || {}
    const course = await fetchCourse(cookies().get('admin').value, stream, id)

    const staff = await getStaffInCharge(cookies().get('admin').value, stream, id);

    return (
        <div className="container mx-auto p-4 text-black">
            <div className='flex justify-between'>
                <h1 className="text-3xl font-bold dark:text-white">{course.title}</h1>
                <CTA stream={stream} course_id={id} />
            </div>
            <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-gray-800 p-5 rounded-lg shadow">
                    <h2 className="text-xl font-semibold">D</h2>
                    <ul className="mt-4 space-y-2">
                        <li className='flex justify-between'><strong>Code:</strong> {course.code}</li>
                        <li className='flex justify-between'><strong>Unit:</strong> {course.unit}</li>
                        <li className='flex justify-between'><strong>Type:</strong> {course.type}</li>
                        <li className='flex justify-between'><strong>Level:</strong> {course.level}</li>
                        <li className='flex justify-between'><strong>Semester:</strong> {course.semester}</li>
                    </ul>
                </div>
                <div className="relative bg-white dark:bg-gray-800 p-5 rounded-lg shadow">
                    <h2 className="text-xl font-semibold">Course Description</h2>
                    <p className="mt-4 text-gray-700 dark:text-gray-300">
                        {course.description || "No description available."}
                    </p>
                    <div className='absolute bottom-0 right-2 italic text-sm text-orange-500'>
                        Staff-in-charge: {staff.name || 'Nil'}
                    </div>
                </div>
            </div>
            <div className="mt-6">
                <h2 className="text-xl font-semibold">Syllabus</h2>
                <div className="bg-white dark:bg-gray-800 p-5 rounded-lg shadow">
                    <p className="text-gray-700 dark:text-gray-300">
                        {/* Syllabus content or API call to fetch it */}
                        {course.syllabus || "Syllabus information is currently not available."}
                    </p>
                </div>
            </div>
            <div className="mt-6">
                <h2 className="text-xl font-semibold">Resources</h2>
                <div className="bg-white dark:bg-gray-800 p-5 rounded-lg shadow">
                    <ul>
                        {/* Assuming resources are links to documents or external websites */}
                        {course.resources?.map(resource => (
                            <li key={resource.id}>
                                <a href={resource.url} className="text-blue-500 hover:underline">{resource.name}</a>
                            </li>
                        ))}
                    </ul>
                </div>
            </div>
            <div className="mt-6">
                <h2 className="text-xl font-semibold">Results</h2>
                <div className="bg-white dark:bg-gray-800 p-5 rounded-lg shadow">
                    <Result course_id={id} stream={stream} />
                </div>
            </div>
        </div>
    );
}

export default page