// React Frontend Components for Semi-Automatic Moderation System

import React, { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Loader2, CheckCircle, XCircle, AlertTriangle, Eye } from 'lucide-react';

// Types
interface ModqueueItem {
  id: string;
  fullname: string;
  type: 'submission' | 'comment';
  author: string;
  created_utc: number;
  subreddit: string;
  title?: string;
  selftext?: string;
  body?: string;
  url?: string;
  score: number;
  reports: string[];
  mod_reports: string[];
  num_reports: number;
  permalink: string;
}

interface AIAnalysis {
  violations_found: Array<{
    rule_name: string;
    explanation: string;
  }>;
  confidence_score: number;
  suggested_action: 'approve' | 'remove' | 'spam' | 'manual_review';
  reasoning: string;
  severity: 'low' | 'medium' | 'high';
  removal_reason?: string;
  requires_human_review: boolean;
  additional_actions?: string[];
}

interface SubredditRules {
  rules: Array<{
    short_name: string;
    description: string;
    kind: string;
  }>;
  description: string;
}

// Main Moderation Dashboard Component
export const ModerationDashboard: React.FC = () => {
  const [selectedSubreddit, setSelectedSubreddit] = useState<string>('');
  const [rulesAnalysis, setRulesAnalysis] = useState<any>(null);
  const queryClient = useQueryClient();

  // Fetch moderated subreddits
  const { data: subreddits, isLoading: loadingSubreddits } = useQuery({
    queryKey: ['moderated-subreddits'],
    queryFn: async () => {
      const response = await fetch('/api/subreddits/moderated', {
        headers: {
          'accessToken': localStorage.getItem('reddit_access_token') || ''
        }
      });
      if (!response.ok) throw new Error('Failed to fetch subreddits');
      return response.json();
    }
  });

  // Fetch subreddit rules when subreddit is selected
  const { data: rules, isLoading: loadingRules } = useQuery({
    queryKey: ['subreddit-rules', selectedSubreddit],
    queryFn: async () => {
      if (!selectedSubreddit) return null;
      const response = await fetch(`/api/subreddits/${selectedSubreddit}/rules`, {
        headers: {
          'accessToken': localStorage.getItem('reddit_access_token') || ''
        }
      });
      if (!response.ok) throw new Error('Failed to fetch rules');
      return response.json();
    },
    enabled: !!selectedSubreddit
  });

  // Analyze rules with AI when rules are fetched
  const analyzeRulesMutation = useMutation({
    mutationFn: async (rulesData: SubredditRules) => {
      const response = await fetch('/api/ai/analyze-rules', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          subreddit: selectedSubreddit,
          ...rulesData
        })
      });
      if (!response.ok) throw new Error('Failed to analyze rules');
      return response.json();
    },
    onSuccess: (data) => {
      setRulesAnalysis(data.analysis);
    }
  });

  // Trigger rules analysis when rules are loaded
  useEffect(() => {
    if (rules && selectedSubreddit) {
      analyzeRulesMutation.mutate(rules);
    }
  }, [rules, selectedSubreddit]);

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-3xl font-bold">AI-Assisted Moderation</h1>
        <div className="flex items-center space-x-4">
          <Select value={selectedSubreddit} onValueChange={setSelectedSubreddit}>
            <SelectTrigger className="w-64">
              <SelectValue placeholder="Select a subreddit to moderate" />
            </SelectTrigger>
            <SelectContent>
              {subreddits?.subreddits.map((sub: any) => (
                <SelectItem key={sub.name} value={sub.name}>
                  r/{sub.name} ({sub.subscribers?.toLocaleString()} members)
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {selectedSubreddit && (
        <>
          <RulesSummary 
            rules={rules} 
            analysis={rulesAnalysis}
            isAnalyzing={analyzeRulesMutation.isPending}
          />
          <ModerationQueue 
            subreddit={selectedSubreddit}
            rulesAnalysis={rulesAnalysis}
          />
        </>
      )}
    </div>
  );
};

// Rules Summary Component
const RulesSummary: React.FC<{
  rules: SubredditRules | null;
  analysis: any;
  isAnalyzing: boolean;
}> = ({ rules, analysis, isAnalyzing }) => {
  if (!rules) return null;

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center space-x-2">
          <span>Subreddit Rules Analysis</span>
          {isAnalyzing && <Loader2 className="h-4 w-4 animate-spin" />}
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="grid md:grid-cols-2 gap-4">
          <div>
            <h3 className="font-semibold mb-2">Rules ({rules.rules.length})</h3>
            <div className="space-y-2">
              {rules.rules.map((rule, idx) => (
                <div key={idx} className="p-2 border rounded">
                  <div className="font-medium">{rule.short_name}</div>
                  <div className="text-sm text-gray-600">{rule.description}</div>
                </div>
              ))}
            </div>
          </div>
          
          {analysis && (
            <div>
              <h3 className="font-semibold mb-2">AI Analysis</h3>
              <div className="space-y-3">
                <div>
                  <h4 className="text-sm font-medium">Rule Categories</h4>
                  <div className="flex flex-wrap gap-1 mt-1">
                    {Object.keys(analysis.rule_categories || {}).map(category => (
                      <Badge key={category} variant="outline">{category}</Badge>
                    ))}
                  </div>
                </div>
                <div>
                  <h4 className="text-sm font-medium">Severity Distribution</h4>
                  <div className="flex space-x-2 mt-1">
                    {Object.entries(analysis.severity_levels || {}).map(([level, count]) => (
                      <Badge 
                        key={level} 
                        variant={level === 'severe' ? 'destructive' : level === 'moderate' ? 'default' : 'secondary'}
                      >
                        {level}: {Array.isArray(count) ? count.length : count}
                      </Badge>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
};

// Moderation Queue Component
const ModerationQueue: React.FC<{
  subreddit: string;
  rulesAnalysis: any;
}> = ({ subreddit, rulesAnalysis }) => {
  const [selectedItem, setSelectedItem] = useState<string | null>(null);

  const { data: modqueue, isLoading, refetch } = useQuery({
    queryKey: ['modqueue', subreddit],
    queryFn: async () => {
      const response = await fetch(`/api/subreddits/${subreddit}/modqueue`, {
        headers: {
          'accessToken': localStorage.getItem('reddit_access_token') || ''
        }
      });
      if (!response.ok) throw new Error('Failed to fetch modqueue');
      return response.json();
    },
    enabled: !!subreddit && !!rulesAnalysis,
    refetchInterval: 30000 // Refresh every 30 seconds
  });

  if (isLoading) {
    return (
      <Card>
        <CardContent className="flex items-center justify-center p-8">
          <Loader2 className="h-8 w-8 animate-spin" />
          <span className="ml-2">Loading moderation queue...</span>
        </CardContent>
      </Card>
    );
  }

  if (!modqueue?.items?.length) {
    return (
      <Card>
        <CardContent className="text-center p-8">
          <CheckCircle className="h-12 w-12 text-green-500 mx-auto mb-2" />
          <h3 className="text-lg font-semibold">Queue is empty!</h3>
          <p className="text-gray-600">No items require moderation at this time.</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">Moderation Queue ({modqueue.items.length})</h2>
        <Button onClick={() => refetch()}>Refresh Queue</Button>
      </div>
      
      <div className="grid gap-4">
        {modqueue.items.map((item: ModqueueItem) => (
          <ModqueueItemCard
            key={item.id}
            item={item}
            rulesAnalysis={rulesAnalysis}
            isExpanded={selectedItem === item.id}
            onToggle={() => setSelectedItem(selectedItem === item.id ? null : item.id)}
            onActionComplete={() => refetch()}
          />
        ))}
      </div>
    </div>
  );
};

// Individual Modqueue Item Component
const ModqueueItemCard: React.FC<{
  item: ModqueueItem;
  rulesAnalysis: any;
  isExpanded: boolean;
  onToggle: () => void;
  onActionComplete: () => void;
}> = ({ item, rulesAnalysis, isExpanded, onToggle, onActionComplete }) => {
  const [analysis, setAnalysis] = useState<AIAnalysis | null>(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);
  const [customReason, setCustomReason] = useState('');

  // Analyze item with AI
  const analyzeItem = async () => {
    setIsAnalyzing(true);
    try {
      const response = await fetch('/api/ai/analyze-item', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          item,
          rules_analysis: rulesAnalysis
        })
      });
      const result = await response.json();
      setAnalysis(result.analysis);
    } catch (error) {
      console.error('Failed to analyze item:', error);
    } finally {
      setIsAnalyzing(false