import React, { useState } from 'react';
import { useClassroomContext } from './ClassroomProvider';
import { QuestionMarkCircleIcon, XMarkIcon } from '@heroicons/react/24/outline';
import { Button } from '@/client/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Textarea } from '@/client/components/ui/textarea';

export const StudentQuestionButton: React.FC = () => {
  const { sendQuestion, classStatus } = useClassroomContext();
  const [showPanel, setShowPanel] = useState(false);
  const [questionText, setQuestionText] = useState('');

  const handleSendQuestion = async () => {
    if (!questionText.trim()) {
      return;
    }
    
    await sendQuestion(questionText);
    setQuestionText('');
    setShowPanel(false);
  };

  return (
    <div className="relative">
      <Button
        type="button"
        onClick={() => setShowPanel(!showPanel)}
        disabled={classStatus === 'ended'}
        className={`p-2 rounded-full ${classStatus === 'ended' ? 'bg-gray-500' : 'bg-purple-500'} text-white`}
        title={classStatus === 'ended' ? '课堂已结束' : '发送问题'}
        size="icon"
        variant="ghost"
      >
        <QuestionMarkCircleIcon className="w-4 h-4" />
      </Button>

      {showPanel && (
        <div className="absolute bottom-full right-0 mb-2 w-80 bg-white shadow-lg rounded-lg z-50">
          <Card className="border-0">
            <CardHeader className="p-3 flex flex-row items-center justify-between">
              <CardTitle className="text-sm flex items-center">
                <QuestionMarkCircleIcon className="w-4 h-4 mr-2 text-purple-500" />
                发送问题
              </CardTitle>
              <Button
                type="button"
                onClick={() => setShowPanel(false)}
                className="p-1 rounded-full"
                size="icon"
                variant="ghost"
              >
                <XMarkIcon className="w-4 h-4" />
              </Button>
            </CardHeader>
            <CardContent className="p-3 space-y-3">
              <Textarea
                value={questionText}
                onChange={(e) => setQuestionText(e.target.value)}
                placeholder="请输入您的问题..."
                className="w-full text-sm"
                rows={3}
              />
              
              <Button
                onClick={handleSendQuestion}
                disabled={classStatus === 'ended' || !questionText.trim()}
                variant={classStatus === 'ended' || !questionText.trim() ? "secondary" : "default"}
                className="w-full bg-purple-500 text-white hover:bg-purple-600 text-sm"
              >
                发送问题
              </Button>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
};