'use client';

import { useState, useEffect, useCallback } from 'react';
import { collection, query, where, getDocs, orderBy, doc, updateDoc } from 'firebase/firestore';
import { db } from '@/lib/firebase';

interface ErrorReport {
  id: string;
  reporterId: string;
  reporterName: string;
  reason: string;
  memo: string;
  createdAt: string;
}

interface WikiDocument {
  id: string;
  title: string;
  status: string;
  errorReportCount: number;
}

const REASON_LABELS: Record<string, string> = {
  factual_error: '사실 오류',
  outdated_info: '정보 만료',
  missing_source: '출처 누락',
  inappropriate_content: '부적절한 내용',
};

export default function ErrorReportsPage() {
  const [documents, setDocuments] = useState<WikiDocument[]>([]);
  const [selectedDocId, setSelectedDocId] = useState<string | null>(null);
  const [reports, setReports] = useState<ErrorReport[]>([]);
  const [loading, setLoading] = useState(true);
  const [reportsLoading, setReportsLoading] = useState(false);

  // 승인된 문서 목록 로드
  useEffect(() => {
    const loadDocuments = async () => {
      setLoading(true);
      try {
        const q = query(
          collection(db, 'documents'),
          where('status', '==', 'approved'),
          where('sourceType', 'in', ['kakao_expert', 'kakao_community', 'dashboard_insight'])
        );
        const snapshot = await getDocs(q);
        const docs: WikiDocument[] = [];

        for (const docSnap of snapshot.docs) {
          const data = docSnap.data();
          // error_reports 서브컬렉션 카운트
          const errSnap = await getDocs(collection(db, 'documents', docSnap.id, 'error_reports'));
          docs.push({
            id: docSnap.id,
            title: data.title || docSnap.id,
            status: data.status || 'unknown',
            errorReportCount: errSnap.size,
          });
        }

        // 오류 신고가 있는 문서를 상단에 정렬
        docs.sort((a, b) => b.errorReportCount - a.errorReportCount);
        setDocuments(docs);
      } catch (err) {
        console.error('Failed to load documents:', err);
      } finally {
        setLoading(false);
      }
    };
    loadDocuments();
  }, []);

  // 선택된 문서의 오류 신고 로드
  const loadReports = useCallback(async (docId: string) => {
    setReportsLoading(true);
    try {
      const q = query(
        collection(db, 'documents', docId, 'error_reports'),
        orderBy('createdAt', 'desc')
      );
      const snapshot = await getDocs(q);
      const items: ErrorReport[] = snapshot.docs.map(d => {
        const data = d.data();
        return {
          id: d.id,
          reporterId: data.reporterId || '',
          reporterName: data.reporterName || 'Unknown',
          reason: data.reason || '',
          memo: data.memo || '',
          createdAt: data.createdAt?.toDate?.()?.toLocaleDateString('ko-KR') || '',
        };
      });
      setReports(items);
    } catch (err) {
      console.error('Failed to load reports:', err);
    } finally {
      setReportsLoading(false);
    }
  }, []);

  const handleSelectDoc = (docId: string) => {
    setSelectedDocId(docId);
    loadReports(docId);
  };

  // 재승인 처리
  const handleReapprove = async (docId: string) => {
    if (!confirm('이 문서를 재승인하시겠습니까?')) return;
    try {
      await updateDoc(doc(db, 'documents', docId), {
        status: 'approved',
        verificationStatus: 'expert_verified',
      });
      alert('재승인 완료');
    } catch (err) {
      alert('재승인 실패');
    }
  };

  // 아카이브(반려) 처리
  const handleArchive = async (docId: string) => {
    if (!confirm('이 문서를 반려(아카이브)하시겠습니까?')) return;
    try {
      await updateDoc(doc(db, 'documents', docId), {
        status: 'rejected',
        visibility: 'private',
      });
      alert('반려 처리 완료');
      // 목록에서 제거
      setDocuments(prev => prev.filter(d => d.id !== docId));
      if (selectedDocId === docId) {
        setSelectedDocId(null);
        setReports([]);
      }
    } catch (err) {
      alert('반려 처리 실패');
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">오류 신고 관리</h1>

      <div className="flex gap-6">
        {/* 문서 목록 */}
        <div className="w-1/3 bg-white rounded-xl border border-gray-200 overflow-hidden">
          <div className="px-4 py-3 bg-gray-50 border-b border-gray-200">
            <h2 className="font-bold text-sm text-gray-700">문서 목록</h2>
          </div>
          {loading ? (
            <div className="p-4 text-center text-gray-400">로딩 중...</div>
          ) : documents.length === 0 ? (
            <div className="p-4 text-center text-gray-400">문서가 없습니다</div>
          ) : (
            <div className="divide-y divide-gray-100 max-h-[70vh] overflow-y-auto">
              {documents.map(d => (
                <button
                  key={d.id}
                  onClick={() => handleSelectDoc(d.id)}
                  className={`w-full text-left px-4 py-3 hover:bg-blue-50 transition-colors ${
                    selectedDocId === d.id ? 'bg-blue-50 border-l-4 border-blue-500' : ''
                  }`}
                >
                  <p className="text-sm font-medium text-gray-900 truncate">{d.title}</p>
                  <div className="flex items-center gap-2 mt-1">
                    {d.errorReportCount > 0 && (
                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-red-100 text-red-700">
                        신고 {d.errorReportCount}건
                      </span>
                    )}
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>

        {/* 오류 신고 상세 */}
        <div className="flex-1 bg-white rounded-xl border border-gray-200 overflow-hidden">
          <div className="px-4 py-3 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
            <h2 className="font-bold text-sm text-gray-700">
              {selectedDocId ? '오류 신고 목록' : '문서를 선택하세요'}
            </h2>
            {selectedDocId && (
              <div className="flex gap-2">
                <button
                  onClick={() => handleReapprove(selectedDocId)}
                  className="px-3 py-1.5 bg-green-600 text-white text-xs font-bold rounded-lg hover:bg-green-700"
                >
                  재승인
                </button>
                <button
                  onClick={() => handleArchive(selectedDocId)}
                  className="px-3 py-1.5 bg-red-100 text-red-600 text-xs font-bold rounded-lg hover:bg-red-200"
                >
                  반려(아카이브)
                </button>
              </div>
            )}
          </div>
          {reportsLoading ? (
            <div className="p-4 text-center text-gray-400">로딩 중...</div>
          ) : !selectedDocId ? (
            <div className="p-8 text-center text-gray-400">왼쪽에서 문서를 선택하면 오류 신고를 확인할 수 있습니다</div>
          ) : reports.length === 0 ? (
            <div className="p-8 text-center text-gray-400">오류 신고가 없습니다</div>
          ) : (
            <div className="divide-y divide-gray-100 max-h-[70vh] overflow-y-auto">
              {reports.map(r => (
                <div key={r.id} className="px-4 py-3">
                  <div className="flex items-center gap-2 mb-1">
                    <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold bg-orange-100 text-orange-700">
                      {REASON_LABELS[r.reason] || r.reason}
                    </span>
                    <span className="text-xs text-gray-400">{r.reporterName}</span>
                    <span className="text-xs text-gray-300">{r.createdAt}</span>
                  </div>
                  {r.memo && (
                    <p className="text-sm text-gray-600 mt-1">{r.memo}</p>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}