import React, { useMemo } from 'react';
import { usePermission } from '../../hooks/usePermission';
import { useUserStore } from '../../store/user/userStore';
import { getAttendanceExperience } from './attendance-workspace';
import { TeacherAttendanceWorkspace } from './teacher';
import { AdminAttendanceArchive } from './admin';
import './attendance.css';

function readCurrentRoles(): string[] {
  const roles = useUserStore.getState().user?.roles;
  return Array.isArray(roles) ? roles : [];
}

const AttendancePage: React.FC = () => {
  const { permissions, hasPermission } = usePermission();
  const roles = useMemo(readCurrentRoles, []);
  const experience = getAttendanceExperience(permissions, roles);

  if (experience === 'teacher') {
    return <TeacherAttendanceWorkspace canCreate={hasPermission('attendance:create')} />;
  }

  return <AdminAttendanceArchive canEdit={hasPermission('attendance:edit')} />;
};

export default AttendancePage;
