import { Button, Modal } from 'antd';
import { AppstoreOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';

interface QuizFooterProps {
  current: number;
  total: number;
  onPrev: () => void;
  onNext: () => void;
  onSubmit: () => void;
  onOpenSheet: () => void;
  answeredCount: number;
}

export const QuizFooter = ({ 
  current, 
  total, 
  onPrev, 
  onNext, 
  onSubmit, 
  onOpenSheet,
  answeredCount 
}: QuizFooterProps) => {
  const isFirst = current === 0;
  const isLast = current === total - 1;

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white/95 backdrop-blur-sm border-t border-gray-100 px-4 py-2 safe-area-bottom z-30 shadow-[0_-4px_20px_rgba(0,0,0,0.05)]">
      <div className="max-w-md mx-auto flex items-center justify-between relative h-12">
        <Button 
          type="text" 
          icon={<LeftOutlined />} 
          onClick={onPrev}
          disabled={isFirst}
          className={`flex items-center text-gray-600 hover:text-[#008C8C] hover:bg-transparent px-2 ${isFirst ? 'opacity-30' : ''}`}
        >
          上一题
        </Button>

        {/* Center Floating Action Button */}
        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -mt-4">
          <div 
            onClick={onOpenSheet}
            className="flex flex-col items-center justify-center bg-white rounded-2xl h-14 w-14 shadow-[0_4px_12px_rgba(0,140,140,0.2)] border border-[#E0F7FA] cursor-pointer active:scale-95 transition-all duration-200 group"
          >
            <AppstoreOutlined className="text-xl text-[#008C8C] mb-0.5 group-hover:scale-110 transition-transform" />
            <span className="text-[10px] font-medium text-gray-500 group-hover:text-[#008C8C]">
              {answeredCount}/{total}
            </span>
          </div>
        </div>

        {isLast ? (
          <Button 
            type="primary" 
            onClick={onSubmit}
            className="flex items-center bg-[#008C8C] hover:bg-[#00796B] text-white shadow-sm px-4 rounded-lg h-9"
          >
            提交 <RightOutlined className="text-xs" />
          </Button>
        ) : (
          <Button 
            type="text" 
            onClick={onNext}
            className="flex items-center text-gray-600 hover:text-[#008C8C] hover:bg-transparent px-2"
          >
            下一题 <RightOutlined />
          </Button>
        )}
      </div>
    </div>
  );
};
