import { useRef, useCallback } from 'react';
import { useAdminGuard } from '@/hooks/useAdminGuard';
import { MFAGuard } from '@/components/auth/MFAGuard';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { ReportsQueue, ReportsQueueRef } from '@/components/moderation/ReportsQueue';
import { QueueSkeleton } from '@/components/moderation/QueueSkeleton';
import { useAdminSettings } from '@/hooks/useAdminSettings';
import { useModerationStats } from '@/hooks/useModerationStats';
import { useDocumentTitle } from '@/hooks/useDocumentTitle';

export default function AdminReports() {
  useDocumentTitle('Reports Queue - Admin');
  const { isLoading, isAuthorized, needsMFA } = useAdminGuard();
  const reportsQueueRef = useRef<ReportsQueueRef>(null);
  
  const { 
    getAdminPanelRefreshMode, 
    getAdminPanelPollInterval,
  } = useAdminSettings();
  
  const refreshMode = getAdminPanelRefreshMode();
  const pollInterval = getAdminPanelPollInterval();
  
  const { lastUpdated, refresh: refreshStats } = useModerationStats({
    enabled: isAuthorized,
    pollingEnabled: refreshMode === 'auto',
    pollingInterval: pollInterval,
  });

  const handleRefresh = useCallback(() => {
    reportsQueueRef.current?.refresh();
    refreshStats();
  }, [refreshStats]);

  if (isLoading) {
    return (
      <AdminLayout
        onRefresh={handleRefresh}
        refreshMode={refreshMode}
        pollInterval={pollInterval}
        lastUpdated={lastUpdated ?? undefined}
      >
        <div className="space-y-6">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
            <p className="text-muted-foreground mt-1">
              Review and resolve user-submitted reports
            </p>
          </div>

          <QueueSkeleton count={5} />
        </div>
      </AdminLayout>
    );
  }

  if (!isAuthorized) {
    return null;
  }

  return (
    <AdminLayout
      onRefresh={handleRefresh}
      refreshMode={refreshMode}
      pollInterval={pollInterval}
      lastUpdated={lastUpdated ?? undefined}
    >
      <MFAGuard>
        <div className="space-y-6">
          <div>
            <h1 className="text-2xl font-bold tracking-tight">User Reports</h1>
            <p className="text-muted-foreground mt-1">
              Review and resolve user-submitted reports
            </p>
          </div>

          <ReportsQueue ref={reportsQueueRef} />
        </div>
      </MFAGuard>
    </AdminLayout>
  );
}