'use client';

/**
 * Task H: AnswerCard — 출처배지 + 판매중단배지 + 유튜브경고 + 피드백 버튼
 * Spec: docs/specs/260225-insuwiki-rag-spec-v2.md § 2, § 9, § 13
 *
 * 출처 배지 색상:
 *   약관 원문  → 파란색 (신뢰 1순위)
 *   소식지     → 초록색 (2순위)
 *   InsuWiki  → 보라색 (3순위)
 *   유튜브     → 빨간색 (4순위, 단독 인용 금지 경고)
 *
 * 신뢰도 배지:
 *   0.85+  → 초록
 *   0.70~  → 노랑
 *   미만    → 빨강
 */

import React, { useState } from 'react';
import FeedbackButtons from './FeedbackButtons';

type SourceType = 'policy' | 'newsletter' | 'wiki' | 'youtube';

interface Source {
    companyName: string;
    productName: string;
    pageNumber?: number;
    sourceType: SourceType;
    similarity?: number;
    conflictsWithPolicy?: boolean;
    channelName?: string;
    uploadDate?: string;
}

interface AnswerCardProps {
    answer: string;
    sources?: Source[];
    confidenceScore?: number;
    isSalesStopped?: boolean;
    /** @deprecated logId/onFeedback 대신 queryId를 사용하세요 */
    logId?: string;
    /** @deprecated logId/onFeedback 대신 queryId를 사용하세요 */
    onFeedback?: (logId: string, status: 'correct' | 'incorrect' | 'incomplete') => Promise<void>;
    queryId?: string;
    query?: string;
    /** CL-7: 과거 약관 버전 조회 정보 */
    versionContext?: {
        targetDate: string;
        isHistorical: boolean;
        disclaimer: string;
    };
    /** CL-7: 현행 약관과 내용이 다른지 여부 */
    isCurrentDifferent?: boolean;
}

// ── 특약 키워드 목록 ─────────────────────────────────────────────────
const RIDER_KEYWORDS = ['선택특약', '추가특약', '특별약관', '선택담보'];

// 답변 텍스트에서 특약 키워드 하이라이트
function highlightRiderKeywords(text: string): React.ReactNode {
    if (!RIDER_KEYWORDS.some(k => text.includes(k))) return text;
    const regex = new RegExp(`(${RIDER_KEYWORDS.join('|')})`, 'g');
    const parts = text.split(regex);
    return parts.map((part, i) =>
        RIDER_KEYWORDS.includes(part)
            ? <span key={i} className="text-amber-700 font-medium">{part}<span className="inline-block ml-0.5 text-[10px]" title="가입 여부를 보험증권에서 확인하세요">⚠️</span></span>
            : part
    );
}

// ── 출처 배지 색상/라벨 ───────────────────────────────────────────────
const SOURCE_BADGE: Record<SourceType, { bg: string; text: string; label: string }> = {
    policy:     { bg: 'bg-blue-100',   text: 'text-blue-700',   label: '📄 약관' },
    newsletter: { bg: 'bg-green-100',  text: 'text-green-700',  label: '📰 소식지' },
    wiki:       { bg: 'bg-purple-100', text: 'text-purple-700', label: '📝 위키' },
    youtube:    { bg: 'bg-red-100',    text: 'text-red-700',    label: '▶ 유튜브' },
};

