'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { auth } from '@/lib/firebase';

interface StatsData {
    totalCount: number;
    byCategory: Record<string, number>;
    byStatus: Record<string, number>;
    byCompany: Array<{ name: string; count: number }>;
}

export default function TermsStatsClient() {
    const [stats, setStats] = useState<StatsData | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        async function fetchStats() {
            try {
                const token = await auth.currentUser?.getIdToken();
                const res = await fetch('/api/admin/insurance/terms', {
                    headers: { Authorization: `Bearer ${token}` }
                });
                if (!res.ok) throw new Error('Failed');
                const data = await res.json();
                const products = data.products || [];

                const byCategory: Record<string, number> = {};
                const byStatus: Record<string, number> = {};
                const companyMap: Record<string, number> = {};

                for (const p of products) {
                    const cat = p.metadata.category || 'unknown';
                    byCategory[cat] = (byCategory[cat] || 0) + 1;

                    const status = p.summaryJob?.status || 'no_job';
                    byStatus[status] = (byStatus[status] || 0) + 1;

                    const company = p.metadata.companyName || 'unknown';
                    companyMap[company] = (companyMap[company] || 0) + 1;
                }

                const byCompany = Object.entries(companyMap)
                    .map(([name, count]) => ({ name, count }))
                    .sort((a, b) => b.count - a.count);

                setStats({
                    totalCount: products.length,
                    byCategory,
                    byStatus,
                    byCompany,
                });
            } catch (e) {
                console.error(e);
            } finally {
                setLoading(false);
            }
        }
        fetchStats();
    }, []);

    const categoryLabels: Record<string, string> = {
        life: '생명보험', non_life: '손해보험', variable: '변액보험', unknown: '미분류',
    };
    const statusLabels: Record<string, string> = {
        pending: '대기', processing: '진행 중', complete: '완료', failed: '실패', no_job: '미등록',
    };
    const statusColors: Record<string, string> = {
        pending: 'bg-amber-500', processing: 'bg-blue-500', complete: 'bg-emerald-500', failed: 'bg-red-500', no_job: 'bg-slate-300',
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center h-64">
                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            </div>
        );
    }

    if (!stats) return <div className="text-red-500">통계 로드 실패</div>;

    const maxCompanyCount = Math.max(...stats.byCompany.map(c => c.count), 1);

    return (
        <div className="space-y-6">
            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-2xl font-bold text-slate-800">약관 통계</h1>
                    <p className="text-sm text-slate-500 mt-1">등록된 약관 현황 대시보드</p>
                </div>
                <Link href="/admin/terms" className="text-sm text-blue-600 hover:text-blue-800">
                    약관 목록으로
                </Link>
            </div>

            {/* Summary Cards */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div className="bg-white border border-slate-200 rounded-xl p-4">
                    <p className="text-xs text-slate-500 uppercase tracking-wide">총 약관</p>
                    <p className="text-3xl font-bold text-slate-800 mt-1">{stats.totalCount}</p>
                </div>
                {Object.entries(stats.byCategory).map(([key, count]) => (
                    <div key={key} className="bg-white border border-slate-200 rounded-xl p-4">
                        <p className="text-xs text-slate-500 uppercase tracking-wide">{categoryLabels[key] || key}</p>
                        <p className="text-3xl font-bold text-slate-800 mt-1">{count}</p>
                    </div>
                ))}
            </div>

            {/* Indexing Status */}
            <div className="bg-white border border-slate-200 rounded-xl p-6">
                <h2 className="text-lg font-semibold text-slate-800 mb-4">인덱싱 상태</h2>
                <div className="flex gap-4 flex-wrap">
                    {Object.entries(stats.byStatus).map(([key, count]) => (
                        <div key={key} className="flex items-center gap-2">
                            <div className={`w-3 h-3 rounded-full ${statusColors[key] || 'bg-slate-300'}`}></div>
                            <span className="text-sm text-slate-700">{statusLabels[key] || key}: <span className="font-semibold">{count}</span></span>
                        </div>
                    ))}
                </div>
            </div>

            {/* Company Distribution */}
            <div className="bg-white border border-slate-200 rounded-xl p-6">
                <h2 className="text-lg font-semibold text-slate-800 mb-4">회사별 약관 수</h2>
                <div className="space-y-2">
                    {stats.byCompany.slice(0, 20).map(c => (
                        <div key={c.name} className="flex items-center gap-3">
                            <span className="text-sm text-slate-700 w-32 truncate flex-shrink-0">{c.name}</span>
                            <div className="flex-1 bg-slate-100 rounded-full h-5 overflow-hidden">
                                <div
                                    className="bg-blue-500 h-full rounded-full transition-all"
                                    style={{ width: `${(c.count / maxCompanyCount) * 100}%` }}
                                ></div>
                            </div>
                            <span className="text-sm font-semibold text-slate-800 w-8 text-right">{c.count}</span>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}