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';

export const TeacherHandUpManagementButton: React.FC = () => {
  const { handUpList, answerHandUp } = useClassroomContext();
  const [showPanel, setShowPanel] = useState(false);

  const handleAnswerHandUp = (studentId: string, studentName: string) => {
    answerHandUp(studentId);
  };

  if (handUpList.length === 0) {
    return null;
  }

  return (
    <div className="relative">
      <Button
        type="button"
        onClick={() => setShowPanel(!showPanel)}
        className="p-2 rounded-full bg-orange-500 text-white relative"
        title={`举手请求 (${handUpList.length})`}
        size="icon"
        variant="ghost"
      >
        <HandRaisedIcon className="w-4 h-4" />
        <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">
          {handUpList.length}
        </span>
      </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" />
                举手请求 ({handUpList.length})
              </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 max-h-60 overflow-y-auto">
              <div className="space-y-2">
                {handUpList.map((request, index) => (
                  <div key={index} className="p-3 border rounded-lg bg-orange-50 text-sm">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium">{request.studentName || request.studentId}</span>
                      <span className="text-xs text-gray-500">
                        {new Date(request.timestamp).toLocaleTimeString()}
                      </span>
                    </div>
                    {request.question && (
                      <p className="text-gray-600 mb-2">问题：{request.question}</p>
                    )}
                    <Button
                      onClick={() => handleAnswerHandUp(request.studentId, request.studentName || request.studentId)}
                      variant="default"
                      size="sm"
                      className="text-sm bg-green-500 text-white hover:bg-green-600 w-full"
                    >
                      应答
                    </Button>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
};