// ── 신뢰도 배지 ──────────────────────────────────────────────────────
function ConfidenceBadge({ score }: { score: number }) {
    const pct = Math.round(score * 100);
    const color = score >= 0.85 ? 'bg-green-100 text-green-700'
                : score >= 0.70 ? 'bg-yellow-100 text-yellow-700'
                : 'bg-red-100 text-red-700';
    return (
        <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium ${color}`}>
            신뢰도 {pct}%
        </span>
    );
}

export default function AnswerCard({
    answer,
    sources = [],
    confidenceScore,
    isSalesStopped = false,
    logId,
    onFeedback,
    queryId,
    query,
    versionContext,
    isCurrentDifferent,
}: AnswerCardProps) {
    const [feedbackSent, setFeedbackSent] = useState<string | null>(null);
    const [submitting, setSubmitting] = useState(false);

    const hasYoutubeConflict = sources.some(s => s.sourceType === 'youtube' && s.conflictsWithPolicy);
    const hasRiderKeyword = RIDER_KEYWORDS.some(k => answer.includes(k));

    async function handleFeedback(status: 'correct' | 'incorrect' | 'incomplete') {
        if (!logId || !onFeedback || submitting) return;
        setSubmitting(true);
        await onFeedback(logId, status);
        setFeedbackSent(status);
        setSubmitting(false);
    }

    return (
        <div className={`rounded-2xl border border-gray-200 bg-white shadow-sm overflow-hidden ${versionContext?.isHistorical ? 'border-l-4 border-l-amber-400' : ''}`}>
            {/* ── 판매 중단 배지 ──────────────────────────────────────── */}
            {isSalesStopped && (
                <div className="flex items-center gap-2 px-4 py-2 bg-gray-100 border-b border-gray-200">
                    <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-gray-300 text-gray-700 text-xs font-semibold">
                        🔖 판매 종료 상품
                    </span>
                    <span className="text-xs text-gray-500">조회는 계속 가능합니다</span>
                </div>
            )}

            {/* ── CL-7: 과거 약관 버전 표시 배너 ──────────────────────────── */}
            {versionContext?.isHistorical && (
                <div className="flex items-start gap-2 px-4 py-3 bg-amber-50 border-b border-amber-200">
                    <span className="text-base mt-0.5">📋</span>
                    <div className="flex-1">
                        <div className="text-xs text-amber-700">
                            <strong>이 정보는 {versionContext.targetDate} 기준 약관입니다</strong>
                        </div>
                        <div className="text-xs text-amber-600 mt-0.5">
                            현행 약관과 다를 수 있습니다
                        </div>
                    </div>
                </div>
            )}

            {/* ── 유튜브 ↔ 약관 상충 경고 배너 ───────────────────────── */}
            {hasYoutubeConflict && (
                <div className="flex items-start gap-2 px-4 py-3 bg-red-50 border-b border-red-200">
                    <span className="text-base mt-0.5">⚠️</span>
                    <div className="text-xs text-red-700">
                        <strong>주의:</strong> 유튜브 영상 내용과 약관 원문이 다릅니다.
                        약관 원문 기준이 정확한 내용입니다.
                    </div>
                </div>
            )}

            {/* ── 특약 가입 확인 경고 배너 ───────────────────────── */}
            {hasRiderKeyword && (
                <div className="flex items-start gap-2 px-4 py-3 bg-amber-50 border-b border-amber-200">
                    <span className="text-base mt-0.5">⚠️</span>
                    <div className="text-xs text-amber-700">
                        <strong>안내:</strong> 선택특약은 가입 여부에 따라 보장이 달라집니다. 보험증권을 확인하세요.
                    </div>
                </div>
            )}

            {/* ── 답변 본문 ───────────────────────────────────────────── */}
            <div className="px-5 py-4">
                <div className="text-sm text-gray-800 leading-relaxed whitespace-pre-wrap">
                    {highlightRiderKeywords(answer)}
                </div>
            </div>

            {/* ── 출처 배지 목록 ──────────────────────────────────────── */}
            {sources.length > 0 && (
                <div className="px-5 pb-3 flex flex-wrap gap-2">
                    {sources.map((src, i) => {
                        const badge = SOURCE_BADGE[src.sourceType] || SOURCE_BADGE.wiki;
                        return (
                            <span
                                key={i}
                                className={`inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium ${badge.bg} ${badge.text}`}
                                title={src.conflictsWithPolicy ? '약관 원문과 상충하는 내용이 있습니다' : ''}
                            >
                                {badge.label}
                                <span className="font-normal opacity-80">
                                    {src.companyName} · {src.productName}
                                    {src.pageNumber ? ` ${src.pageNumber}p` : ''}
                                </span>
                                {src.conflictsWithPolicy && (
                                    <span className="ml-0.5 text-red-500">⚠</span>
                                )}
                            </span>
                        );
                    })}

                    {/* CL-7: 차등 경고 배지 (현행과 내용이 다를 때) */}
                    {isCurrentDifferent && (
                        <span className="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-700">
                            🔄 현행 변경됨
                        </span>
                    )}

                    {/* 신뢰도 배지 */}
                    {confidenceScore !== undefined && (
                        <ConfidenceBadge score={confidenceScore} />
                    )}
                </div>
            )}

            {/* ── CL-7 피드백 버튼 ──────────────────────────────────────── */}
            {queryId && (
                <div className="px-5 pb-4 pt-2 border-t border-gray-100">
                    <FeedbackButtons queryId={queryId} query={query || ''} answer={answer} />
                </div>
            )}

            {/* ── 레거시 피드백 버튼 (logId/onFeedback, deprecated) ──────── */}
            {!queryId && logId && onFeedback && (
                <div className="px-5 pb-4 pt-2 border-t border-gray-100">
                    {feedbackSent ? (
                        <p className="text-xs text-gray-400">
                            피드백 감사합니다! ({feedbackSent === 'correct' ? '정확해요' : feedbackSent === 'incorrect' ? '틀렸어요' : '불완전해요'})
                        </p>
                    ) : (
                        <div className="flex items-center gap-2">
                            <span className="text-xs text-gray-400 mr-1">이 답변이 도움이 됐나요?</span>
                            {[
                                { status: 'correct'    as const, label: '맞아요',    cls: 'hover:bg-green-50 hover:border-green-400 hover:text-green-700' },
                                { status: 'incorrect'  as const, label: '틀렸어요',  cls: 'hover:bg-red-50 hover:border-red-400 hover:text-red-700' },
                                { status: 'incomplete' as const, label: '불완전해요', cls: 'hover:bg-yellow-50 hover:border-yellow-400 hover:text-yellow-700' },
                            ].map(({ status, label, cls }) => (
                                <button
                                    key={status}
                                    onClick={() => handleFeedback(status)}
                                    disabled={submitting}
                                    className={`px-3 py-1 rounded-lg border border-gray-200 text-xs text-gray-500 transition-all disabled:opacity-40 ${cls}`}
                                >
                                    {label}
                                </button>
                            ))}
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}