Reorganize repository into monorepo structure

Restructured the project to support multiple frontend applications:
- Move web app to web/ directory
- Create pezkuwi-sdk-ui/ for Polkadot SDK clone (planned)
- Create mobile/ directory for mobile app development
- Add shared/ directory with common utilities, types, and blockchain code
- Update README.md with comprehensive documentation
- Remove obsolete DKSweb/ directory

This monorepo structure enables better code sharing and organized
development across web, mobile, and SDK UI projects.

web/src/components/forum/DiscussionThread.tsx

@@ -0,0 +1,386 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Textarea } from '@/components/ui/textarea';
+import { Badge } from '@/components/ui/badge';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { ThumbsUp, ThumbsDown, MessageSquare, Shield, Award, TrendingUp, AlertTriangle, MoreVertical, Flag, Edit, Trash2, Loader2 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { useWebSocket } from '@/contexts/WebSocketContext';
+import { useToast } from '@/hooks/use-toast';
+
+interface Comment {
+  id: string;
+  author: string;
+  avatar: string;
+  content: string;
+  timestamp: string;
+  upvotes: number;
+  downvotes: number;
+  isExpert: boolean;
+  badges: string[];
+  replies: Comment[];
+  sentiment: 'positive' | 'neutral' | 'negative';
+  userVote?: 'up' | 'down' | null;
+  isLive?: boolean;
+}
+
+export function DiscussionThread({ proposalId }: { proposalId: string }) {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const { subscribe, unsubscribe, sendMessage, isConnected } = useWebSocket();
+  const [isLoading, setIsLoading] = useState(false);
+  const [comments, setComments] = useState<Comment[]>([
+    {
+      id: '1',
+      author: 'Dr. Rojin Ahmed',
+      avatar: '/api/placeholder/40/40',
+      content: '## Strong Support for This Proposal\n\nThis proposal addresses a critical need in our governance system. The implementation timeline is realistic and the budget allocation seems appropriate.\n\n**Key Benefits:**\n- Improved transparency\n- Better community engagement\n- Clear accountability metrics\n\nI particularly appreciate the phased approach outlined in section 3.',
+      timestamp: '2 hours ago',
+      upvotes: 24,
+      downvotes: 2,
+      isExpert: true,
+      badges: ['Governance Expert', 'Top Contributor'],
+      sentiment: 'positive',
+      userVote: null,
+      replies: [
+        {
+          id: '1-1',
+          author: 'Kawa Mustafa',
+          avatar: '/api/placeholder/40/40',
+          content: 'Agreed! The phased approach reduces risk significantly.',
+          timestamp: '1 hour ago',
+          upvotes: 8,
+          downvotes: 0,
+          isExpert: false,
+          badges: ['Active Member'],
+          sentiment: 'positive',
+          userVote: null,
+          replies: []
+        }
+      ]
+    },
+    {
+      id: '2',
+      author: 'Dilan Karim',
+      avatar: '/api/placeholder/40/40',
+      content: '### Concerns About Implementation\n\nWhile I support the overall direction, I have concerns about:\n\n1. The technical complexity might be underestimated\n2. We need more details on the security audit process\n3. Reference to [Proposal #142](/proposals/142) shows similar challenges\n\n> "The devil is in the details" - and we need more of them',
+      timestamp: '3 hours ago',
+      upvotes: 18,
+      downvotes: 5,
+      isExpert: true,
+      badges: ['Security Expert'],
+      sentiment: 'negative',
+      userVote: null,
+      replies: []
+    }
+  ]);
+
+  const [newComment, setNewComment] = useState('');
+  const [replyTo, setReplyTo] = useState<string | null>(null);
+  const [showMarkdownHelp, setShowMarkdownHelp] = useState(false);
+
+  // WebSocket subscriptions for real-time updates
+  useEffect(() => {
+    const handleNewComment = (data: any) => {
+      const newComment: Comment = {
+        ...data,
+        isLive: true,
+      };
+      setComments(prev => [newComment, ...prev]);
+      
+      // Show notification for mentions
+      if (data.content.includes('@currentUser')) {
+        toast({
+          title: "You were mentioned",
+          description: `${data.author} mentioned you in a comment`,
+        });
+      }
+    };
+
+    const handleVoteUpdate = (data: { commentId: string; upvotes: number; downvotes: number }) => {
+      setComments(prev => updateVoteCounts(prev, data.commentId, data.upvotes, data.downvotes));
+    };
+
+    const handleSentimentUpdate = (data: { proposalId: string; sentiment: any }) => {
+      if (data.proposalId === proposalId) {
+        // Update sentiment visualization in parent component
+        console.log('Sentiment updated:', data.sentiment);
+      }
+    };
+
+    subscribe('comment', handleNewComment);
+    subscribe('vote', handleVoteUpdate);
+    subscribe('sentiment', handleSentimentUpdate);
+
+    return () => {
+      unsubscribe('comment', handleNewComment);
+      unsubscribe('vote', handleVoteUpdate);
+      unsubscribe('sentiment', handleSentimentUpdate);
+    };
+  }, [subscribe, unsubscribe, proposalId, toast]);
+
+  const updateVoteCounts = (comments: Comment[], targetId: string, upvotes: number, downvotes: number): Comment[] => {
+    return comments.map(comment => {
+      if (comment.id === targetId) {
+        return { ...comment, upvotes, downvotes };
+      }
+      if (comment.replies.length > 0) {
+        return {
+          ...comment,
+          replies: updateVoteCounts(comment.replies, targetId, upvotes, downvotes)
+        };
+      }
+      return comment;
+    });
+  };
+
+  const handleVote = useCallback((commentId: string, voteType: 'up' | 'down') => {
+    const updatedComments = updateCommentVote(comments, commentId, voteType);
+    setComments(updatedComments);
+    
+    // Send vote update via WebSocket
+    const comment = findComment(updatedComments, commentId);
+    if (comment && isConnected) {
+      sendMessage({
+        type: 'vote',
+        data: {
+          commentId,
+          upvotes: comment.upvotes,
+          downvotes: comment.downvotes,
+          proposalId,
+        },
+        timestamp: Date.now(),
+      });
+    }
+  }, [comments, isConnected, sendMessage, proposalId]);
+
+  const findComment = (comments: Comment[], targetId: string): Comment | null => {
+    for (const comment of comments) {
+      if (comment.id === targetId) return comment;
+      const found = findComment(comment.replies, targetId);
+      if (found) return found;
+    }
+    return null;
+  };
+
+  const updateCommentVote = (comments: Comment[], targetId: string, voteType: 'up' | 'down'): Comment[] => {
+    return comments.map(comment => {
+      if (comment.id === targetId) {
+        const wasUpvoted = comment.userVote === 'up';
+        const wasDownvoted = comment.userVote === 'down';
+        
+        if (voteType === 'up') {
+          return {
+            ...comment,
+            upvotes: wasUpvoted ? comment.upvotes - 1 : comment.upvotes + 1,
+            downvotes: wasDownvoted ? comment.downvotes - 1 : comment.downvotes,
+            userVote: wasUpvoted ? null : 'up'
+          };
+        } else {
+          return {
+            ...comment,
+            upvotes: wasUpvoted ? comment.upvotes - 1 : comment.upvotes,
+            downvotes: wasDownvoted ? comment.downvotes - 1 : comment.downvotes + 1,
+            userVote: wasDownvoted ? null : 'down'
+          };
+        }
+      }
+      if (comment.replies.length > 0) {
+        return {
+          ...comment,
+          replies: updateCommentVote(comment.replies, targetId, voteType)
+        };
+      }
+      return comment;
+    });
+  };
+
+  const renderComment = (comment: Comment, depth: number = 0) => (
+    <div key={comment.id} className={`${depth > 0 ? 'ml-12 mt-4' : 'mb-6'} ${comment.isLive ? 'animate-pulse-once' : ''}`}>
+      <Card className="border-l-4 transition-all duration-300" style={{
+        borderLeftColor: comment.sentiment === 'positive' ? '#10b981' : 
+                        comment.sentiment === 'negative' ? '#ef4444' : '#6b7280'
+      }}>
+        <CardContent className="pt-6">
+          <div className="flex items-start justify-between">
+            <div className="flex items-start space-x-3">
+              <Avatar className="relative">
+                <AvatarImage src={comment.avatar} />
+                <AvatarFallback>{comment.author[0]}</AvatarFallback>
+                {comment.isLive && (
+                  <div className="absolute -top-1 -right-1 h-3 w-3 bg-green-500 rounded-full animate-pulse" />
+                )}
+              </Avatar>
+              <div className="flex-1">
+                <div className="flex items-center space-x-2">
+                  <span className="font-semibold">{comment.author}</span>
+                  {comment.isExpert && (
+                    <Shield className="h-4 w-4 text-blue-500" />
+                  )}
+                  {comment.badges.map(badge => (
+                    <Badge key={badge} variant="secondary" className="text-xs">
+                      {badge}
+                    </Badge>
+                  ))}
+                  <span className="text-sm text-gray-500">
+                    {comment.isLive ? 'Just now' : comment.timestamp}
+                  </span>
+                  {isConnected && (
+                    <div className="h-2 w-2 bg-green-500 rounded-full" title="Real-time updates active" />
+                  )}
+                </div>
+                <div className="mt-3 prose prose-sm max-w-none" 
+                     dangerouslySetInnerHTML={{ __html: parseMarkdown(comment.content) }} />
+                <div className="flex items-center space-x-4 mt-4">
+                  <Button
+                    variant={comment.userVote === 'up' ? 'default' : 'ghost'}
+                    size="sm"
+                    onClick={() => handleVote(comment.id, 'up')}
+                    className="transition-all duration-200"
+                  >
+                    <ThumbsUp className="h-4 w-4 mr-1" />
+                    <span className="transition-all duration-300">{comment.upvotes}</span>
+                  </Button>
+                  <Button
+                    variant={comment.userVote === 'down' ? 'default' : 'ghost'}
+                    size="sm"
+                    onClick={() => handleVote(comment.id, 'down')}
+                    className="transition-all duration-200"
+                  >
+                    <ThumbsDown className="h-4 w-4 mr-1" />
+                    <span className="transition-all duration-300">{comment.downvotes}</span>
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setReplyTo(comment.id)}
+                  >
+                    <MessageSquare className="h-4 w-4 mr-1" />
+                    Reply
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="sm">
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem>
+                  <Flag className="h-4 w-4 mr-2" />
+                  Report
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Edit className="h-4 w-4 mr-2" />
+                  Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem className="text-red-600">
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          {replyTo === comment.id && (
+            <div className="mt-4">
+              <Textarea
+                placeholder="Write your reply... @mention users to notify them"
+                value={newComment}
+                onChange={(e) => setNewComment(e.target.value)}
+                className="min-h-[80px]"
+              />
+              <div className="flex justify-end space-x-2 mt-2">
+                <Button variant="outline" onClick={() => setReplyTo(null)}>
+                  Cancel
+                </Button>
+                <Button 
+                  onClick={() => {
+                    if (newComment.trim() && isConnected) {
+                      sendMessage({
+                        type: 'reply',
+                        data: {
+                          parentId: comment.id,
+                          content: newComment,
+                          proposalId,
+                          author: 'Current User',
+                        },
+                        timestamp: Date.now(),
+                      });
+                    }
+                    setReplyTo(null);
+                    setNewComment('');
+                  }}
+                  disabled={!newComment.trim()}
+                >
+                  Post Reply
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+      {comment.replies.map(reply => renderComment(reply, depth + 1))}
+    </div>
+  );
+
+  const parseMarkdown = (text: string): string => {
+    return text
+      .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+      .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+      .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+      .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
+      .replace(/\*(.*)\*/gim, '<em>$1</em>')
+      .replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2" class="text-blue-600 hover:underline">$1</a>')
+      .replace(/^> (.*$)/gim, '<blockquote class="border-l-4 border-gray-300 pl-4 italic">$1</blockquote>')
+      .replace(/\n/gim, '<br>');
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <h3 className="text-xl font-semibold">Discussion Forum</h3>
+          <p className="text-sm text-gray-600">Share your thoughts and feedback on this proposal</p>
+        </CardHeader>
+        <CardContent>
+          <Textarea
+            placeholder="Write your comment... (Markdown supported)"
+            value={newComment}
+            onChange={(e) => setNewComment(e.target.value)}
+            className="min-h-[120px]"
+          />
+          <div className="flex justify-between items-center mt-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setShowMarkdownHelp(!showMarkdownHelp)}
+            >
+              Markdown Help
+            </Button>
+            <Button>Post Comment</Button>
+          </div>
+          {showMarkdownHelp && (
+            <Card className="mt-4 p-4 bg-gray-50 text-gray-900">
+              <p className="text-sm font-semibold mb-2 text-gray-900">Markdown Formatting:</p>
+              <ul className="text-sm space-y-1 text-gray-900">
+                <li>**bold** → <strong>bold</strong></li>
+                <li>*italic* → <em>italic</em></li>
+                <li>[link](url) → <a href="#" className="text-blue-600">link</a></li>
+                <li>&gt; quote → <blockquote className="border-l-4 border-gray-300 pl-2">quote</blockquote></li>
+                <li># Heading → <span className="font-bold text-lg">Heading</span></li>
+              </ul>
+            </Card>
+          )}
+        </CardContent>
+      </Card>
+
+      <div>
+        {comments.map(comment => renderComment(comment))}
+      </div>
+    </div>
+  );
+}

web/src/components/forum/ForumOverview.tsx

@@ -0,0 +1,250 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Progress } from '@/components/ui/progress';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { TrendingUp, TrendingDown, MessageSquare, Users, BarChart3, Search, Filter, Clock, Flame, Award } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { DiscussionThread } from './DiscussionThread';
+
+interface Discussion {
+  id: string;
+  title: string;
+  proposalId: string;
+  author: string;
+  category: string;
+  replies: number;
+  views: number;
+  lastActivity: string;
+  sentiment: number;
+  trending: boolean;
+  pinned: boolean;
+  tags: string[];
+}
+
+export function ForumOverview() {
+  const { t } = useTranslation();
+  const [selectedDiscussion, setSelectedDiscussion] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState('recent');
+  const [filterCategory, setFilterCategory] = useState('all');
+
+  const discussions: Discussion[] = [
+    {
+      id: '1',
+      title: 'Treasury Allocation for Developer Grants - Q1 2024',
+      proposalId: 'prop-001',
+      author: 'Dr. Rojin Ahmed',
+      category: 'Treasury',
+      replies: 45,
+      views: 1234,
+      lastActivity: '2 hours ago',
+      sentiment: 72,
+      trending: true,
+      pinned: true,
+      tags: ['treasury', 'grants', 'development']
+    },
+    {
+      id: '2',
+      title: 'Technical Upgrade: Implementing Zero-Knowledge Proofs',
+      proposalId: 'prop-002',
+      author: 'Kawa Mustafa',
+      category: 'Technical',
+      replies: 28,
+      views: 890,
+      lastActivity: '5 hours ago',
+      sentiment: 85,
+      trending: true,
+      pinned: false,
+      tags: ['technical', 'zkp', 'privacy']
+    },
+    {
+      id: '3',
+      title: 'Community Initiative: Education Program for New Users',
+      proposalId: 'prop-003',
+      author: 'Dilan Karim',
+      category: 'Community',
+      replies: 62,
+      views: 2100,
+      lastActivity: '1 day ago',
+      sentiment: 45,
+      trending: false,
+      pinned: false,
+      tags: ['community', 'education', 'onboarding']
+    }
+  ];
+
+  const sentimentStats = {
+    positive: 42,
+    neutral: 35,
+    negative: 23
+  };
+
+  const getSentimentColor = (sentiment: number) => {
+    if (sentiment >= 70) return 'text-green-600';
+    if (sentiment >= 40) return 'text-yellow-600';
+    return 'text-red-600';
+  };
+
+  const getSentimentIcon = (sentiment: number) => {
+    if (sentiment >= 70) return <TrendingUp className="h-4 w-4" />;
+    if (sentiment >= 40) return <BarChart3 className="h-4 w-4" />;
+    return <TrendingDown className="h-4 w-4" />;
+  };
+
+  if (selectedDiscussion) {
+    return (
+      <div className="space-y-6">
+        <Button 
+          variant="outline" 
+          onClick={() => setSelectedDiscussion(null)}
+        >
+          ← Back to Forum
+        </Button>
+        <DiscussionThread proposalId={selectedDiscussion} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Sentiment Overview */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Community Sentiment Analysis</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm font-medium">Positive</span>
+                <span className="text-sm text-green-600">{sentimentStats.positive}%</span>
+              </div>
+              <Progress value={sentimentStats.positive} className="h-2 bg-green-100" />
+            </div>
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm font-medium">Neutral</span>
+                <span className="text-sm text-yellow-600">{sentimentStats.neutral}%</span>
+              </div>
+              <Progress value={sentimentStats.neutral} className="h-2 bg-yellow-100" />
+            </div>
+            <div>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm font-medium">Negative</span>
+                <span className="text-sm text-red-600">{sentimentStats.negative}%</span>
+              </div>
+              <Progress value={sentimentStats.negative} className="h-2 bg-red-100" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Search and Filters */}
+      <Card>
+        <CardContent className="pt-6">
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+              <Input
+                placeholder="Search discussions..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <Select value={filterCategory} onValueChange={setFilterCategory}>
+              <SelectTrigger className="w-full md:w-[180px]">
+                <SelectValue placeholder="Category" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All Categories</SelectItem>
+                <SelectItem value="treasury">Treasury</SelectItem>
+                <SelectItem value="technical">Technical</SelectItem>
+                <SelectItem value="community">Community</SelectItem>
+              </SelectContent>
+            </Select>
+            <Select value={sortBy} onValueChange={setSortBy}>
+              <SelectTrigger className="w-full md:w-[180px]">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="recent">Most Recent</SelectItem>
+                <SelectItem value="popular">Most Popular</SelectItem>
+                <SelectItem value="replies">Most Replies</SelectItem>
+                <SelectItem value="sentiment">Best Sentiment</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Discussions List */}
+      <div className="space-y-4">
+        {discussions.map((discussion) => (
+          <Card 
+            key={discussion.id}
+            className="cursor-pointer hover:shadow-lg transition-shadow"
+            onClick={() => setSelectedDiscussion(discussion.proposalId)}
+          >
+            <CardContent className="pt-6">
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-2">
+                    {discussion.pinned && (
+                      <Badge variant="secondary">
+                        📌 Pinned
+                      </Badge>
+                    )}
+                    {discussion.trending && (
+                      <Badge variant="destructive">
+                        <Flame className="h-3 w-3 mr-1" />
+                        Trending
+                      </Badge>
+                    )}
+                    <Badge variant="outline">{discussion.category}</Badge>
+                  </div>
+                  <h3 className="text-lg font-semibold mb-2">{discussion.title}</h3>
+                  <div className="flex items-center gap-4 text-sm text-gray-600">
+                    <span>by {discussion.author}</span>
+                    <span className="flex items-center gap-1">
+                      <MessageSquare className="h-4 w-4" />
+                      {discussion.replies} replies
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Users className="h-4 w-4" />
+                      {discussion.views} views
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-4 w-4" />
+                      {discussion.lastActivity}
+                    </span>
+                  </div>
+                  <div className="flex gap-2 mt-3">
+                    {discussion.tags.map((tag) => (
+                      <Badge key={tag} variant="secondary" className="text-xs">
+                        #{tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+                <div className="text-center ml-6">
+                  <div className={`text-2xl font-bold ${getSentimentColor(discussion.sentiment)}`}>
+                    {discussion.sentiment}%
+                  </div>
+                  <div className="flex items-center gap-1 text-sm text-gray-600">
+                    {getSentimentIcon(discussion.sentiment)}
+                    <span>Sentiment</span>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}

web/src/components/forum/ModerationPanel.tsx

@@ -0,0 +1,247 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { AlertTriangle, Shield, Ban, CheckCircle, Clock, Flag, User, MessageSquare, TrendingUp } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface Report {
+  id: string;
+  type: 'spam' | 'harassment' | 'misinformation' | 'other';
+  reportedContent: string;
+  reportedBy: string;
+  reportedUser: string;
+  timestamp: string;
+  status: 'pending' | 'reviewing' | 'resolved';
+  severity: 'low' | 'medium' | 'high';
+}
+
+export function ModerationPanel() {
+  const { t } = useTranslation();
+  const [autoModeration, setAutoModeration] = useState(true);
+  const [sentimentThreshold, setSentimentThreshold] = useState(30);
+
+  const reports: Report[] = [
+    {
+      id: '1',
+      type: 'misinformation',
+      reportedContent: 'False claims about proposal implementation...',
+      reportedBy: 'User123',
+      reportedUser: 'BadActor456',
+      timestamp: '10 minutes ago',
+      status: 'pending',
+      severity: 'high'
+    },
+    {
+      id: '2',
+      type: 'spam',
+      reportedContent: 'Repeated promotional content...',
+      reportedBy: 'User789',
+      reportedUser: 'Spammer101',
+      timestamp: '1 hour ago',
+      status: 'reviewing',
+      severity: 'medium'
+    }
+  ];
+
+  const moderationStats = {
+    totalReports: 24,
+    resolved: 18,
+    pending: 6,
+    bannedUsers: 3,
+    flaggedContent: 12
+  };
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case 'high': return 'text-red-600 bg-red-100';
+      case 'medium': return 'text-yellow-600 bg-yellow-100';
+      case 'low': return 'text-green-600 bg-green-100';
+      default: return 'text-gray-600 bg-gray-100';
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'resolved': return <CheckCircle className="h-4 w-4 text-green-600" />;
+      case 'reviewing': return <Clock className="h-4 w-4 text-yellow-600" />;
+      case 'pending': return <AlertTriangle className="h-4 w-4 text-red-600" />;
+      default: return null;
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Moderation Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Total Reports</p>
+                <p className="text-2xl font-bold">{moderationStats.totalReports}</p>
+              </div>
+              <Flag className="h-8 w-8 text-gray-400" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Resolved</p>
+                <p className="text-2xl font-bold text-green-600">{moderationStats.resolved}</p>
+              </div>
+              <CheckCircle className="h-8 w-8 text-green-400" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Pending</p>
+                <p className="text-2xl font-bold text-yellow-600">{moderationStats.pending}</p>
+              </div>
+              <Clock className="h-8 w-8 text-yellow-400" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Banned Users</p>
+                <p className="text-2xl font-bold text-red-600">{moderationStats.bannedUsers}</p>
+              </div>
+              <Ban className="h-8 w-8 text-red-400" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-6">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Flagged Content</p>
+                <p className="text-2xl font-bold">{moderationStats.flaggedContent}</p>
+              </div>
+              <AlertTriangle className="h-8 w-8 text-orange-400" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="reports" className="space-y-4">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="reports">Reports Queue</TabsTrigger>
+          <TabsTrigger value="settings">Auto-Moderation</TabsTrigger>
+          <TabsTrigger value="users">User Management</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="reports" className="space-y-4">
+          {reports.map((report) => (
+            <Card key={report.id}>
+              <CardContent className="pt-6">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-2">
+                      {getStatusIcon(report.status)}
+                      <Badge className={getSeverityColor(report.severity)}>
+                        {report.severity.toUpperCase()}
+                      </Badge>
+                      <Badge variant="outline">{report.type}</Badge>
+                      <span className="text-sm text-gray-500">{report.timestamp}</span>
+                    </div>
+                    <p className="font-medium mb-2">Reported User: {report.reportedUser}</p>
+                    <p className="text-gray-600 mb-3">{report.reportedContent}</p>
+                    <p className="text-sm text-gray-500">Reported by: {report.reportedBy}</p>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button variant="outline" size="sm">
+                      Review
+                    </Button>
+                    <Button variant="destructive" size="sm">
+                      Take Action
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </TabsContent>
+
+        <TabsContent value="settings" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>Auto-Moderation Settings</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <Label htmlFor="auto-mod">Enable Auto-Moderation</Label>
+                  <p className="text-sm text-gray-600">Automatically flag suspicious content</p>
+                </div>
+                <Switch
+                  id="auto-mod"
+                  checked={autoModeration}
+                  onCheckedChange={setAutoModeration}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label>Sentiment Threshold</Label>
+                <p className="text-sm text-gray-600">
+                  Flag comments with sentiment below {sentimentThreshold}%
+                </p>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  value={sentimentThreshold}
+                  onChange={(e) => setSentimentThreshold(Number(e.target.value))}
+                  className="w-full"
+                />
+              </div>
+              <Alert>
+                <Shield className="h-4 w-4" />
+                <AlertDescription>
+                  Auto-moderation uses AI to detect potentially harmful content and automatically flags it for review.
+                </AlertDescription>
+              </Alert>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="users" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>User Moderation Actions</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between p-4 border rounded-lg">
+                  <div className="flex items-center gap-3">
+                    <User className="h-8 w-8 text-gray-400" />
+                    <div>
+                      <p className="font-medium">BadActor456</p>
+                      <p className="text-sm text-gray-600">3 reports, 2 warnings</p>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button variant="outline" size="sm">Warn</Button>
+                    <Button variant="outline" size="sm">Suspend</Button>
+                    <Button variant="destructive" size="sm">Ban</Button>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}