'use client';

import { useReviewPermission } from '@/hooks/useReviewPermission';
import { useDocumentReviewListener } from '@/hooks/useDocumentReviewListener';
import ReviewActions from '@/components/review/ReviewActions';
import type { DocumentStatus, ReviewDecision } from '@/types/firestore';

interface InlineReviewPanelProps {
    docId: string;
}

const STATUS_CONFIG: Record<string, { label: string; className: string }> = {
    draft: { label: '초안', className: 'bg-gray-100 text-gray-600' },
    in_review: { label: '검토중', className: 'bg-blue-100 text-blue-700' },
    approved: { label: '승인됨', className: 'bg-green-100 text-green-700' },
    rejected: { label: '거절됨', className: 'bg-red-100 text-red-700' },
    revision_requested: { label: '수정요청', className: 'bg-orange-100 text-orange-700' },
    needs_re_review: { label: '재검토', className: 'bg-yellow-100 text-yellow-700' },
    published: { label: '발행됨', className: 'bg-indigo-100 text-indigo-700' },
};

const DECISION_LABEL: Record<ReviewDecision, string> = {
    approve: '승인',
    reject: '거절',
    request_revision: '수정요청',
};

function StatusBadge({ status }: { status: DocumentStatus | null }) {
    if (!status) return null;
    const config = STATUS_CONFIG[status] ?? { label: status, className: 'bg-gray-100 text-gray-500' };
    return (
        <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-bold ${config.className}`}>
            {config.label}
        </span>
    );
}

export default function InlineReviewPanel({ docId }: InlineReviewPanelProps) {
    const { canReview } = useReviewPermission();
    const { status, reviews, loading } = useDocumentReviewListener(docId);

    if (!canReview) return null;
    if (!loading && status === 'published') return null;

    const latestReview = reviews[0] ?? null;

    return (
        <div className="border-t border-gray-200 mt-8 pt-6">
            <div className="space-y-4">
                {/* 상단: 현재 문서 상태 */}
                <div className="flex items-center gap-3">
                    <h3 className="text-sm font-bold text-gray-700">검토 상태</h3>
                    {loading ? (
                        <div className="h-5 w-16 bg-gray-100 rounded-full animate-pulse" />
                    ) : (
                        <StatusBadge status={status} />
                    )}
                </div>

                {/* 최근 리뷰 요약 */}
                {!loading && latestReview && (
                    <div className="bg-gray-50 rounded-2xl px-4 py-3 border border-gray-100">
                        <div className="flex items-center gap-2 mb-1.5">
                            <span className="text-xs font-medium text-gray-500">{latestReview.reviewerName}</span>
                            <span className={`text-xs font-medium px-2 py-0.5 rounded-full ${
                                latestReview.decision === 'approve'
                                    ? 'bg-green-100 text-green-700'
                                    : latestReview.decision === 'reject'
                                    ? 'bg-red-100 text-red-700'
                                    : 'bg-orange-100 text-orange-700'
                            }`}>
                                {DECISION_LABEL[latestReview.decision]}
                            </span>
                            {latestReview.createdAt && (
                                <span className="text-xs text-gray-400">
                                    · {latestReview.createdAt?.toDate?.()?.toLocaleString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false })}
                                </span>
                            )}
                        </div>
                        {latestReview.comment && (
                            <p className="text-xs text-gray-600 leading-relaxed line-clamp-3">
                                {latestReview.comment.slice(0, 100)}{latestReview.comment.length > 100 ? '...' : ''}
                            </p>
                        )}
                    </div>
                )}

                {/* 검토 액션 — published/approved 상태에서는 표시 안 함 */}
                {status && status !== 'published' && status !== 'approved' && (
                    <ReviewActions docId={docId} />
                )}
            </div>
        </div>
    );
}