'use client';

import { InsuranceSummary } from '@/types/firestore';

interface Level1CardProps {
    summary: InsuranceSummary | null;
    productId: string;
}

export default function Level1Card({ summary, productId }: Level1CardProps) {
    if (!summary) {
        return (
            <div className="bg-amber-50 border border-amber-200 rounded-xl p-6">
                <div className="flex items-start gap-3">
                    <span className="text-2xl">⏳</span>
                    <div>
                        <h3 className="font-semibold text-amber-800 mb-1">요약 생성 중</h3>
                        <p className="text-sm text-amber-700">
                            이 상품의 핵심 요약이 아직 생성되지 않았습니다.
                            잠시 후 다시 확인해주세요.
                        </p>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="space-y-4">
            {/* 핵심 요약 카드 */}
            <div className="bg-gradient-to-br from-blue-50 to-purple-50 border border-blue-200 rounded-xl p-6">
                <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                        <span className="text-2xl">💡</span>
                    </div>
                    <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                            <h3 className="font-bold text-blue-900">핵심 요약</h3>
                            <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">
                                Level 1
                            </span>
                        </div>
                        <p className="text-slate-800 leading-relaxed whitespace-pre-wrap">
                            {summary.content}
                        </p>
                        {summary.pageRange && (
                            <p className="text-xs text-slate-500 mt-3">
                                참조: {summary.pageRange.start}-{summary.pageRange.end}p
                            </p>
                        )}
                    </div>
                </div>
            </div>

            {/* 메타 정보 */}
            <div className="bg-white border border-slate-200 rounded-xl p-4">
                <h4 className="text-sm font-semibold text-slate-700 mb-2">메타 정보</h4>
                <div className="grid grid-cols-2 gap-3 text-sm">
                    <div>
                        <span className="text-slate-500">상품 ID:</span>
                        <span className="ml-2 text-slate-800 font-mono text-xs">{productId}</span>
                    </div>
                    <div>
                        <span className="text-slate-500">생성일:</span>
                        <span className="ml-2 text-slate-800">
                            {summary.createdAt?.toDate?.()?.toLocaleDateString?.() || '-'}
                        </span>
                    </div>
                </div>
            </div>

            {/* 핵심 보장 요약 (별도 컴포넌트로 분리 가능) */}
            <div className="bg-white border border-slate-200 rounded-xl p-4">
                <h4 className="text-sm font-semibold text-slate-700 mb-3">🎯 이런 분들에게 추천</h4>
                <ul className="space-y-2 text-sm text-slate-700">
                    <li className="flex items-start gap-2">
                        <span className="text-emerald-500 mt-0.5">✓</span>
                        <span>구체적인 추천 대상은 Level 2 섹션별 요약에서 확인하세요</span>
                    </li>
                </ul>
            </div>
        </div>
    );
}