'use client';

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

interface Level2AccordionProps {
    summaries: InsuranceSummary[];
    productId: string;
}

export default function Level2Accordion({ summaries, productId }: Level2AccordionProps) {
    const [openIndex, setOpenIndex] = useState<number | null>(null);

    if (summaries.length === 0) {
        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">
                            이 상품의 섹션별 요약이 아직 생성되지 않았습니다.
                            Level 1 핵심 요약이 먼저 생성된 후, 섹션별 요약이 생성됩니다.
                        </p>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="space-y-2">
            {/* 섹션 개요 */}
            <div className="bg-slate-50 border border-slate-200 rounded-lg px-4 py-2 text-sm text-slate-600">
                총 <span className="font-semibold text-slate-800">{summaries.length}</span>개 섹션
            </div>

            {/* 아코디언 */}
            <div className="divide-y divide-slate-200 border border-slate-200 rounded-xl overflow-hidden">
                {summaries.map((summary, index) => {
                    const isOpen = openIndex === index;
                    
                    return (
                        <div key={summary.id || index} className="bg-white">
                            {/* 헤더 (클릭 가능) */}
                            <button
                                onClick={() => setOpenIndex(isOpen ? null : index)}
                                className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-slate-50 transition-colors"
                            >
                                <div className="flex items-center gap-3 min-w-0">
                                    <span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${
                                        isOpen ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-600'
                                    }`}>
                                        {index + 1}
                                    </span>
                                    <span className="font-medium text-slate-800 truncate">
                                        {summary.sectionTitle || `섹션 ${index + 1}`}
                                    </span>
                                    {summary.pageRange && (
                                        <span className="text-xs text-slate-400 flex-shrink-0">
                                            {summary.pageRange.start}-{summary.pageRange.end}p
                                        </span>
                                    )}
                                </div>
                                <svg
                                    className={`w-5 h-5 text-slate-400 transition-transform ${
                                        isOpen ? 'rotate-180' : ''
                                    }`}
                                    fill="none"
                                    viewBox="0 0 24 24"
                                    stroke="currentColor"
                                >
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                </svg>
                            </button>

                            {/* 내용 (펼쳐진 상태일 때만) */}
                            {isOpen && (
                                <div className="px-4 pb-4">
                                    <div className="pl-9 text-sm text-slate-700 leading-relaxed whitespace-pre-wrap">
                                        {summary.content}
                                    </div>
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>
        </div>
    );
}