// 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);
    }
  };

  // Take moderation action
  const takeActionMutation = useMutation({
    mutationFn: async ({ action, reason }: { action: string; reason?: string }) => {
      const response = await fetch('/api/moderation/action', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          item_id: item.fullname,
          action,
          reason,
          accessToken: localStorage.getItem('reddit_access_token')
        })
      });
      if (!response.ok) throw new Error('Failed to take action');
      return response.json();
    },
    onSuccess: () => {
      onActionComplete();
    }
  });

  // Auto-analyze when expanded
  useEffect(() => {
    if (isExpanded && !analysis && !isAnalyzing && rulesAnalysis) {
      analyzeItem();
    }
  }, [isExpanded, rulesAnalysis]);

  const getSeverityColor = (severity: string) => {
    switch (severity) {
      case 'high': return 'text-red-600 bg-red-50';
      case 'medium': return 'text-yellow-600 bg-yellow-50';
      case 'low': return 'text-green-600 bg-green-50';
      default: return 'text-gray-600 bg-gray-50';
    }
  };

  const getActionIcon = (action: string) => {
    switch (action) {
      case 'approve': return <CheckCircle className="h-4 w-4 text-green-600" />;
      case 'remove': return <XCircle className="h-4 w-4 text-red-600" />;
      case 'spam': return <AlertTriangle className="h-4 w-4 text-orange-600" />;
      default: return <Eye className="h-4 w-4 text-blue-600" />;
    }
  };

  return (
    <Card className="overflow-hidden">
      <CardHeader className="pb-3">
        <div className="flex justify-between items-start">
          <div className="flex-1">
            <div className="flex items-center space-x-2 mb-2">
              <Badge variant="outline">{item.type}</Badge>
              <span className="text-sm text-gray-500">
                by u/{item.author} • {new Date(item.created_utc * 1000).toLocaleString()}
              </span>
              {item.num_reports > 0 && (
                <Badge variant="destructive">{item.num_reports} reports</Badge>
              )}
            </div>
            
            {item.type === 'submission' ? (
              <div>
                <h3 className="font-semibold text-lg">{item.title}</h3>
                {item.selftext && (
                  <p className="text-gray-700 mt-1 line-clamp-2">{item.selftext}</p>
                )}
                {item.url && item.url !== item.permalink && (
                  <a href={item.url} target="_blank" rel="noopener noreferrer" 
                     className="text-blue-600 hover:underline text-sm">
                    {item.url}
                  </a>
                )}
              </div>
            ) : (
              <div>
                <p className="text-gray-700">{item.body}</p>
                <p className="text-sm text-gray-500 mt-1">
                  Comment on: {(item as any).link_title}
                </p>
              </div>
            )}
            
            <div className="flex items-center space-x-4 mt-2 text-sm text-gray-500">
              <span>Score: {item.score}</span>
              <a href={`https://reddit.com${item.permalink}`} target="_blank" 
                 rel="noopener noreferrer" className="text-blue-600 hover:underline">
                View on Reddit
              </a>
            </div>
          </div>
          
          <Button variant="outline" onClick={onToggle}>
            {isExpanded ? 'Collapse' : 'Analyze'}
          </Button>
        </div>
      </CardHeader>

      {isExpanded && (
        <CardContent className="border-t">
          {/* Reports Section */}
          {(item.reports.length > 0 || item.mod_reports.length > 0) && (
            <div className="mb-4">
              <h4 className="font-medium mb-2">Reports</h4>
              <div className="space-y-1">
                {item.reports.map((report, idx) => (
                  <div key={idx} className="text-sm bg-red-50 p-2 rounded">
                    User Report: {report}
                  </div>
                ))}
                {item.mod_reports.map((report, idx) => (
                  <div key={idx} className="text-sm bg-orange-50 p-2 rounded">
                    Mod Report: {Array.isArray(report) ? report.join(': ') : report}
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* AI Analysis Section */}
          <div className="space-y-4">
            <div className="flex justify-between items-center">
              <h4 className="font-medium">AI Analysis</h4>
              {!analysis && (
                <Button 
                  onClick={analyzeItem} 
                  disabled={isAnalyzing}
                  size="sm"
                >
                  {isAnalyzing ? (
                    <>
                      <Loader2 className="h-4 w-4 animate-spin mr-2" />
                      Analyzing...
                    </>
                  ) : (
                    'Analyze with AI'
                  )}
                </Button>
              )}
            </div>

            {analysis && (
              <div className="space-y-4">
                {/* Suggested Action */}
                <Alert className={getSeverityColor(analysis.severity)}>
                  <div className="flex items-center space-x-2">
                    {getActionIcon(analysis.suggested_action)}
                    <div>
                      <div className="font-medium">
                        Suggested Action: {analysis.suggested_action.toUpperCase()}
                      </div>
                      <div className="text-sm">
                        Confidence: {analysis.confidence_score}/10 • 
                        Severity: {analysis.severity}
                      </div>
                    </div>
                  </div>
                  <AlertDescription className="mt-2">
                    {analysis.reasoning}
                  </AlertDescription>
                </Alert>

                {/* Rule Violations */}
                {analysis.violations_found.length > 0 && (
                  <div>
                    <h5 className="font-medium mb-2">Rule Violations Found</h5>
                    <div className="space-y-2">
                      {analysis.violations_found.map((violation, idx) => (
                        <div key={idx} className="bg-red-50 p-3 rounded border-l-4 border-red-400">
                          <div className="font-medium text-red-800">
                            {violation.rule_name}
                          </div>
                          <div className="text-sm text-red-700">
                            {violation.explanation}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* Removal Reason */}
                {analysis.removal_reason && (
                  <div>
                    <h5 className="font-medium mb-2">Suggested Removal Message</h5>
                    <Textarea 
                      value={customReason || analysis.removal_reason}
                      onChange={(e) => setCustomReason(e.target.value)}
                      className="min-h-20"
                      placeholder="Edit removal reason..."
                    />
                  </div>
                )}

                {/* Additional Actions */}
                {analysis.additional_actions && analysis.additional_actions.length > 0 && (
                  <div>
                    <h5 className="font-medium mb-2">Additional Suggested Actions</h5>
                    <div className="flex flex-wrap gap-2">
                      {analysis.additional_actions.map((action, idx) => (
                        <Badge key={idx} variant="outline">{action}</Badge>
                      ))}
                    </div>
                  </div>
                )}

                {/* Human Review Warning */}
                {analysis.requires_human_review && (
                  <Alert>
                    <AlertTriangle className="h-4 w-4" />
                    <AlertDescription>
                      This item requires human review due to complexity or edge cases.
                    </AlertDescription>
                  </Alert>
                )}
              </div>
            )}
          </div>

          {/* Action Buttons */}
          <div className="flex justify-between items-center mt-6 pt-4 border-t">
            <div className="flex space-x-2">
              <Button
                onClick={() => takeActionMutation.mutate({ action: 'approve' })}
                disabled={takeActionMutation.isPending}
                variant="outline"
                size="sm"
              >
                <CheckCircle className="h-4 w-4 mr-1" />
                Approve
              </Button>
              
              <Button
                onClick={() => takeActionMutation.mutate({ 
                  action: 'remove', 
                  reason: customReason || analysis?.removal_reason 
                })}
                disabled={takeActionMutation.isPending}
                variant="destructive"
                size="sm"
              >
                <XCircle className="h-4 w-4 mr-1" />
                Remove
              </Button>
              
              <Button
                onClick={() => takeActionMutation.mutate({ action: 'spam' })}
                disabled={takeActionMutation.isPending}
                variant="outline"
                size="sm"
              >
                <AlertTriangle className="h-4 w-4 mr-1" />
                Spam
              </Button>
            </div>
            
            {analysis?.suggested_action && (
              <Button
                onClick={() => takeActionMutation.mutate({ 
                  action: analysis.suggested_action,
                  reason: customReason || analysis.removal_reason
                })}
                disabled={takeActionMutation.isPending}
                className="bg-blue-600 hover:bg-blue-700"
                size="sm"
              >
                {takeActionMutation.isPending ? (
                  <Loader2 className="h-4 w-4 animate-spin mr-1" />
                ) : (
                  getActionIcon(analysis.suggested_action)
                )}
                Use AI Suggestion
              </Button>
            )}
          </div>
        </CardContent>
      )}
    </Card>
  );
};

// Batch Analysis Component
export const BatchModerationPanel: React.FC<{
  subreddit: string;
  onComplete: () => void;
}> = ({ subreddit, onComplete }) => {
  const [batchSize, setBatchSize] = useState(10);
  const [results, setResults] = useState<any[]>([]);

  const batchAnalyzeMutation = useMutation({
    mutationFn: async () => {
      const response = await fetch('/api/moderation/batch-analyze', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          subreddit,
          limit: batchSize,
          accessToken: localStorage.getItem('reddit_access_token')
        })
      });
      if (!response.ok) throw new Error('Batch analysis failed');
      return response.json();
    },
    onSuccess: (data) => {
      setResults(data.analyses);
    }
  });

  const autoModerateMutation = useMutation({
    mutationFn: async (highConfidenceItems: any[]) => {
      const actions = highConfidenceItems
        .filter(item => item.analysis.confidence_score >= 8 && !item.analysis.requires_human_review)
        .map(item => ({
          item_id: item.item.fullname,
          action: item.analysis.suggested_action,
          reason: item.analysis.removal_reason
        }));

      const results = await Promise.all(
        actions.map(action =>
          fetch('/api/moderation/action', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              ...action,
              accessToken: localStorage.getItem('reddit_access_token')
            })
          })
        )
      );

      return { processed: actions.length, results };
    },
    onSuccess: () => {
      onComplete();
    }
  });

  const handleAutoModerate = () => {
    const highConfidenceItems = results.filter(
      item => item.analysis.confidence_score >= 8 && 
              !item.analysis.requires_human_review &&
              item.analysis.suggested_action !== 'manual_review'
    );
    
    if (highConfidenceItems.length > 0) {
      autoModerateMutation.mutate(highConfidenceItems);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Batch Analysis & Auto-Moderation</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex items-center space-x-4">
          <div>
            <label className="text-sm font-medium">Batch Size:</label>
            <Select value={batchSize.toString()} onValueChange={(v) => setBatchSize(parseInt(v))}>
              <SelectTrigger className="w-20">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {[5, 10, 25, 50].map(size => (
                  <SelectItem key={size} value={size.toString()}>{size}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          
          <Button 
            onClick={() => batchAnalyzeMutation.mutate()}
            disabled={batchAnalyzeMutation.isPending}
          >
            {batchAnalyzeMutation.isPending ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin mr-2" />
                Analyzing {batchSize} items...
              </>
            ) : (
              `Analyze ${batchSize} Items`
            )}
          </Button>
        </div>

        {results.length > 0 && (
          <div className="space-y-4">
            <div className="grid grid-cols-3 gap-4 text-center">
              <div className="bg-green-50 p-3 rounded">
                <div className="text-2xl font-bold text-green-600">
                  {results.filter(r => r.analysis.suggested_action === 'approve').length}
                </div>
                <div className="text-sm text-green-600">Approve</div>
              </div>
              <div className="bg-red-50 p-3 rounded">
                <div className="text-2xl font-bold text-red-600">
                  {results.filter(r => r.analysis.suggested_action === 'remove').length}
                </div>
                <div className="text-sm text-red-600">Remove</div>
              </div>
              <div className="bg-yellow-50 p-3 rounded">
                <div className="text-2xl font-bold text-yellow-600">
                  {results.filter(r => r.analysis.requires_human_review).length}
                </div>
                <div className="text-sm text-yellow-600">Manual Review</div>
              </div>
            </div>

            <div className="flex justify-between">
              <div className="text-sm text-gray-600">
                High confidence items: {results.filter(r => r.analysis.confidence_score >= 8).length}
              </div>
              
              <Button 
                onClick={handleAutoModerate}
                disabled={autoModerateMutation.isPending || 
                         results.filter(r => r.analysis.confidence_score >= 8 && !r.analysis.requires_human_review).length === 0}
                variant="outline"
              >
                {autoModerateMutation.isPending ? (
                  <>
                    <Loader2 className="h-4 w-4 animate-spin mr-2" />
                    Auto-moderating...
                  </>
                ) : (
                  'Auto-moderate High Confidence Items'
                )}
              </Button>
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
};