"use client";

import { useState } from "react";
import AudioPlayer from "react-h5-audio-player";
import "react-h5-audio-player/lib/styles.css";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { Separator } from "@/components/ui/separator";
import {
  Users,
  Users2,
  MessageSquare,
  Flag,
  Eye,
  EyeOff,
  Lock,
  Unlock,
  UserCheck,
  UserX,
  Trash2,
  Edit,
  Plus,
  Shield,
} from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import {
  usePlatformAnalytics,
  useUsers,
  useCommunities,
  useFlaggedContent,
  useAnnouncements,
  useSystemSettings,
  useLockUser,
  useUnlockUser,
  useDisableUser,
  useEnableUser,
  useDeleteUser,
  useBlockCommunity,
  useUnblockCommunity,
  useDeleteCommunity,
  useModerateContent,
  useDeleteAnnouncement,
  useToggleAnnouncementStatus,
  useUpdateSystemSettings,
} from "@/hooks";
import {
  RoleEnums,
  AnnouncementType,
  AnnouncementPriority,
  ReportAction,
} from "@/types/api";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export default function DashboardPage() {
  const [selectedPeriod, setSelectedPeriod] = useState("7d");
  const [currentTab, setCurrentTab] = useState("overview");

  // Audio player event handlers
  const handlePlay = () => {
    console.log("Audio started playing");
  };

  const handlePause = () => {
    console.log("Audio paused");
  };

  const handleEnded = () => {
    console.log("Audio ended");
  };

  const handleError = (e: Event) => {
    console.error("Audio playback error:", e);
    toast.error("Failed to play audio");
  };

  const formatDuration = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, "0")}`;
  };

  // Fetch data using hooks
  const {
    data: analytics,
    isLoading: analyticsLoading,
    error: analyticsError,
  } = usePlatformAnalytics(selectedPeriod);

  // Ensure analytics data is always defined
  const safeAnalytics = analytics?.data.analytics || {
    users: { total: 0, new: 0, active: 0 },
    posts: { total: 0, new: 0, likes: 0 },
    communities: { total: 0, new: 0, active: 0 },
    reports: { total: 0, resolved: 0, pending: 0 },
    engagement: { totalLikes: 0, totalReplies: 0, avgPostDuration: 0 },
    period: selectedPeriod,
  };
  console.log("safeAnalytics", safeAnalytics);

  const { data: usersData, isLoading: usersLoading } = useUsers({
    page: 1,
    limit: 5,
    sortBy: "createdAt",
    sortOrder: "desc",
    isProfileCompleted: true,
  });
  const { data: communitiesData, isLoading: communitiesLoading } =
    useCommunities({
      page: 1,
      limit: 5,
      sortBy: "createdAt",
      sortOrder: "desc",
    });
  console.log("communitiesData", communitiesData);
  const { data: flaggedContent, isLoading: flaggedLoading } = useFlaggedContent(
    {
      page: 1,
      limit: 5,
      sortBy: "createdAt",
      sortOrder: "desc",
      status: "unresolved",
    }
  );
  const { data: announcements, isLoading: announcementsLoading } =
    useAnnouncements({
      page: 1,
      limit: 5,
      // sortBy: "createdAt",
      // sortOrder: "desc",
    });
  const { data: systemSettings, isLoading: settingsLoading } =
    useSystemSettings();

  // User management mutations
  const lockUserMutation = useLockUser();
  const unlockUserMutation = useUnlockUser();
  const disableUserMutation = useDisableUser();
  const enableUserMutation = useEnableUser();
  const deleteUserMutation = useDeleteUser();

  // Community management mutations
  const blockCommunityMutation = useBlockCommunity();
  const unblockCommunityMutation = useUnblockCommunity();
  const deleteCommunityMutation = useDeleteCommunity();

  // Moderation mutations
  const moderateContentMutation = useModerateContent();

  // Announcement mutations
  const deleteAnnouncementMutation = useDeleteAnnouncement();
  const toggleAnnouncementStatusMutation = useToggleAnnouncementStatus();

  // Settings mutations
  const updateSystemSettingsMutation = useUpdateSystemSettings();

  const formatNumber = (num: number) => {
    if (num >= 1000000) return (num / 1000000).toFixed(1) + "M";
    if (num >= 1000) return (num / 1000).toFixed(1) + "K";
    return num.toString();
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "active":
        return "bg-green-100 text-green-800 capitalize";
      case "locked":
        return "bg-yellow-100 text-yellow-800 capitalize";
      case "disabled":
        return "bg-red-100 text-red-800 capitalize";
      case "suspended":
        return "bg-orange-100 text-orange-800 capitalize";
      default:
        return "bg-gray-100 text-gray-800 capitalize";
    }
  };

  const getRoleColor = (role: string) => {
    switch (role) {
      case RoleEnums.SuperAdmin:
        return "bg-purple-100 text-purple-800 capitalize";
      case RoleEnums.Admin:
        return "bg-blue-100 text-blue-800 capitalize";
      case RoleEnums.Moderator:
        return "bg-green-100 text-green-800 capitalize";
      case RoleEnums.User:
        return "bg-gray-100 text-gray-800 capitalize";
      default:
        return "bg-gray-100 text-gray-800 capitalize";
    }
  };

  const getAnnouncementTypeColor = (type: string) => {
    switch (type) {
      case AnnouncementType.info:
        return "bg-blue-100 text-blue-800 capitalize";
      case AnnouncementType.warning:
        return "bg-yellow-100 text-yellow-800 capitalize";
      case AnnouncementType.error:
        return "bg-red-100 text-red-800 capitalize";
      case AnnouncementType.success:
        return "bg-green-100 text-green-800 capitalize";
      default:
        return "bg-gray-100 text-gray-800 capitalize";
    }
  };

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case AnnouncementPriority.urgent:
        return "bg-red-100 text-red-800 capitalize";
      case AnnouncementPriority.high:
        return "bg-orange-100 text-orange-800 capitalize";
      case AnnouncementPriority.normal:
        return "bg-blue-100 text-blue-800 capitalize";
      case AnnouncementPriority.low:
        return "bg-gray-100 text-gray-800 capitalize";
      default:
        return "bg-gray-100 text-gray-800 capitalize";
    }
  };

  // User action handlers
  const handleLockUser = async (userId: string) => {
    try {
      await lockUserMutation.mutateAsync({
        id: userId,
        lockData: { reason: "Account locked by admin" },
      });
    } catch (error) {
      console.error("Failed to lock user:", error);
    }
  };

  const handleUnlockUser = async (userId: string) => {
    try {
      await unlockUserMutation.mutateAsync(userId);
    } catch (error) {
      console.error("Failed to unlock user:", error);
    }
  };

  const handleDisableUser = async (userId: string) => {
    try {
      await disableUserMutation.mutateAsync({
        id: userId,
        disableData: { reason: "Account disabled by admin" },
      });
    } catch (error) {
      console.error("Failed to disable user:", error);
    }
  };

  const handleEnableUser = async (userId: string) => {
    try {
      await enableUserMutation.mutateAsync(userId);
    } catch (error) {
      console.error("Failed to enable user:", error);
    }
  };

  const handleDeleteUser = async (userId: string) => {
    if (
      confirm(
        "Are you sure you want to delete this user? This action cannot be undone."
      )
    ) {
      try {
        await deleteUserMutation.mutateAsync({
          id: userId,
          deleteData: { reason: "User deleted by admin" },
        });
      } catch (error) {
        console.error("Failed to delete user:", error);
      }
    }
  };

  // Community action handlers
  const handleBlockCommunity = async (communityId: string) => {
    try {
      await blockCommunityMutation.mutateAsync({
        id: communityId,
        blockData: { reason: "Community blocked by admin" },
      });
    } catch (error) {
      console.error("Failed to block community:", error);
    }
  };

  const handleUnblockCommunity = async (communityId: string) => {
    try {
      await unblockCommunityMutation.mutateAsync(communityId);
    } catch (error) {
      console.error("Failed to unblock community:", error);
    }
  };

  const handleDeleteCommunity = async (communityId: string) => {
    if (
      confirm(
        "Are you sure you want to delete this community? This action cannot be undone."
      )
    ) {
      try {
        await deleteCommunityMutation.mutateAsync({
          id: communityId,
          deleteData: { reason: "Community deleted by admin" },
        });
      } catch (error) {
        console.error("Failed to delete community:", error);
      }
    }
  };

  // Moderation action handlers
  const handleModerateContent = async (
    contentId: string,
    reportAction: string,
    contentAction?: "delete" | "block" | "keep"
  ) => {
    try {
      await moderateContentMutation.mutateAsync({
        reportId: contentId,
        moderationData: {
          action: reportAction as ReportAction,
          reason: `Content ${reportAction}ed by admin`,
          contentAction: contentAction,
        },
      });
    } catch (error) {
      console.error(`Failed to ${reportAction} content:`, error);
    }
  };

  // Announcement action handlers
  const handleToggleAnnouncementStatus = async (announcementId: string) => {
    try {
      await toggleAnnouncementStatusMutation.mutateAsync(announcementId);
    } catch (error) {
      console.error("Failed to toggle announcement status:", error);
    }
  };

  const handleDeleteAnnouncement = async (announcementId: string) => {
    if (
      confirm(
        "Are you sure you want to delete this announcement? This action cannot be undone."
      )
    ) {
      try {
        await deleteAnnouncementMutation.mutateAsync(announcementId);
      } catch (error) {
        console.error("Failed to delete announcement:", error);
      }
    }
  };

  // Settings action handlers
  const handleSaveSettings = async () => {
    try {
      const formData = {
        maxAudioDuration: parseInt(
          (document.getElementById("maxAudioDuration") as HTMLInputElement)
            ?.value || "0"
        ),
        maxFileSize: parseInt(
          (document.getElementById("maxFileSize") as HTMLInputElement)?.value ||
            "0"
        ),
        maxTagsPerPost: parseInt(
          (document.getElementById("maxTagsPerPost") as HTMLInputElement)
            ?.value || "0"
        ),
        maxPostsPerDay: parseInt(
          (document.getElementById("maxPostsPerDay") as HTMLInputElement)
            ?.value || "0"
        ),
        autoModerationEnabled:
          (document.getElementById("autoModeration") as HTMLInputElement)
            ?.checked || false,
        contentFilteringEnabled:
          (document.getElementById("contentFiltering") as HTMLInputElement)
            ?.checked || false,
        maintenanceMode:
          (document.getElementById("maintenanceMode") as HTMLInputElement)
            ?.checked || false,
        maintenanceMessage:
          (document.getElementById("maintenanceMessage") as HTMLInputElement)
            ?.value || "",
      };

      await updateSystemSettingsMutation.mutateAsync(formData);
    } catch (error) {
      console.error("Failed to save settings:", error);
    }
  };

  return (
    <div className="flex-1 space-y-6 p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
          <p className="text-muted-foreground">
            VoiceCast Admin Panel - Monitor and manage your platform
          </p>
        </div>
      </div>

      {/* API Status Banner */}

      {/* Period Selector */}

      {/* Error Display */}
      {analyticsError && (
        <div className="bg-red-50 border border-red-200 rounded-md p-4">
          <div className="flex">
            <div className="flex-shrink-0">
              <svg
                className="h-5 w-5 text-red-400"
                viewBox="0 0 20 20"
                fill="currentColor"
              >
                <path
                  fillRule="evenodd"
                  d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                  clipRule="evenodd"
                />
              </svg>
            </div>
            <div className="ml-3">
              <h3 className="text-sm font-medium text-red-800">
                Analytics Error
              </h3>
              <div className="mt-2 text-sm text-red-700">
                <p>
                  Failed to load analytics data. Using fallback data instead.
                </p>
                <p className="mt-1">Error: {analyticsError.message}</p>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Development Mode Indicator */}
      {process.env.NODE_ENV === "development" &&
        !analytics &&
        !analyticsLoading && (
          <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
            <div className="flex">
              <div className="flex-shrink-0">
                <svg
                  className="h-5 w-5 text-blue-400"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fillRule="evenodd"
                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
                    clipRule="evenodd"
                  />
                </svg>
              </div>
              <div className="ml-3">
                <h3 className="text-sm font-medium text-blue-800">
                  Development Mode
                </h3>
                <div className="mt-2 text-sm text-blue-700">
                  <p>
                    Using mock analytics data for development. Backend API is
                    not available.
                  </p>
                </div>
              </div>
            </div>
          </div>
        )}

      {/* Main Tabs */}
      <Tabs
        value={currentTab}
        onValueChange={setCurrentTab}
        className="space-y-6"
      >
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="users">Users</TabsTrigger>
          <TabsTrigger value="communities">Communities</TabsTrigger>
          <TabsTrigger value="moderation">Moderation</TabsTrigger>
          {/* <TabsTrigger value="announcements">Announcements</TabsTrigger>
          <TabsTrigger value="settings">Settings</TabsTrigger> */}
        </TabsList>

        {/* Overview Tab */}
        <TabsContent value="overview" className="space-y-6">
          {/* Analytics Cards */}
          {analyticsLoading ? (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {[...Array(4)]?.map((_, i) => (
                <Card key={i} className="animate-pulse">
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">
                      Loading...
                    </CardTitle>
                    <div className="h-4 w-4 bg-gray-200 rounded"></div>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">--</div>
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : (
            <div>
              <div className="flex items-center space-x-2 mb-4">
                <Label htmlFor="period">Time Period:</Label>
                <select
                  id="period"
                  value={selectedPeriod}
                  onChange={(e) => setSelectedPeriod(e.target.value)}
                  className="border rounded-md px-3 py-1 text-sm"
                >
                  <option value="7d">Last 7 days</option>
                  <option value="30d">Last 30 days</option>
                  <option value="90d">Last 90 days</option>
                  <option value="1y">Last year</option>
                </select>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">
                      Total Users
                    </CardTitle>
                    <Users className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">
                      {formatNumber(safeAnalytics.users.total)}
                    </div>
                    <p className="text-xs text-muted-foreground">
                      +{formatNumber(safeAnalytics.users.new)} new this period
                    </p>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">
                      Total Posts
                    </CardTitle>
                    <MessageSquare className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">
                      {formatNumber(safeAnalytics.posts.total)}
                    </div>
                    <p className="text-xs text-muted-foreground">
                      +{formatNumber(safeAnalytics.posts.new)} new this period
                    </p>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">
                      Communities
                    </CardTitle>
                    <Users2 className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">
                      {formatNumber(safeAnalytics.communities.total)}
                    </div>
                    <p className="text-xs text-muted-foreground">
                      +{formatNumber(safeAnalytics.communities.new)} new this
                      period
                    </p>
                  </CardContent>
                </Card>

                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">
                      Reports
                    </CardTitle>
                    <Flag className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">
                      {formatNumber(safeAnalytics.reports.total)}
                    </div>
                    <p className="text-xs text-muted-foreground">
                      {formatNumber(safeAnalytics.reports.pending ?? 0)} pending
                    </p>
                  </CardContent>
                </Card>
              </div>
            </div>
          )}

          {/* Engagement Metrics */}
          {safeAnalytics && (
            <Card className="">
              <CardHeader>
                <CardTitle>Engagement Metrics</CardTitle>
                <CardDescription>
                  Platform engagement over the selected period
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="text-center">
                    <div className="text-3xl font-bold text-blue-600">
                      {formatNumber(safeAnalytics.engagement.totalLikes)}
                    </div>
                    <p className="text-sm text-muted-foreground">Total Likes</p>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-bold text-green-600">
                      {formatNumber(safeAnalytics.engagement.totalReplies)}
                    </div>
                    <p className="text-sm text-muted-foreground">
                      Total Replies
                    </p>
                  </div>
                </div>
              </CardContent>
            </Card>
          )}

          {/* Recent Activity */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Recent Users */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Users className="h-5 w-5 mr-2" />
                  Recent Users
                </CardTitle>
              </CardHeader>
              <CardContent>
                {usersLoading ? (
                  <div className="space-y-3">
                    {[...Array(3)]?.map((_, i) => (
                      <div
                        key={i}
                        className="flex items-center space-x-3 animate-pulse"
                      >
                        <div className="h-8 w-8 bg-gray-200 rounded-full"></div>
                        <div className="space-y-2 flex-1">
                          <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                          <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="space-y-3">
                    {usersData?.data?.users?.slice(0, 5)?.map((user) => (
                      <div
                        key={user._id}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center space-x-3">
                          <div className="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center">
                            <span className="text-xs font-medium">
                              {user?.fullName?.charAt(0).toUpperCase() || "U"}
                            </span>
                          </div>
                          <div>
                            <p className="text-sm font-medium">
                              {user?.fullName || "Anonymous"}
                            </p>
                            <p className="text-xs text-muted-foreground">
                              {user.email}
                            </p>
                          </div>
                        </div>
                        <div className="flex items-center space-x-2">
                          <Badge
                            className={`${getRoleColor(user.role)} capitalize`}
                          >
                            {user.role}
                          </Badge>
                          <Badge
                            className={`${getStatusColor(
                              user.isLocked
                                ? "locked"
                                : user.isDisabled
                                ? "disabled"
                                : "active"
                            )} capitalize`}
                          >
                            {user.isLocked
                              ? "Locked"
                              : user.isDisabled
                              ? "Disabled"
                              : "Active"}
                          </Badge>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Recent Communities */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center">
                  <Users2 className="h-5 w-5 mr-2" />
                  Recent Communities
                </CardTitle>
              </CardHeader>
              <CardContent>
                {communitiesLoading ? (
                  <div className="space-y-3">
                    {[...Array(3)]?.map((_, i) => (
                      <div key={i} className="space-y-2 animate-pulse">
                        <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                        <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="space-y-3">
                    {communitiesData?.data?.communities
                      ?.slice(0, 5)
                      ?.map((community) => (
                        <div key={community._id} className="space-y-2">
                          <div className="flex items-center justify-between">
                            <h4 className="text-sm font-medium">
                              {community.name}
                            </h4>
                            <Badge
                              variant={
                                community.isBlocked ? "destructive" : "default"
                              }
                              className="capitalize"
                            >
                              {community.isBlocked ? "Blocked" : "Active"}
                            </Badge>
                          </div>
                          <p className="text-xs text-muted-foreground line-clamp-2">
                            {community.description}
                          </p>
                          <div className="flex items-center space-x-4 text-xs text-muted-foreground">
                            <span>{community.membersCount} members</span>
                            <span>{community.postsCount} posts</span>
                          </div>
                        </div>
                      ))}
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* Users Tab */}
        <TabsContent value="users" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>User Management</CardTitle>
              {/* <CardDescription>
                Manage platform users and their permissions
              </CardDescription> */}
            </CardHeader>
            <CardContent>
              {/* <div className="flex items-center space-x-2 mb-4">
                <div className="relative flex-1">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="Search users..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-8"
                  />
                </div>
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Filter
                </Button>
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Add User
                </Button>
              </div> */}

              {usersLoading ? (
                <div className="space-y-3">
                  {[...Array(5)]?.map((_, i) => (
                    <div
                      key={i}
                      className="flex items-center justify-between p-3 border rounded-lg animate-pulse"
                    >
                      <div className="flex items-center space-x-3">
                        <div className="h-10 w-10 bg-gray-200 rounded-full"></div>
                        <div className="space-y-2">
                          <div className="h-4 bg-gray-200 rounded w-32"></div>
                          <div className="h-3 bg-gray-200 rounded w-24"></div>
                        </div>
                      </div>
                      <div className="flex space-x-2">
                        <div className="h-8 w-16 bg-gray-200 rounded"></div>
                        <div className="h-8 w-16 bg-gray-200 rounded"></div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="space-y-3">
                  {usersData?.data?.users?.map((user) => (
                    <div
                      key={user._id}
                      className="flex items-center justify-between p-3 border rounded-lg"
                    >
                      <div className="flex items-center space-x-3">
                        {/* <div className="h-10 w-10 bg-gray-200 rounded-full flex items-center justify-center">
                          <span className="text-sm font-medium">
                            {user?.fullName && user.fullName.length > 0 ? user.fullName.charAt(0).toUpperCase() : "U"}
                          </span>
                        </div> */}
                        <Avatar>
                          <AvatarImage
                            src={user.profile?.profilePicture?.url}
                          />
                          <AvatarFallback>
                            {user?.fullName && user.fullName.length > 0
                              ? user.fullName.charAt(0).toUpperCase()
                              : "U"}
                          </AvatarFallback>
                        </Avatar>
                        <div>
                          <h4 className="font-medium">{user.fullName}</h4>
                          <p className="text-sm text-muted-foreground">
                            {user.email}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center space-x-2">
                        {/* <Badge className={getRoleColor(user.role)}>
                          {user.role}
                        </Badge> */}
                        <Badge
                          className={`${getStatusColor(
                            user.isLocked
                              ? "locked"
                              : user.isDisabled
                              ? "disabled"
                              : "active"
                          )} capitalize`}
                        >
                          {user.isLocked
                            ? "Locked"
                            : user.isDisabled
                            ? "Disabled"
                            : "Active"}
                        </Badge>
                        {user.isLocked ? (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleUnlockUser(user._id)}
                            disabled={unlockUserMutation.isPending}
                          >
                            <Unlock className="h-4 w-4" />
                          </Button>
                        ) : (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleLockUser(user._id)}
                            disabled={lockUserMutation.isPending}
                          >
                            <Lock className="h-4 w-4" />
                          </Button>
                        )}
                        {user.isDisabled ? (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleEnableUser(user._id)}
                            disabled={enableUserMutation.isPending}
                          >
                            <UserCheck className="h-4 w-4" />
                          </Button>
                        ) : (
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleDisableUser(user._id)}
                            disabled={disableUserMutation.isPending}
                          >
                            <UserX className="h-4 w-4" />
                          </Button>
                        )}
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleDeleteUser(user._id)}
                          disabled={deleteUserMutation.isPending}
                        >
                          <Trash2 className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Communities Tab */}
        <TabsContent value="communities" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Community Management</CardTitle>
              <CardDescription>
                Manage platform communities and their settings
              </CardDescription>
            </CardHeader>
            <CardContent>
              {/* <div className="flex items-center space-x-2 mb-4">
                <Button variant="outline">
                  <Filter className="h-4 w-4 mr-2" />
                  Filter
                </Button>
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Create Community
                </Button>
              </div> */}

              {communitiesLoading ? (
                <div className="space-y-3">
                  {[...Array(5)]?.map((_, i) => (
                    <div
                      key={i}
                      className="p-4 border rounded-lg animate-pulse"
                    >
                      <div className="space-y-2">
                        <div className="h-5 bg-gray-200 rounded w-1/3"></div>
                        <div className="h-4 bg-gray-200 rounded w-2/3"></div>
                        <div className="flex space-x-2">
                          <div className="h-6 w-16 bg-gray-200 rounded"></div>
                          <div className="h-6 w-16 bg-gray-200 rounded"></div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="space-y-3">
                  {communitiesData?.data?.communities?.map((community) => (
                    <div key={community._id} className="p-4 border rounded-lg">
                      <div className="flex items-start justify-between">
                        <div className="space-y-2">
                          <h4 className="font-medium">{community.name}</h4>
                          <p className="text-sm text-muted-foreground">
                            {community.description}
                          </p>
                          <div className="flex items-center space-x-4 text-sm text-muted-foreground">
                            <span>{community.membersCount} members</span>
                            <span>{community.postsCount} posts</span>
                            <span>
                              Created by{" "}
                              {community.createdBy?.fullName || "N/A"}
                            </span>
                          </div>
                          {community.tags && community.tags.length > 0 && (
                            <div className="flex space-x-1">
                              {community.tags?.map((tag, i) => (
                                <Badge
                                  key={i}
                                  variant="secondary"
                                  className="text-xs capitalize"
                                >
                                  {typeof tag === "string" ? tag : tag.tag}
                                </Badge>
                              ))}
                            </div>
                          )}
                        </div>
                        <div className="flex items-center space-x-2">
                          <Badge
                            className="capitalize"
                            variant={
                              community.isBlocked ? "destructive" : "default"
                            }
                          >
                            {community.isBlocked ? "Blocked" : "Active"}
                          </Badge>
                          {/* <Button variant="outline" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button> */}
                          {community.isBlocked ? (
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() =>
                                handleUnblockCommunity(community._id)
                              }
                              disabled={unblockCommunityMutation.isPending}
                            >
                              <Eye className="h-4 w-4" />
                            </Button>
                          ) : (
                            <Button
                              variant="outline"
                              size="sm"
                              onClick={() =>
                                handleBlockCommunity(community._id)
                              }
                              disabled={blockCommunityMutation.isPending}
                            >
                              <EyeOff className="h-4 w-4" />
                            </Button>
                          )}
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() => handleDeleteCommunity(community._id)}
                            disabled={deleteCommunityMutation.isPending}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Moderation Tab */}
        <TabsContent value="moderation" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Content Moderation</CardTitle>
              <CardDescription>
                Review and moderate flagged content
              </CardDescription>
            </CardHeader>
            <CardContent>
              {flaggedLoading ? (
                <div className="space-y-3">
                  {[...Array(3)]?.map((_, i) => (
                    <div
                      key={i}
                      className="p-4 border rounded-lg animate-pulse"
                    >
                      <div className="space-y-2">
                        <div className="h-4 bg-gray-200 rounded w-1/2"></div>
                        <div className="h-3 bg-gray-200 rounded w-3/4"></div>
                        <div className="flex space-x-2">
                          <div className="h-6 w-20 bg-gray-200 rounded"></div>
                          <div className="h-6 w-16 bg-gray-200 rounded"></div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="space-y-3">
                  {(flaggedContent?.data?.flaggedContent || []).length > 0 ? (
                    (flaggedContent?.data?.flaggedContent || []).map(
                      (flaggedItem) => (
                        <div
                          key={flaggedItem._id.contentId}
                          className="p-4 border rounded-lg w-full"
                        >
                          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
                            <div className="space-y-2 flex-1">
                              <div className="flex items-center space-x-2">
                                <Badge className="capitalize" variant="outline">
                                  {flaggedItem.contentType}
                                </Badge>
                                <Badge
                                  className={`capitalize ${
                                    flaggedItem.status === "resolved"
                                      ? "gradient-badge"
                                      : ""
                                  }`}
                                  variant={
                                    flaggedItem.status === "unresolved"
                                      ? "destructive"
                                      : flaggedItem.status === "resolved"
                                      ? "default"
                                      : "secondary"
                                  }
                                >
                                  {flaggedItem.status}
                                </Badge>
                                <Badge
                                  className="capitalize"
                                  variant="secondary"
                                >
                                  {flaggedItem.reportCount} report
                                  {flaggedItem.reportCount !== 1 ? "s" : ""}
                                </Badge>
                              </div>
                              <p className="text-sm font-medium">
                                Content ID: {flaggedItem.contentId}
                              </p>
                              <p className="text-sm text-muted-foreground">
                                Latest Report:{" "}
                                {new Date(
                                  flaggedItem.latestReportDate
                                ).toLocaleDateString()}
                              </p>

                              {/* Display the actual reported content */}
                              {flaggedItem.content && (
                                <div className="space-y-2 p-3 gradient-bg rounded-lg border w-full">
                                  <p className="text-sm font-medium text-primary">
                                    Reported Content:
                                  </p>

                                  {/* User Content */}
                                  {flaggedItem.contentType === "user" && (
                                    <div className="space-y-3">
                                      <div className="flex items-center space-x-3">
                                        {flaggedItem.content
                                          .profilePictureData && (
                                          <img
                                            src={
                                              flaggedItem.content
                                                .profilePictureData.url
                                            }
                                            alt={flaggedItem.content.fullName}
                                            className="w-12 h-12 rounded-full object-cover"
                                          />
                                        )}
                                        <div className="flex-1">
                                          <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
                                            <span className="text-sm font-medium">
                                              Name:{" "}
                                              {flaggedItem.content.fullName}
                                            </span>
                                          </div>
                                          <div className="text-xs text-muted-foreground space-y-1">
                                            <p>
                                              User ID: {flaggedItem.content._id}
                                            </p>
                                            {flaggedItem.content.authData
                                              ?.email && (
                                              <p>
                                                Email:{" "}
                                                {
                                                  flaggedItem.content.authData
                                                    .email
                                                }
                                              </p>
                                            )}
                                            {flaggedItem.content.authData
                                              ?.role && (
                                              <p>
                                                Role:{" "}
                                                {
                                                  flaggedItem.content.authData
                                                    .role
                                                }
                                              </p>
                                            )}
                                            {flaggedItem.content
                                              .dateOfBirth && (
                                              <p>
                                                Date of Birth:{" "}
                                                {
                                                  flaggedItem.content
                                                    .dateOfBirth
                                                }
                                              </p>
                                            )}
                                            {flaggedItem.content.gender && (
                                              <p>
                                                Gender:{" "}
                                                {flaggedItem.content.gender}
                                              </p>
                                            )}
                                            {flaggedItem.content
                                              .profileVisibility && (
                                              <p>
                                                Profile Visibility:{" "}
                                                {
                                                  flaggedItem.content
                                                    .profileVisibility
                                                }
                                              </p>
                                            )}
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  )}

                                  {/* Post Content */}
                                  {flaggedItem.contentType === "post" &&
                                  "audioUrl" in flaggedItem.content ? (
                                    <div className="space-y-2">
                                      <div className="flex items-center space-x-2">
                                        <span className="text-sm font-medium">
                                          Author:{" "}
                                          {flaggedItem.content?.fullName}
                                        </span>
                                      </div>

                                      {flaggedItem.content.audioUrl ? (
                                        <div className="space-y-2 w-full">
                                          <div className="p-3 bg-muted/50 rounded-lg w-full">
                                            <div className="flex items-center justify-between mb-2">
                                              <span className="text-sm font-medium">
                                                {flaggedItem.content
                                                  ?.duration &&
                                                  formatDuration(
                                                    Number(
                                                      flaggedItem.content
                                                        ?.duration
                                                    )
                                                  )}
                                              </span>
                                            </div>
                                            {flaggedItem.content?.audioUrl && (
                                              <AudioPlayer
                                                src={
                                                  flaggedItem.content
                                                    ?.audioUrl || ""
                                                }
                                                onPlay={() => handlePlay()}
                                                onPause={handlePause}
                                                onEnded={handleEnded}
                                                onError={handleError}
                                                style={{
                                                  width: "100%",
                                                  borderRadius: "8px",
                                                }}
                                                className="custom-audio-player"
                                              />
                                            )}
                                          </div>
                                          <div className="text-xs text-muted-foreground">
                                            Post ID: {flaggedItem.content._id}
                                          </div>
                                        </div>
                                      ) : null}
                                    </div>
                                  ) : null}

                                  {/* Comment Content */}
                                  {flaggedItem.contentType === "comment" &&
                                  "text" in flaggedItem.content ? (
                                    <div className="space-y-2">
                                      <div className="flex items-center space-x-2">
                                        <span className="text-sm font-medium">
                                          Author:{" "}
                                          {(
                                            flaggedItem.content as {
                                              user?: { fullName: string };
                                            }
                                          )?.user?.fullName || "Unknown"}
                                        </span>
                                      </div>
                                      <div className="p-2 bg-white rounded border">
                                        <p className="text-sm">
                                          {(
                                            flaggedItem.content as {
                                              text?: string;
                                            }
                                          )?.text || "No text content"}
                                        </p>
                                      </div>
                                      <div className="text-xs text-muted-foreground">
                                        Comment ID: {flaggedItem.content._id}
                                      </div>
                                    </div>
                                  ) : null}
                                </div>
                              )}

                              {/* Display individual reports */}
                              {flaggedItem.reports &&
                              flaggedItem.reports.length > 0 ? (
                                <div className="space-y-2 w-full">
                                  <p className="text-sm font-medium">
                                    Reports:
                                  </p>
                                  {flaggedItem.reports.map((report) => (
                                    <div
                                      key={report._id}
                                      className="p-3 rounded-lg bg-primary w-full"
                                    >
                                      <div className="flex items-center space-x-2 mb-2">
                                        {report.reporter.profilePictureData && (
                                          <img
                                            src={
                                              report.reporter.profilePictureData
                                                .url
                                            }
                                            alt={report.reporter.fullName}
                                            className="w-6 h-6 rounded-full object-cover"
                                          />
                                        )}
                                        <p className="font-medium text-sm">
                                          Reporter: {report.reporter.fullName}
                                        </p>
                                      </div>
                                      <p className="text-xs mb-1">
                                        Reason: {report.reason}
                                      </p>
                                      <p className="text-xs">
                                        Reported:{" "}
                                        {new Date(
                                          report.createdAt
                                        ).toLocaleDateString()}
                                      </p>
                                    </div>
                                  ))}
                                </div>
                              ) : null}
                            </div>
                            <div className="flex flex-col space-y-2 lg:flex-shrink-0">
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() =>
                                  handleModerateContent(
                                    flaggedItem.contentId,
                                    "resolved",
                                    "keep"
                                  )
                                }
                                disabled={moderateContentMutation.isPending}
                                className="gradient-button"
                              >
                                Resolve & Keep
                              </Button>
                              <Button
                                variant="outline"
                                size="sm"
                                onClick={() =>
                                  handleModerateContent(
                                    flaggedItem.contentId,
                                    "dismissed",
                                    "keep"
                                  )
                                }
                                disabled={moderateContentMutation.isPending}
                                className="gradient-button"
                              >
                                Dismiss & Keep
                              </Button>
                              <Button
                                variant="destructive"
                                size="sm"
                                onClick={() =>
                                  handleModerateContent(
                                    flaggedItem.contentId,
                                    "resolved",
                                    "delete"
                                  )
                                }
                                disabled={moderateContentMutation.isPending}
                              >
                                Resolve & Delete
                              </Button>
                            </div>
                          </div>
                        </div>
                      )
                    )
                  ) : (
                    <div className="text-center py-8">
                      <div className="text-muted-foreground">
                        <Shield className="h-12 w-12 mx-auto mb-4 opacity-50" />
                        <p className="text-lg font-medium">
                          No flagged content yet
                        </p>
                        <p className="text-sm">
                          All content is clean and properly moderated
                        </p>
                      </div>
                    </div>
                  )}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Announcements Tab */}
        <TabsContent value="announcements" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>System Announcements</CardTitle>
              <CardDescription>
                Manage platform-wide announcements and notifications
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex items-center space-x-2 mb-4">
                <Button>
                  <Plus className="h-4 w-4 mr-2" />
                  Create Announcement
                </Button>
              </div>

              {announcementsLoading ? (
                <div className="space-y-3">
                  {[...Array(3)]?.map((_, i) => (
                    <div
                      key={i}
                      className="p-4 border rounded-lg animate-pulse"
                    >
                      <div className="space-y-2">
                        <div className="h-5 bg-gray-200 rounded w-1/2"></div>
                        <div className="h-4 bg-gray-200 rounded w-3/4"></div>
                        <div className="flex space-x-2">
                          <div className="h-6 w-20 bg-gray-200 rounded"></div>
                          <div className="h-6 w-16 bg-gray-200 rounded"></div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="space-y-3">
                  {announcements?.announcements?.map((announcement) => (
                    <div
                      key={announcement._id}
                      className="p-4 border rounded-lg"
                    >
                      <div className="flex items-start justify-between">
                        <div className="space-y-2">
                          <div className="flex items-center space-x-2">
                            <h4 className="font-medium">
                              {announcement.title}
                            </h4>
                            <Badge
                              className={getAnnouncementTypeColor(
                                announcement.type
                              )}
                            >
                              {announcement.type}
                            </Badge>
                            <Badge
                              className={getPriorityColor(
                                announcement.priority
                              )}
                            >
                              {announcement.priority}
                            </Badge>
                            <Badge
                              className="capitalize"
                              variant={
                                announcement.isActive ? "default" : "secondary"
                              }
                            >
                              {announcement.isActive ? "Active" : "Inactive"}
                            </Badge>
                          </div>
                          <p className="text-sm text-muted-foreground">
                            {announcement.message}
                          </p>
                          <p className="text-xs text-muted-foreground">
                            Target: {announcement.targetAudience} • Created:{" "}
                            {new Date(
                              announcement.createdAt
                            ).toLocaleDateString()}
                          </p>
                        </div>
                        <div className="flex space-x-2">
                          <Button variant="outline" size="sm">
                            <Edit className="h-4 w-4" />
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() =>
                              handleToggleAnnouncementStatus(announcement._id)
                            }
                            disabled={
                              toggleAnnouncementStatusMutation.isPending
                            }
                          >
                            {announcement.isActive ? (
                              <EyeOff className="h-4 w-4" />
                            ) : (
                              <Eye className="h-4 w-4" />
                            )}
                          </Button>
                          <Button
                            variant="outline"
                            size="sm"
                            onClick={() =>
                              handleDeleteAnnouncement(announcement._id)
                            }
                            disabled={deleteAnnouncementMutation.isPending}
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>

        {/* Settings Tab */}
        <TabsContent value="settings" className="space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>System Settings</CardTitle>
              <CardDescription>
                Configure platform-wide settings and preferences
              </CardDescription>
            </CardHeader>
            <CardContent>
              {settingsLoading ? (
                <div className="space-y-4">
                  {[...Array(6)]?.map((_, i) => (
                    <div key={i} className="space-y-2 animate-pulse">
                      <div className="h-4 bg-gray-200 rounded w-1/3"></div>
                      <div className="h-10 bg-gray-200 rounded"></div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="space-y-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <Label htmlFor="maxAudioDuration">
                        Max Audio Duration (seconds)
                      </Label>
                      <Input
                        id="maxAudioDuration"
                        type="number"
                        defaultValue={systemSettings?.maxAudioDuration}
                        className="w-full"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="maxFileSize">Max File Size (bytes)</Label>
                      <Input
                        id="maxFileSize"
                        type="number"
                        defaultValue={systemSettings?.maxFileSize}
                        className="w-full"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="maxTagsPerPost">Max Tags Per Post</Label>
                      <Input
                        id="maxTagsPerPost"
                        type="number"
                        defaultValue={systemSettings?.maxTagsPerPost}
                        className="w-full"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="maxPostsPerDay">Max Posts Per Day</Label>
                      <Input
                        id="maxPostsPerDay"
                        type="number"
                        defaultValue={systemSettings?.maxPostsPerDay}
                        className="w-full"
                      />
                    </div>
                  </div>

                  <Separator />

                  <div className="space-y-4">
                    <div className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id="autoModeration"
                        defaultChecked={systemSettings?.autoModerationEnabled}
                        className="rounded"
                      />
                      <Label htmlFor="autoModeration">
                        Enable Auto Moderation
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id="contentFiltering"
                        defaultChecked={systemSettings?.contentFilteringEnabled}
                        className="rounded"
                      />
                      <Label htmlFor="contentFiltering">
                        Enable Content Filtering
                      </Label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id="maintenanceMode"
                        defaultChecked={systemSettings?.maintenanceMode}
                        className="rounded"
                      />
                      <Label htmlFor="maintenanceMode">Maintenance Mode</Label>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="maintenanceMessage">
                      Maintenance Message
                    </Label>
                    <Input
                      id="maintenanceMessage"
                      defaultValue={systemSettings?.maintenanceMessage}
                      placeholder="System is under maintenance..."
                      className="w-full"
                    />
                  </div>

                  <div className="flex justify-end">
                    <Button
                      onClick={handleSaveSettings}
                      disabled={updateSystemSettingsMutation.isPending}
                    >
                      {updateSystemSettingsMutation.isPending
                        ? "Saving..."
                        : "Save Settings"}
                    </Button>
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}