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

export const StudentView = () => {
  const {
    handUp,
    sendQuestion,
    classStatus,
    isJoinedClass
  } = useClassroomContext();
  const [questionText, setQuestionText] = useState('');

  const handleSendQuestion = () => {
    if (questionText.trim()) {
      sendQuestion(questionText);
      setQuestionText('');
    }
  };

  return (
    <div className="space-y-4">
      {isJoinedClass && (
        <div className="mt-4 p-4 bg-white rounded-md shadow">
          <h4 className="text-lg font-medium mb-2">互动功能</h4>
          <div className="space-y-3">
            <button
              type="button"
              className="w-full px-3 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 disabled:bg-gray-400"
              onClick={() => handUp()}
              disabled={classStatus !== ClassStatus.IN_PROGRESS}
            >
              {classStatus === ClassStatus.IN_PROGRESS ? '举手' : '课堂未开始'}
            </button>
            <div className="flex space-x-2">
              <input
                type="text"
                placeholder="输入问题..."
                className="flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                value={questionText}
                onChange={(e) => setQuestionText(e.target.value)}
                onKeyPress={(e) => e.key === 'Enter' && handleSendQuestion()}
              />
              <button
                type="button"
                className="px-3 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-gray-400"
                onClick={handleSendQuestion}
                disabled={!questionText.trim() || classStatus !== ClassStatus.IN_PROGRESS}
              >
                提问
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};