'use client';

import { useState } from 'react';
import dynamic from 'next/dynamic';
import { toast } from 'sonner';
import { useAuth } from '@/contexts/AuthContext';

const ReactMarkdown = dynamic(() => import('react-markdown'), { ssr: false });

interface SearchSummaryCardProps {
  query: string;
  results: { id: string; title: string; snippet?: string }[];
  onSelect: (docId: string) => void;
}

interface SummaryResponse {
  summary: string;
  sourceDocIds: string[];
}

export default function SearchSummaryCard({ query, results, onSelect }: SearchSummaryCardProps) {
  const { user } = useAuth();
  const [isLoading, setIsLoading] = useState(false);
  const [summaryData, setSummaryData] = useState<SummaryResponse | null>(null);
  const [isVisible, setIsVisible] = useState(false);

  // 결과 3개 미만이면 렌더링 안 함
  if (results.length < 3) return null;

  const handleGenerateSummary = async () => {
    if (isLoading) return;
    setIsVisible(true);

    if (summaryData) return; // 이미 생성된 경우 재사용

    setIsLoading(true);
    try {
      const headers: Record<string, string> = {
        'Content-Type': 'application/json',
      };

      if (user) {
        const token = await user.getIdToken();
        headers['Authorization'] = `Bearer ${token}`;
      }

      const res = await fetch('/api/ai/search-summary', {
        method: 'POST',
        headers,
        body: JSON.stringify({ query, results }),
      });

      if (!res.ok) throw new Error('종합 정리 생성 실패');

      const data: SummaryResponse = await res.json();
      setSummaryData(data);
    } catch (e) {
      toast.error('종합 정리 생성에 실패했습니다.');
      setIsVisible(false);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="mt-3 px-2">
      {!isVisible ? (
        <button
          onClick={handleGenerateSummary}
          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold text-purple-600 bg-purple-50 hover:bg-purple-100 border border-purple-200 rounded-xl transition-colors"
        >
          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
          종합 정리 보기
        </button>
      ) : (
        <div className="bg-purple-50 rounded-2xl p-5 border border-purple-100">
          <div className="flex items-center justify-between mb-3">
            <div className="flex items-center gap-2">
              <div className="w-5 h-5 bg-purple-600 rounded-full flex items-center justify-center">
                <svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                </svg>
              </div>
              <span className="text-sm font-bold text-purple-800">AI 종합 정리</span>
            </div>
            <button
              onClick={() => setIsVisible(false)}
              className="text-purple-400 hover:text-purple-600 p-1 rounded-full hover:bg-purple-100 transition-colors"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          {isLoading ? (
            <div className="flex items-center gap-2 py-4">
              <div className="w-5 h-5 border-2 border-purple-400 border-t-transparent rounded-full animate-spin shrink-0" />
              <span className="text-sm text-purple-600">종합 정리 생성 중...</span>
            </div>
          ) : summaryData ? (
            <>
              {/* 마크다운 렌더링 */}
              <div className="prose prose-sm prose-purple max-w-none text-gray-700 mb-4">
                <ReactMarkdown>{summaryData.summary}</ReactMarkdown>
              </div>

              {/* 출처 링크 */}
              {summaryData.sourceDocIds && summaryData.sourceDocIds.length > 0 && (
                <div className="border-t border-purple-200 pt-3 mt-3">
                  <p className="text-xs font-bold text-purple-600 mb-2">참고 문서</p>
                  <div className="flex flex-wrap gap-2">
                    {summaryData.sourceDocIds.map(docId => {
                      const result = results.find(r => r.id === docId);
                      return (
                        <button
                          key={docId}
                          onClick={() => onSelect(docId)}
                          className="text-xs text-purple-700 bg-purple-100 hover:bg-purple-200 px-2 py-1 rounded-lg transition-colors font-medium"
                        >
                          {result?.title || docId}
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* 면책 조항 */}
              <p className="text-[11px] text-purple-500 mt-3 leading-relaxed">
                ※ AI가 생성한 종합 정리입니다. 정확한 내용은 원문을 확인하세요.
              </p>
            </>
          ) : null}
        </div>
      )}
    </div>
  );
}