import React from 'react';
import { useClassroomContext } from './ClassroomProvider.tsx';
import { ClassStatus } from './useClassroom.ts';

export const TeacherView = () => {
  const {
    startClass,
    endClass,
    muteStudent,
    kickStudent,
    handUpList,
    questions,
    classStatus
  } = useClassroomContext();

  return (
    <div className="space-y-4">

      <div className="flex space-x-2">
        <button
          onClick={startClass}
          disabled={classStatus === ClassStatus.IN_PROGRESS}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-400"
        >
          {classStatus === ClassStatus.IN_PROGRESS ? '课堂已开始' : '开始课堂'}
        </button>
        <button
          onClick={endClass}
          disabled={classStatus !== ClassStatus.IN_PROGRESS}
          className="px-4 py-2 bg-red-500 text-white rounded disabled:bg-gray-400"
        >
          结束课堂
        </button>
      </div>

      {handUpList.length > 0 && (
        <div className="bg-yellow-50 p-3 rounded">
          <h3 className="font-bold mb-2">举手列表</h3>
          <ul className="space-y-1">
            {handUpList.map((student, i) => (
              <li key={i} className="flex justify-between items-center">
                <span>{student.studentName || student.studentId}</span>
                <div className="space-x-2">
                  <button
                    onClick={() => muteStudent(student.studentId)}
                    className="text-xs px-2 py-1 bg-gray-200 rounded"
                  >
                    静音
                  </button>
                  <button
                    onClick={() => kickStudent(student.studentId)}
                    className="text-xs px-2 py-1 bg-red-200 rounded"
                  >
                    移出
                  </button>
                </div>
              </li>
            ))}
          </ul>
        </div>
      )}

      {questions.length > 0 && (
        <div className="bg-blue-50 p-3 rounded">
          <h3 className="font-bold mb-2">学生提问</h3>
          <ul className="space-y-2">
            {questions.map((q, i) => (
              <li key={i} className="border-b pb-2">
                <p className="font-medium">{q.studentName || q.studentId}: {q.question}</p>
                <p className="text-sm text-gray-600">
                  {new Date(q.timestamp).toLocaleTimeString()}
                </p>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};