"use client";

import { useCallback, useEffect, useRef, useState } from "react";

import { NoPermissionState } from "@/components/auth/no-permission-state";
import { useSuperAdminSession } from "@/components/auth/session-context";
import { PageHeader } from "@/components/dashboard/page-header";
import { PaginationControls } from "@/components/dashboard/pagination-controls";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { useToast } from "@/components/ui/toast";
import { listModerationComments } from "@/lib/api/comments";
import { getItems, getPagination } from "@/lib/api/core";
import { listModerationPosts } from "@/lib/api/posts";
import {
  deleteSuperAdminComment,
  deleteSuperAdminPost,
  getSuperAdminReports,
  performSuperAdminBulkAction,
  updateSuperAdminCommentStatus,
  updateSuperAdminPostStatus,
} from "@/lib/api/superadmin";
import { formatDateTime } from "@/lib/format";
import { getCommentAuthor, getPostAuthor, getUserLabel } from "@/lib/post-utils";
import { SUPERADMIN_PERMISSIONS, hasPermission } from "@/lib/permissions";
import type {
  ApiComment,
  ApiPost,
  CommentsResponse,
  ModerationStatus,
  PostsResponse,
  SuperAdminReportsResponse,
} from "@/types/api";

type BulkTarget = "post" | "comment";
type BulkAction = "activate" | "flag" | "hide" | "delete";

const EMPTY_REPORTS: SuperAdminReportsResponse = {
  summary: {
    flaggedPostsCount: 0,
    flaggedCommentsCount: 0,
    disabledUsersCount: 0,
    inactiveListingsCount: 0,
    inactiveRepairShopsCount: 0,
    openCasesCount: 0,
    failedOutboxEventsCount: 0,
    pendingOutboxEventsCount: 0,
  },
  flaggedPosts: [],
  flaggedComments: [],
  disabledUsers: [],
  inactiveListings: [],
  inactiveRepairShops: [],
};

function promptReason(actionLabel: string) {
  if (typeof window === "undefined") {
    return "";
  }

  const result = window.prompt(`Optional reason for ${actionLabel}`, "");
  if (result === null) {
    return null;
  }

  return result.trim();
}

