'use client';

import { useState } from 'react';
import { Sparkles } from 'lucide-react';
import { SummaryModal } from './SummaryModal';
import type { SummaryMessage } from './types';
import { Tooltip } from '@/components/ui/Tooltip';

interface SummaryButtonProps {
  conversationId: string;
  messages: SummaryMessage[];
  hasSummary?: boolean;
  existingSummary?: string | null;
  onSummaryGenerated?: (summary: string) => void;
  className?: string;
}

/**
 * 智能摘要触发按钮
 * 集成到对话头部
 */
export function SummaryButton({
  conversationId,
  messages,
  hasSummary = false,
  existingSummary,
  onSummaryGenerated,
  className = '',
}: SummaryButtonProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleClick = () => {
    setIsModalOpen(true);
  };

  const handleClose = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Tooltip content="智能摘要" position="bottom">
        <button
          type="button"
          onClick={handleClick}
          className={`relative p-2 rounded text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-secondary)] hover:text-[var(--color-primary)] transition-all duration-150 ${className}`}
          aria-label="生成智能摘要"
        >
          <Sparkles size={18} />

          {/* 已有摘要指示器 */}
          {hasSummary && (
            <span className="absolute top-1 right-1 w-2 h-2 bg-[var(--color-primary)] rounded-full border-2 border-[var(--color-bg-primary)] animate-pulse" />
          )}
        </button>
      </Tooltip>

      {/* 摘要 Modal */}
      <SummaryModal
        isOpen={isModalOpen}
        onClose={handleClose}
        conversationId={conversationId}
        messages={messages}
        existingSummary={existingSummary}
        onSummaryGenerated={onSummaryGenerated}
      />
    </>
  );
}