import React, { useState } from 'react';
import { useClassroomContext } from './ClassroomProvider';
import { HandRaisedIcon, 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 StudentHandUpButton: React.FC = () => {
  const { handUp, classStatus } = useClassroomContext();
  const [showPanel, setShowPanel] = useState(false);
  const [questionText, setQuestionText] = useState('');

  const handleHandUp = async () => {
    await handUp(questionText || undefined);
    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-orange-500'} text-white`}
        title={classStatus === 'ended' ? '课堂已结束' : '举手提问'}
        size="icon"
        variant="ghost"
      >
        <HandRaisedIcon 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">
                <HandRaisedIcon className="w-4 h-4 mr-2 text-orange-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={handleHandUp}
                disabled={classStatus === 'ended'}
                variant={classStatus === 'ended' ? "secondary" : "default"}
                className="w-full bg-orange-500 text-white hover:bg-orange-600 text-sm"
              >
                举手提问
              </Button>
              
              <p className="text-xs text-gray-500">
                点击举手后，老师会收到通知并可以应答您的问题
              </p>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
};