export default function ContentPage() {
  const { permissions } = useSuperAdminSession();
  const [query, setQuery] = useState("");
  const [postType, setPostType] = useState("all");
  const [visibility, setVisibility] = useState("all");
  const [moderationStatus, setModerationStatus] = useState("all");
  const [postsResponse, setPostsResponse] = useState<PostsResponse | null>(null);
  const [commentsResponse, setCommentsResponse] = useState<CommentsResponse | null>(null);
  const [reports, setReports] = useState<SuperAdminReportsResponse>(EMPTY_REPORTS);
  const [loading, setLoading] = useState(true);
  const [postsPage, setPostsPage] = useState(1);
  const [commentsPage, setCommentsPage] = useState(1);
  const [selectedPostIds, setSelectedPostIds] = useState<string[]>([]);
  const [selectedCommentIds, setSelectedCommentIds] = useState<string[]>([]);
  const [bulkTarget, setBulkTarget] = useState<BulkTarget>("post");
  const [bulkAction, setBulkAction] = useState<BulkAction>("flag");
  const [bulkReason, setBulkReason] = useState("");
  const [bulkLoading, setBulkLoading] = useState(false);
  const { toast } = useToast();
  const filtersRef = useRef({ query, postType, visibility, moderationStatus });

  const canModerateContent = hasPermission(
    permissions,
    SUPERADMIN_PERMISSIONS.CONTENT_MODERATE,
  );
  const canReadAnalytics = hasPermission(permissions, SUPERADMIN_PERMISSIONS.ANALYTICS_READ);
  const canUseBulkActions =
    canModerateContent && hasPermission(permissions, SUPERADMIN_PERMISSIONS.CASES_MANAGE);

  filtersRef.current = { query, postType, visibility, moderationStatus };

  const loadContent = useCallback(async () => {
    if (!canModerateContent) {
      setLoading(false);
      return;
    }

    const {
      query: currentQuery,
      postType: currentPostType,
      visibility: currentVisibility,
      moderationStatus: currentModerationStatus,
    } = filtersRef.current;

    setLoading(true);
    try {
      const [posts, comments, nextReports] = await Promise.all([
        listModerationPosts({
          page: postsPage,
          limit: 10,
          q: currentQuery || undefined,
          postType: currentPostType === "all" ? undefined : currentPostType,
          visibility: currentVisibility === "all" ? undefined : currentVisibility,
          moderationStatus:
            currentModerationStatus === "all" ? undefined : currentModerationStatus,
          sortBy: "createdAt",
          sortOrder: "desc",
        }),
        listModerationComments({
          page: commentsPage,
          limit: 10,
          q: currentQuery || undefined,
          moderationStatus:
            currentModerationStatus === "all" ? undefined : currentModerationStatus,
          sortOrder: "desc",
        }),
        canReadAnalytics ? getSuperAdminReports({ limit: 6 }) : Promise.resolve(EMPTY_REPORTS),
      ]);
      setPostsResponse(posts);
      setCommentsResponse(comments);
      setReports(nextReports);
    } catch (error) {
      toast({ title: "Failed to load content", description: String(error), variant: "danger" });
    } finally {
      setLoading(false);
    }
  }, [canModerateContent, canReadAnalytics, commentsPage, postsPage, toast]);

  useEffect(() => {
    void loadContent();
  }, [loadContent]);

  const applyFilters = () => {
    const shouldReloadDirectly = postsPage === 1 && commentsPage === 1;
    setPostsPage(1);
    setCommentsPage(1);
    if (shouldReloadDirectly) {
      void loadContent();
    }
  };

  const posts = getItems(postsResponse) as ApiPost[];
  const comments = getItems(commentsResponse) as ApiComment[];
  const bulkIds = bulkTarget === "post" ? selectedPostIds : selectedCommentIds;

  const updatePostStatus = async (postId: string, status: ModerationStatus) => {
    const reason = promptReason(`post ${status}`);
    if (reason === null) return;

    try {
      await updateSuperAdminPostStatus(postId, status, reason || undefined);
      await loadContent();
      toast({ title: "Post updated", description: `${postId} -> ${status}`, variant: "success" });
    } catch (error) {
      toast({ title: "Post update failed", description: String(error), variant: "danger" });
    }
  };

  const updateCommentStatus = async (commentId: string, status: ModerationStatus) => {
    const reason = promptReason(`comment ${status}`);
    if (reason === null) return;

    try {
      await updateSuperAdminCommentStatus(commentId, status, reason || undefined);
      await loadContent();
      toast({ title: "Comment updated", description: `${commentId} -> ${status}`, variant: "success" });
    } catch (error) {
      toast({ title: "Comment update failed", description: String(error), variant: "danger" });
    }
  };

  const toggleSelection = (kind: BulkTarget, id: string) => {
    const setter = kind === "post" ? setSelectedPostIds : setSelectedCommentIds;
    setter((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]));
  };

  if (!canModerateContent) {
    return (
      <div className="space-y-5 pb-8">
        <PageHeader
          title="Content moderation"
          subtitle="Review posts and comments, update moderation states, and run bulk actions."
        />
        <NoPermissionState description="This page needs the content.moderate permission." />
      </div>
    );
  }

  return (
    <div className="space-y-5 pb-8">
      <PageHeader
        title="Content moderation"
        subtitle="Review posts and comments, update moderation states, and run bulk actions."
        actions={
          <Button variant="outline" onClick={applyFilters}>
            Apply filters
          </Button>
        }
      />

      {canReadAnalytics ? (
        <section className="grid gap-4 md:grid-cols-4 xl:grid-cols-7">
          <Card>
            <CardHeader>
              <CardTitle>Flagged posts</CardTitle>
            </CardHeader>
            <CardContent className="text-3xl font-bold text-foreground">
              {reports.summary.flaggedPostsCount}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Flagged comments</CardTitle>
            </CardHeader>
            <CardContent className="text-3xl font-bold text-foreground">
              {reports.summary.flaggedCommentsCount}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Disabled users</CardTitle>
            </CardHeader>
            <CardContent className="text-3xl font-bold text-foreground">
              {reports.summary.disabledUsersCount}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Inactive listings</CardTitle>
            </CardHeader>
            <CardContent className="text-3xl font-bold text-foreground">
              {reports.summary.inactiveListingsCount}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Inactive shops</CardTitle>
            </CardHeader>
            <CardContent className="text-3xl font-bold text-foreground">
              {reports.summary.inactiveRepairShopsCount}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Open cases</CardTitle>
            </CardHeader>
            <CardContent className="text-3xl font-bold text-foreground">
              {reports.summary.openCasesCount}
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Failed outbox</CardTitle>
            </CardHeader>
            <CardContent className="text-3xl font-bold text-foreground">
              {reports.summary.failedOutboxEventsCount}
            </CardContent>
          </Card>
        </section>
      ) : null}

      <Card>
        <CardHeader>
          <CardTitle>Filters</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-3 md:grid-cols-5">
          <Input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search text or identity" />
          <Select value={postType} onValueChange={setPostType}>
            <SelectTrigger>
              <SelectValue placeholder="Post type" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All post types</SelectItem>
              <SelectItem value="text">text</SelectItem>
              <SelectItem value="image">image</SelectItem>
              <SelectItem value="video">video</SelectItem>
              <SelectItem value="audio">audio</SelectItem>
            </SelectContent>
          </Select>
          <Select value={visibility} onValueChange={setVisibility}>
            <SelectTrigger>
              <SelectValue placeholder="Visibility" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All visibility</SelectItem>
              <SelectItem value="public">public</SelectItem>
              <SelectItem value="followers">followers</SelectItem>
              <SelectItem value="private">private</SelectItem>
            </SelectContent>
          </Select>
          <Select value={moderationStatus} onValueChange={setModerationStatus}>
            <SelectTrigger>
              <SelectValue placeholder="Moderation state" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All states</SelectItem>
              <SelectItem value="active">active</SelectItem>
              <SelectItem value="hidden">hidden</SelectItem>
              <SelectItem value="flagged">flagged</SelectItem>
            </SelectContent>
          </Select>
          <Button variant="outline" onClick={applyFilters}>
            Apply
          </Button>
        </CardContent>
      </Card>

      {canUseBulkActions ? (
        <Card>
          <CardHeader>
            <CardTitle>Bulk actions</CardTitle>
          </CardHeader>
          <CardContent className="grid gap-3 md:grid-cols-4">
            <Select value={bulkTarget} onValueChange={(value) => setBulkTarget(value as BulkTarget)}>
              <SelectTrigger>
                <SelectValue placeholder="Target type" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="post">posts</SelectItem>
                <SelectItem value="comment">comments</SelectItem>
              </SelectContent>
            </Select>
            <Select value={bulkAction} onValueChange={(value) => setBulkAction(value as BulkAction)}>
              <SelectTrigger>
                <SelectValue placeholder="Action" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="activate">activate</SelectItem>
                <SelectItem value="flag">flag</SelectItem>
                <SelectItem value="hide">hide</SelectItem>
                <SelectItem value="delete">delete</SelectItem>
              </SelectContent>
            </Select>
            <Input value={bulkReason} onChange={(event) => setBulkReason(event.target.value)} placeholder="Reason for audit/case log" />
            <Button
              disabled={bulkLoading || !bulkIds.length}
              onClick={async () => {
                setBulkLoading(true);
                try {
                  await performSuperAdminBulkAction({
                    resourceType: bulkTarget,
                    targetIds: bulkIds,
                    action: bulkAction,
                    reason: bulkReason || undefined,
                    assignToMe: true,
                  });
                  setSelectedPostIds([]);
                  setSelectedCommentIds([]);
                  setBulkReason("");
                  await loadContent();
                  toast({ title: "Bulk action applied", description: `${bulkIds.length} items processed`, variant: "success" });
                } catch (error) {
                  toast({ title: "Bulk action failed", description: String(error), variant: "danger" });
                } finally {
                  setBulkLoading(false);
                }
              }}
            >
              Apply to {bulkIds.length} selected
            </Button>
          </CardContent>
        </Card>
      ) : null}

      <section className="grid gap-4 xl:grid-cols-12">
        <Card className="xl:col-span-7">
          <CardHeader>
            <CardTitle>Posts</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {!posts.length && !loading ? (
              <EmptyState title="No posts" description="No posts matched the current filters." />
            ) : (
              <Table>
                <TableHeader>
                  <TableRow>
                    {canUseBulkActions ? <TableHead /> : null}
                    <TableHead>Content</TableHead>
                    <TableHead>Author</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>State</TableHead>
                    <TableHead>Engagement</TableHead>
                    <TableHead>Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {posts.map((post) => (
                    <TableRow key={post._id}>
                      {canUseBulkActions ? (
                        <TableCell>
                          <input
                            type="checkbox"
                            checked={selectedPostIds.includes(post._id)}
                            onChange={() => toggleSelection("post", post._id)}
                          />
                        </TableCell>
                      ) : null}
                      <TableCell className="max-w-[240px] truncate">{post.content || "-"}</TableCell>
                      <TableCell>{getUserLabel(getPostAuthor(post))}</TableCell>
                      <TableCell>{post.postType ?? "-"}</TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            post.moderationStatus === "flagged"
                              ? "warning"
                              : post.moderationStatus === "hidden"
                                ? "danger"
                                : "success"
                          }
                        >
                          {post.moderationStatus ?? "active"}
                        </Badge>
                      </TableCell>
                      <TableCell>
                        {post.likesCount ?? 0}/{post.commentsCount ?? 0}/{post.shareCount ?? 0}
                      </TableCell>
                      <TableCell className="flex flex-wrap gap-2">
                        <Button size="sm" variant="outline" onClick={() => void updatePostStatus(post._id, "active")}>
                          Activate
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => void updatePostStatus(post._id, "flagged")}>
                          Flag
                        </Button>
                        <Button size="sm" variant="outline" onClick={() => void updatePostStatus(post._id, "hidden")}>
                          Hide
                        </Button>
                        <Button
                          size="sm"
                          variant="danger"
                          onClick={async () => {
                            try {
                              await deleteSuperAdminPost(post._id);
                              await loadContent();
                              toast({ title: "Post deleted", description: post._id, variant: "warning" });
                            } catch (error) {
                              toast({ title: "Delete failed", description: String(error), variant: "danger" });
                            }
                          }}
                        >
                          Delete
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            )}
            <PaginationControls pagination={getPagination(postsResponse)} loading={loading} onPageChange={setPostsPage} />
          </CardContent>
        </Card>

        <Card className="xl:col-span-5">
          <CardHeader>
            <CardTitle>Comments</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {!comments.length && !loading ? (
              <EmptyState title="No comments" description="No comments matched the current filters." />
            ) : (
              <div className="space-y-3">
                {comments.map((comment) => (
                  <div key={comment._id} className="rounded-xl border border-border/70 bg-secondary/20 p-4">
                    <div className="flex items-start justify-between gap-3">
                      <div>
                        <p className="text-sm font-medium text-foreground">
                            {getUserLabel(getCommentAuthor(comment))}
                        </p>
                        <p className="mt-1 text-xs text-muted-foreground">{formatDateTime(comment.createdAt)}</p>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge
                          variant={
                            comment.moderationStatus === "flagged"
                              ? "warning"
                              : comment.moderationStatus === "hidden"
                                ? "danger"
                                : "muted"
                          }
                        >
                          {comment.moderationStatus ?? "comment"}
                        </Badge>
                        {canUseBulkActions ? (
                          <input
                            type="checkbox"
                            checked={selectedCommentIds.includes(comment._id)}
                            onChange={() => toggleSelection("comment", comment._id)}
                          />
                        ) : null}
                      </div>
                    </div>
                    <p className="mt-3 text-sm text-foreground">{comment.content}</p>
                    <div className="mt-3 flex flex-wrap justify-end gap-2">
                      <Button size="sm" variant="outline" onClick={() => void updateCommentStatus(comment._id, "active")}>
                        Activate
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => void updateCommentStatus(comment._id, "flagged")}>
                        Flag
                      </Button>
                      <Button size="sm" variant="outline" onClick={() => void updateCommentStatus(comment._id, "hidden")}>
                        Hide
                      </Button>
                      <Button
                        size="sm"
                        variant="danger"
                        onClick={async () => {
                          try {
                            await deleteSuperAdminComment(comment._id);
                            await loadContent();
                            toast({ title: "Comment deleted", description: comment._id, variant: "warning" });
                          } catch (error) {
                            toast({ title: "Delete failed", description: String(error), variant: "danger" });
                          }
                        }}
                      >
                        Delete
                      </Button>
                    </div>
                  </div>
                ))}
              </div>
            )}
            <PaginationControls pagination={getPagination(commentsResponse)} loading={loading} onPageChange={setCommentsPage} />
          </CardContent>
        </Card>
      </section>
    </div>
  );
}