'use client';

import { useState, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import GlobalHeader from '@/components/GlobalHeader';
import { useReviewPermission } from '@/hooks/useReviewPermission';
import { useReviewQueueListener } from '@/hooks/useReviewQueueListener';
import type { ReviewQueueItem } from '@/hooks/useReviewQueueListener';
import type { DocumentStatus } from '@/types/firestore';

type SortMode = 'updatedAt' | 'diffSize';

function StatusBadge({ status }: { status: DocumentStatus }) {
    const config: Record<string, { label: string; className: string }> = {
        draft: { label: '초안', className: 'bg-gray-100 text-gray-600' },
        pending: { label: '대기', className: 'bg-yellow-100 text-yellow-700' },
        in_review: { label: '검토중', className: 'bg-blue-100 text-blue-700' },
        needs_re_review: { label: '재검토', className: 'bg-orange-100 text-orange-700' },
    };
    const c = config[status] ?? { label: status, className: 'bg-gray-100 text-gray-500' };
    return (
        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold ${c.className}`}>
            {c.label}
        </span>
    );
}

function RiskBadge({ riskLevel }: { riskLevel?: 'low' | 'high' }) {
    if (!riskLevel) return null;
    return (
        <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold ${riskLevel === 'high' ? 'bg-red-100 text-red-700' : 'bg-green-100 text-green-600'}`}>
            {riskLevel === 'high' ? '고위험' : '저위험'}
        </span>
    );
}

function formatElapsedDays(updatedAt: { toDate: () => Date } | Date | null | undefined): number {
    if (!updatedAt) return 0;
    const date = typeof (updatedAt as { toDate?: () => Date }).toDate === 'function'
        ? (updatedAt as { toDate: () => Date }).toDate()
        : updatedAt as Date;
    const diffMs = Date.now() - date.getTime();
    return Math.floor(diffMs / (1000 * 60 * 60 * 24));
}

