app/src/pages/timetable/MyClassesPage.tsx

import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import { AccessTime, KeyboardArrowRight, MenuBook, People, School } from '@mui/icons-material';
import useTimetableStore from '../../stores/timetableStore';
import { useUser } from '../../contexts/UserContext';
import { useNeoInstitute } from '../../contexts/NeoInstituteContext';
import { CircularProgress } from '@mui/material';
import { logger } from '../../debugConfig';

const MyClassesSkeleton = () => (
  <div className="flex justify-center items-center h-64">
    <CircularProgress />
  </div>
);

const MyClassesPage: React.FC = () => {
  const { profile } = useUser();
  const { selectedInstituteId } = useNeoInstitute();
  const {
    myClasses,
    classesLoading: myClassesLoading,
    classesError: myClassesError,
    fetchMyClasses,
  } = useTimetableStore();

  useEffect(() => {
    fetchMyClasses().catch((error) =>
      logger.warn('my-classes', 'Fetch my classes failed', {
        message: error instanceof Error ? error.message : String(error),
      })
    );
  }, [fetchMyClasses, selectedInstituteId]);

  if (myClassesLoading) {
    return <MyClassesSkeleton />;
  }

  const getRoleLabel = (role: string) => {
    switch (role) {
      case 'teacher': return { text: 'Teacher', color: 'bg-purple-100 text-purple-700' };
      case 'student': return { text: 'Student', color: 'bg-green-100 text-green-700' };
      case 'assistant': return { text: 'Assistant', color: 'bg-blue-100 text-blue-700' };
      default: return { text: role, color: 'bg-gray-100 text-gray-700' };
    }
  };

  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'active': return { text: 'Active', color: 'bg-green-100 text-green-700' };
      case 'pending': return { text: 'Pending', color: 'bg-yellow-100 text-yellow-700' };
      case 'completed': return { text: 'Completed', color: 'bg-gray-100 text-gray-700' };
      case 'cancelled': return { text: 'Cancelled', color: 'bg-red-100 text-red-700' };
      default: return { text: status, color: 'bg-gray-100 text-gray-700' };
    }
  };

  if (myClassesError) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
          <p>Error loading your classes: {myClassesError}</p>
          <button
            onClick={() => fetchMyClasses()}
            className="mt-2 text-sm font-medium text-red-600 hover:text-red-800"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  // Separate classes by role
  const teachingClasses = myClasses.filter(c => c.role === 'teacher' || c.role === 'assistant');
  const enrolledClasses = myClasses.filter(c => c.role === 'student');

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900">My Classes</h1>
        <p className="mt-2 text-gray-600">
          Manage your enrolled classes and teaching assignments
        </p>
      </div>

      {/* Teaching Section */}
      {teachingClasses.length > 0 && (
        <div className="mb-8">
          <div className="flex items-center gap-2 mb-4">
            <School className="text-purple-600" size={24} />
            <h2 className="text-xl font-semibold text-gray-900">Teaching</h2>
            <span className="px-2 py-1 bg-purple-100 text-purple-700 text-sm font-medium rounded-full">
              {teachingClasses.length}
            </span>
          </div>
          
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {teachingClasses.map((classItem) => (
              <Link
                key={classItem.id}
                to={`/classes/${classItem.id}`}
                className="block bg-white rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200"
              >
                <div className="p-5">
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex-1 min-w-0">
                      <h3 className="text-lg font-semibold text-gray-900 truncate">
                        {classItem.name}
                      </h3>
                      {classItem.class_code && (
                        <p className="text-sm text-gray-500">{classItem.class_code}</p>
                      )}
                    </div>
                    <KeyboardArrowRight className="text-gray-400 flex-shrink-0 ml-2" size={20} />
                  </div>

                  <p className="text-gray-600 text-sm mb-4 line-clamp-2">
                    {classItem.description || 'No description'}
                  </p>

                  <div className="flex items-center gap-2 flex-wrap">
                    <span className={`px-2 py-1 text-xs font-medium rounded ${getRoleLabel(classItem.role).color}`}>
                      {getRoleLabel(classItem.role).text}
                    </span>
                    <span className={`px-2 py-1 text-xs font-medium rounded ${getStatusLabel(classItem.status).color}`}>
                      {getStatusLabel(classItem.status).text}
                    </span>
                  </div>

                  <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
                    <div className="flex items-center gap-1">
                      <People size={14} />
                      <span>{(classItem as any).enrolled_count || 0} students</span>
                    </div>
                    {classItem.academic_year && (
                      <div className="flex items-center gap-1">
                        <School size={14} />
                        <span>{classItem.academic_year}</span>
                      </div>
                    )}
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      )}

      {/* Enrolled Section */}
      {enrolledClasses.length > 0 && (
        <div className="mb-8">
          <div className="flex items-center gap-2 mb-4">
            <MenuBook className="text-green-600" size={24} />
            <h2 className="text-xl font-semibold text-gray-900">Enrolled</h2>
            <span className="px-2 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full">
              {enrolledClasses.length}
            </span>
          </div>
          
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {enrolledClasses.map((classItem) => (
              <Link
                key={classItem.id}
                to={`/classes/${classItem.id}`}
                className="block bg-white rounded-lg shadow hover:shadow-md transition-shadow border border-gray-200"
              >
                <div className="p-5">
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex-1 min-w-0">
                      <h3 className="text-lg font-semibold text-gray-900 truncate">
                        {classItem.name}
                      </h3>
                      {classItem.class_code && (
                        <p className="text-sm text-gray-500">{classItem.class_code}</p>
                      )}
                    </div>
                    <KeyboardArrowRight className="text-gray-400 flex-shrink-0 ml-2" size={20} />
                  </div>

                  <p className="text-gray-600 text-sm mb-4 line-clamp-2">
                    {classItem.description || 'No description'}
                  </p>

                  <div className="flex items-center gap-2 flex-wrap">
                    <span className={`px-2 py-1 text-xs font-medium rounded ${getStatusLabel(classItem.status).color}`}>
                      {getStatusLabel(classItem.status).text}
                    </span>
                  </div>

                  <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-4 text-sm text-gray-500">
                    <div className="flex items-center gap-1">
                      <School size={14} />
                      <span>
                        {(classItem as any).primary_teacher_name} {}
                      </span>
                    </div>
                    {classItem.academic_year && (
                      <div className="flex items-center gap-1">
                        <School size={14} />
                        <span>{classItem.academic_year}</span>
                      </div>
                    )}
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      )}

      {/* Empty State */}
      {myClasses.length === 0 && (
        <div className="text-center py-16">
          <MenuBook className="mx-auto h-12 w-12 text-gray-300" />
          <h3 className="mt-4 text-lg font-medium text-gray-900">No classes found</h3>
          <p className="mt-2 text-gray-500">
            You are not enrolled in or teaching any classes yet.
          </p>
          <Link
            to="/classes"
            className="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200"
          >
            Browse Available Classes
          </Link>
        </div>
      )}
    </div>
  );
};

export default MyClassesPage;