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

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

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

  return (
    <div className="relative">
      <Button
        type="button"
        onClick={() => setShowPanel(!showPanel)}
        className="p-2 rounded-full bg-purple-500 text-white relative"
        title={`学生提问 (${questions.length})`}
        size="icon"
        variant="ghost"
      >
        <QuestionMarkCircleIcon 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">
          {questions.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">
                <QuestionMarkCircleIcon className="w-4 h-4 mr-2 text-purple-500" />
                学生提问 ({questions.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-3">
                {questions.map((question, index) => (
                  <div key={index} className="p-3 border rounded-lg bg-purple-50 text-sm">
                    <div className="flex items-center justify-between mb-2">
                      <span className="font-medium">{question.studentName}</span>
                      <span className="text-xs text-gray-500">
                        {new Date(question.timestamp).toLocaleTimeString()}
                      </span>
                    </div>
                    <p className="text-gray-700">{question.question}</p>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
};