function formatUpdatedAt(updatedAt: { toDate: () => Date } | Date | null | undefined): string {
    if (!updatedAt) return '-';
    const date = typeof (updatedAt as { toDate?: () => Date }).toDate === 'function'
        ? (updatedAt as { toDate: () => Date }).toDate()
        : updatedAt as Date;
    return date.toLocaleDateString('ko-KR', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
}

export default function ReviewPage() {
    const router = useRouter();
    const { canViewReviewQueue } = useReviewPermission();
    const { items, loading, error, retry } = useReviewQueueListener(canViewReviewQueue);
    const [sortMode, setSortMode] = useState<SortMode>('updatedAt');
    const [expandedId, setExpandedId] = useState<string | null>(null);
    const [reviewingId, setReviewingId] = useState<string | null>(null);
    const [rejectTargetId, setRejectTargetId] = useState<string | null>(null);
    const [rejectComment, setRejectComment] = useState('');

    const handleReview = async (docId: string, decision: 'approve' | 'reject', comment?: string) => {
        if (reviewingId) return;
        setReviewingId(docId);
        try {
            const { auth } = await import('@/lib/firebase');
            const token = await auth.currentUser?.getIdToken();
            if (!token) {
                alert('로그인이 필요합니다.');
                return;
            }
            const res = await fetch(`/api/wiki/insights/${docId}/review`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`,
                },
                body: JSON.stringify({ decision, ...(comment ? { comment } : {}) }),
            });
            if (!res.ok) {
                const err = await res.json();
                alert(`검토 실패: ${err.error || '알 수 없는 오류'}`);
            }
        } catch (err) {
            alert('검토 중 오류가 발생했습니다.');
        } finally {
            setReviewingId(null);
            setRejectTargetId(null);
            setRejectComment('');
        }
    };

    const maxElapsedDays = useMemo(() => {
        if (!items.length) return 0;
        return Math.max(...items.map((item) => formatElapsedDays(item.updatedAt)));
    }, [items]);

    const sortedItems = useMemo(() => {
        const copy = [...items];
        if (sortMode === 'diffSize') {
            copy.sort((a, b) => b.title.length - a.title.length);
        } else {
            copy.sort((a, b) => {
                const aTime = typeof (a.updatedAt as { toDate?: () => Date }).toDate === 'function'
                    ? (a.updatedAt as { toDate: () => Date }).toDate().getTime()
                    : 0;
                const bTime = typeof (b.updatedAt as { toDate?: () => Date }).toDate === 'function'
                    ? (b.updatedAt as { toDate: () => Date }).toDate().getTime()
                    : 0;
                return bTime - aTime;
            });
        }
        return copy;
    }, [items, sortMode]);

    if (!canViewReviewQueue) {
        return (
            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
                <div className="text-center">
                    <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                    </div>
                    <p className="text-gray-600 font-bold text-lg">접근 권한이 없습니다</p>
                    <p className="text-gray-400 text-sm mt-1">검토 대기열에 접근하려면 reviewer 이상의 권한이 필요합니다.</p>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gray-50">
            <GlobalHeader variant="wiki" onTabChange={(tab) => router.push(`/?tab=${tab}`)} />
            <div className="max-w-4xl mx-auto px-4 py-8">
                {/* 헤더 */}
                <div className="mb-6">
                    <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center">
                            <button
                                onClick={() => router.back()}
                                className="text-gray-500 hover:text-gray-900 text-sm mr-3"
                            >
                                ← 이전으로
                            </button>
                            <h1 className="text-2xl font-bold text-gray-900">검토 대기열 (인슈위키 Insights)</h1>
                        </div>
                        <button
                            onClick={() => setSortMode(sortMode === 'updatedAt' ? 'diffSize' : 'updatedAt')}
                            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-sm font-bold transition-all ${
                                sortMode === 'diffSize'
                                    ? 'bg-indigo-600 text-white'
                                    : 'bg-white text-gray-600 border border-gray-200 hover:border-indigo-300 hover:text-indigo-600'
                            }`}
                        >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12" />
                            </svg>
                            {sortMode === 'diffSize' ? '제목 길이순' : '최신순'}
                        </button>
                    </div>

                    {/* 상태 요약 */}
                    {!loading && !error && (
                        <p className="text-sm text-gray-500 bg-white rounded-xl px-4 py-2.5 border border-gray-100 shadow-sm">
                            대기{' '}
                            <span className="font-bold text-indigo-600">{items.length}건</span>
                            {items.length > 0 && (
                                <>
                                    , 최고 경과{' '}
                                    <span className="font-bold text-orange-500">{maxElapsedDays}일</span>
                                </>
                            )}
                        </p>
                    )}
                </div>

                {/* 에러 */}
                {error && (
                    <div className="mb-4 bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-700">
                        <span className="font-bold">연결 오류:</span>{' '}
                        {error.message.toLowerCase().includes('index')
                            ? 'Firestore 인덱스가 준비 중입니다. 잠시 후 다시 시도해주세요.'
                            : error.message.toLowerCase().includes('permission')
                            ? '접근 권한이 없습니다.'
                            : '검토 대기열을 불러올 수 없습니다.'}
                        <button onClick={retry} className="text-red-700 underline hover:text-red-900 font-bold ml-2">새로고침</button>
                    </div>
                )}

                {/* 로딩 */}
                {loading && !error && (
                    <div className="flex justify-center py-16">
                        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-indigo-600" />
                    </div>
                )}

                {/* 빈 상태 */}
                {!loading && items.length === 0 && !error && (
                    <div className="text-center py-16 bg-white rounded-2xl border border-gray-100">
                        <div className="w-14 h-14 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-3">
                            <svg className="w-7 h-7 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <p className="text-gray-600 font-bold">검토 대기 항목이 없습니다</p>
                        <p className="text-gray-400 text-sm mt-1">모든 문서가 검토 완료되었습니다.</p>
                    </div>
                )}

                {/* 목록 */}
                {!loading && sortedItems.length > 0 && (
                    <div className="space-y-3">
                        {sortedItems.map((item: ReviewQueueItem) => (
                            <div
                                key={item.id}
                                className="w-full text-left bg-white rounded-2xl border border-gray-100 shadow-sm px-5 py-4 hover:border-indigo-200 hover:shadow-md transition-all group"
                            >
                                <div
                                    className="cursor-pointer"
                                    onClick={() => setExpandedId(expandedId === item.id ? null : item.id)}
                                >
                                    <div className="flex items-start justify-between gap-3">
                                        <div className="flex-1 min-w-0">
                                            <p className="font-bold text-gray-900 truncate group-hover:text-indigo-700 transition-colors">
                                                {item.title}
                                            </p>
                                            <p className="text-xs text-gray-400 mt-1">
                                                {item.expert && <span className="text-blue-500 font-medium">{item.expert}</span>}
                                                {item.expert && ' · '}
                                                {item.category && <span>{item.category}</span>}
                                                {item.category && ' · '}
                                                {item.authorName} · {item.sourceDate || formatUpdatedAt(item.updatedAt)}
                                            </p>
                                        </div>
                                        <div className="flex items-center gap-1.5 flex-shrink-0 mt-0.5">
                                            <StatusBadge status={item.status} />
                                            <RiskBadge riskLevel={item.riskLevel} />
                                        </div>
                                    </div>
                                </div>

                                {expandedId === item.id && (
                                    <div className="mt-3 pt-3 border-t border-gray-100">
                                        {item.question && (
                                            <div className="mb-2">
                                                <p className="text-xs font-bold text-gray-500 mb-1">질문</p>
                                                <p className="text-sm text-gray-700">{item.question}</p>
                                            </div>
                                        )}
                                        {item.answer && (
                                            <div className="mb-3">
                                                <p className="text-xs font-bold text-gray-500 mb-1">답변</p>
                                                <p className="text-sm text-gray-700 whitespace-pre-wrap">{item.answer}</p>
                                            </div>
                                        )}
                                        <div className="flex flex-col gap-2">
                                            <div className="flex items-center gap-2">
                                                <button
                                                    onClick={() => handleReview(item.id, 'approve')}
                                                    disabled={reviewingId === item.id}
                                                    className="px-4 py-2 bg-green-600 text-white text-sm font-bold rounded-xl hover:bg-green-700 transition-colors disabled:opacity-50"
                                                >
                                                    {reviewingId === item.id ? '처리 중...' : '✓ 승인'}
                                                </button>
                                                <button
                                                    onClick={() => setRejectTargetId(rejectTargetId === item.id ? null : item.id)}
                                                    disabled={reviewingId === item.id}
                                                    className="px-4 py-2 bg-red-100 text-red-600 text-sm font-bold rounded-xl hover:bg-red-200 transition-colors disabled:opacity-50"
                                                >
                                                    반려
                                                </button>
                                            </div>
                                            {rejectTargetId === item.id && (
                                                <div className="flex items-start gap-2 mt-1">
                                                    <textarea
                                                        value={rejectComment}
                                                        onChange={(e) => setRejectComment(e.target.value)}
                                                        placeholder="반려 사유를 입력하세요..."
                                                        className="flex-1 px-3 py-2 border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-red-300 resize-none"
                                                        rows={2}
                                                    />
                                                    <button
                                                        onClick={() => {
                                                            if (!rejectComment.trim()) {
                                                                alert('반려 사유를 입력해주세요.');
                                                                return;
                                                            }
                                                            handleReview(item.id, 'reject', rejectComment);
                                                        }}
                                                        disabled={reviewingId === item.id}
                                                        className="px-3 py-2 bg-red-600 text-white text-sm font-bold rounded-xl hover:bg-red-700 transition-colors disabled:opacity-50 whitespace-nowrap"
                                                    >
                                                        반려 확인
                                                    </button>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                )}
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
}