"use client";

import { useCallback, useEffect, useMemo, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Alert, AlertDescription } from "@/components/ui/alert";
import {
  Calendar,
  BookOpenText,
  Eye,
  CheckCircle,
  XCircle,
  Pencil,
  Plus,
  Send,
  Trash2,
  Loader2,
} from "lucide-react";
import { apiRequest, apiUrl, mediaUrl } from "@/lib/api";
import { getLocalizedApiMessage } from "@/lib/api-message";
import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
import { AdminTableToolbar } from "@/components/admin/admin-table-toolbar";
import { AdminActionButton } from "@/components/admin/admin-action-button";
import { AdminTablePagination } from "@/components/admin/admin-table-pagination";
import { useLanguage } from "@/lib/i18n";

type BlogStatus = "draft" | "submitted" | "approved" | "rejected";
type BlogStatusFilter = BlogStatus | "all";
type ValidationErrors = Record<string, string[]>;

type ApiListItem = {
  id?: number | string;
  uuid?: string;
  title?: string;
  name?: string;
  email?: string;
  profile_image?: string | null;
};

type BlogMedia = {
  uuid?: string;
  file_path?: string;
  file_type?: string;
  status?: string;
};

type AdminBlog = {
  id: number | string;
  uuid: string;
  title: string;
  title_hi?: string | null;
  slug: string;
  content?: string | null;
  content_hi?: string | null;
  banner_image?: string | null;
  read_time?: number | string | null;
  status: BlogStatus | string;
  published_at?: string | null;
  meta_title?: string | null;
  meta_description?: string | null;
  meta_keywords?: string | null;
  canonical_url?: string | null;
  meta_robots?: string | null;
  og_title?: string | null;
  og_description?: string | null;
  og_image?: string | null;
  og_type?: string | null;
  guide_id?: number | string | null;
  guide_uuid?: string | null;
  created_by?: string | null;
  created_at?: string | null;
  categories?: ApiListItem[];
  media?: BlogMedia[];
  author?: ApiListItem | null;
  created_by_admin?: ApiListItem | null;
  author_name?: string | null;
  author_profile_image?: string | null;
};

type PaginatedBlogs = {
  current_page: number;
  data: AdminBlog[];
  per_page: number;
  total: number;
  from?: number | null;
  to?: number | null;
  last_page?: number;
};

type StatusCounts = {
  total: number;
  draft: number;
  submitted: number;
  approved: number;
  rejected: number;
};

type BlogsResponse = {
  statusCode: number;
  success: boolean;
  data?: {
    blogs?: PaginatedBlogs;
    status_counts?: StatusCounts;
  };
  message?: string;
  message_hi?: string;
};

type BlogActionResponse = {
  statusCode: number;
  success: boolean;
  data?:
    | {
        blog?: AdminBlog;
      }
    | ValidationErrors
    | [];
  message?: string;
  message_hi?: string;
};

type BlogOptionsResponse = {
  statusCode: number;
  success: boolean;
  data?: {
    categories?: ApiListItem[];
  };
  message?: string;
  message_hi?: string;
};

type BlogForm = {
  title: string;
  title_hi: string;
  slug: string;
  content: string;
  content_hi: string;
  banner_image: string;
  read_time: string;
  status: BlogStatus;
  meta_title: string;
  meta_description: string;
  meta_keywords: string;
  canonical_url: string;
  meta_robots: string;
  og_title: string;
  og_description: string;
  og_image: string;
  og_type: string;
  category_uuids: string[];
};

const emptyPagination: PaginatedBlogs = {
  current_page: 1,
  data: [],
  per_page: 10,
  total: 0,
  from: null,
  to: null,
  last_page: 1,
};

const emptyCounts: StatusCounts = {
  total: 0,
  draft: 0,
  submitted: 0,
  approved: 0,
  rejected: 0,
};

const emptyForm: BlogForm = {
  title: "",
  title_hi: "",
  slug: "",
  content: "",
  content_hi: "",
  banner_image: "",
  read_time: "0",
  status: "draft",
  meta_title: "",
  meta_description: "",
  meta_keywords: "",
  canonical_url: "",
  meta_robots: "index,follow",
  og_title: "",
  og_description: "",
  og_image: "",
  og_type: "article",
  category_uuids: [],
};

const UTTARAKHAND_TOURISM_AUTHOR = "Uttarakhand Tourism";

function getAdminToken() {
  const token = localStorage.getItem("auth_token");

  if (!token) {
    throw new Error("Admin token missing. Please login again.");
  }

  return token;
}

function normalizeStatus(value: string | null): BlogStatusFilter {
  if (value === "pending") return "submitted";
  if (value === "all") return "all";
  if (
    value === "draft" ||
    value === "submitted" ||
    value === "approved" ||
    value === "rejected"
  ) {
    return value;
  }

  return "all";
}

function getItemLabel(item?: ApiListItem | null) {
  if (!item) return "-";
  return (
    item.title || item.name || item.email || String(item.id || item.uuid || "-")
  );
}

function getBlogAuthorName(blog: AdminBlog) {
  if (blog.guide_id == null || !blog.author) {
    return UTTARAKHAND_TOURISM_AUTHOR;
  }

  return blog.author_name || getItemLabel(blog.author || blog.created_by_admin);
}

function getBlogAuthorImage(blog: AdminBlog) {
  if (blog.guide_id == null || !blog.author) {
    return "";
  }

  return (
    blog.author_profile_image ||
    blog.author?.profile_image ||
    blog.created_by_admin?.profile_image ||
    ""
  );
}

function getItemUuid(item: ApiListItem) {
  return item.uuid || String(item.id || "");
}

function imageUrl(path?: string | null) {
  return mediaUrl(path);
}

function stripContent(content?: string | null) {
  return (content || "")
    .replace(/<[^>]+>/g, " ")
    .replace(/\s+/g, " ")
    .trim();
}

function formatDate(value?: string | null) {
  if (!value) return "-";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return date.toLocaleDateString();
}

function firstError(errors: ValidationErrors, field: string) {
  return errors[field]?.[0];
}

function getErrors(data: BlogActionResponse["data"]) {
  if (!data || Array.isArray(data) || typeof data !== "object") return {};
  if ("blog" in data) return {};
  return data as ValidationErrors;
}

function blogToForm(blog: AdminBlog): BlogForm {
  return {
    title: blog.title || "",
    title_hi: blog.title_hi || "",
    slug: blog.slug || "",
    content: blog.content || "",
    content_hi: blog.content_hi || "",
    banner_image: blog.banner_image || "",
    read_time: String(blog.read_time ?? 0),
    status:
      normalizeStatus(blog.status) === "all"
        ? "draft"
        : (normalizeStatus(blog.status) as BlogStatus),
    meta_title: blog.meta_title || "",
    meta_description: blog.meta_description || "",
    meta_keywords: blog.meta_keywords || "",
    canonical_url: blog.canonical_url || "",
    meta_robots: blog.meta_robots || "index,follow",
    og_title: blog.og_title || "",
    og_description: blog.og_description || "",
    og_image: blog.og_image || "",
    og_type: blog.og_type || "article",
    category_uuids: (blog.categories || []).map(getItemUuid).filter(Boolean),
  };
}

function getStatusBadge(status: string, labels: Record<string, string>) {
  const normalizedStatus = status.toLowerCase();
  const variants: Record<string, string> = {
    draft: "bg-gray-100 text-gray-700",
    submitted: "bg-[var(--theme-surface-strong)] text-[var(--theme-primary)]",
    approved: "bg-green-50 text-green-700",
    rejected: "bg-red-50 text-red-700",
  };

  return (
    <Badge
      className={`${variants[normalizedStatus] || "bg-gray-100 text-gray-700"} gap-1.5 rounded-full px-3 py-1 font-semibold shadow-none`}
    >
      <span className="h-1.5 w-1.5 rounded-full bg-current" />
      {labels[normalizedStatus] || normalizedStatus}
    </Badge>
  );
}

function getPageCount(pagination: PaginatedBlogs) {
  return (
    pagination.last_page ||
    Math.max(1, Math.ceil(pagination.total / pagination.per_page))
  );
}

function BlogInput({
  id,
  label,
  value,
  onChange,
  error,
  type = "text",
}: {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  error?: string;
  type?: string;
}) {
  return (
    <div className="space-y-2">
      <Label htmlFor={id} className="text-sm font-bold">
        {label}
      </Label>
      <Input
        id={id}
        type={type}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        className="rounded-xl border-[var(--theme-border-soft)] bg-[var(--theme-surface)]"
      />
      {error && <p className="text-xs font-semibold text-red-600">{error}</p>}
    </div>
  );
}

function BlogTextarea({
  id,
  label,
  value,
  onChange,
  error,
  rows = 3,
}: {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  error?: string;
  rows?: number;
}) {
  return (
    <div className="space-y-2">
      <Label htmlFor={id} className="text-sm font-bold">
        {label}
      </Label>
      <Textarea
        id={id}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        rows={rows}
        className="rounded-xl border-[var(--theme-border-soft)] bg-[var(--theme-surface)]"
      />
      {error && <p className="text-xs font-semibold text-red-600">{error}</p>}
    </div>
  );
}

export default function AdminBlogsPage() {
  const { t } = useLanguage();
  const router = useRouter();
  const searchParams = useSearchParams();
  const [blogs, setBlogs] = useState<AdminBlog[]>([]);
  const [pagination, setPagination] = useState<PaginatedBlogs>(emptyPagination);
  const [counts, setCounts] = useState<StatusCounts>(emptyCounts);
  const [categories, setCategories] = useState<ApiListItem[]>([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [editBlog, setEditBlog] = useState<AdminBlog | null>(null);
  const [deleteBlog, setDeleteBlog] = useState<AdminBlog | null>(null);
  const [form, setForm] = useState<BlogForm>(emptyForm);
  const [errors, setErrors] = useState<ValidationErrors>({});
  const [isLoading, setIsLoading] = useState(true);
  const [isSaving, setIsSaving] = useState(false);
  const [isStatusUpdating, setIsStatusUpdating] = useState(false);
  const [submittingBlogUuid, setSubmittingBlogUuid] = useState("");
  const [isDeleting, setIsDeleting] = useState(false);
  const [error, setError] = useState("");

  const activeStatus = normalizeStatus(searchParams.get("status"));
  const activePage = Number(searchParams.get("page") || 1);
  const statusLabels: Record<string, string> = {
    draft: t("admin.draft"),
    submitted: t("common.pending"),
    approved: t("admin.published"),
    rejected: t("common.rejected"),
  };

  const fetchBlogs = useCallback(
    async (status: BlogStatusFilter, page: number) => {
      setIsLoading(true);
      setError("");

      try {
        const token = getAdminToken();
        const params = new URLSearchParams({ page: String(page) });

        if (status !== "all") params.set("status", status);

        const response = await apiRequest(apiUrl(`/admin/blogs?${params}`), {
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
          },
        });
        const result = (await response.json()) as BlogsResponse;

        if (!response.ok || result.success === false) {
          throw new Error(
            getLocalizedApiMessage(result, "Failed to load blogs."),
          );
        }

        setBlogs(result.data?.blogs?.data || []);
        setPagination(result.data?.blogs || emptyPagination);
        setCounts(result.data?.status_counts || emptyCounts);
      } catch (fetchError) {
        setError(
          fetchError instanceof Error
            ? fetchError.message
            : "Failed to load blogs.",
        );
        setBlogs([]);
        setPagination(emptyPagination);
        setCounts(emptyCounts);
      } finally {
        setIsLoading(false);
      }
    },
    [],
  );

  const fetchOptions = useCallback(async () => {
    try {
      const token = getAdminToken();
      const response = await apiRequest(apiUrl("/admin/blogs/options"), {
        headers: {
          Authorization: `Bearer ${token}`,
          Accept: "application/json",
        },
      });
      const result = (await response.json()) as BlogOptionsResponse;

      if (!response.ok || result.success === false) return;
      setCategories(result.data?.categories || []);
    } catch {
      setCategories([]);
    }
  }, []);

  useEffect(() => {
    fetchBlogs(activeStatus, activePage);
  }, [activePage, activeStatus, fetchBlogs]);

  useEffect(() => {
    fetchOptions();
  }, [fetchOptions]);

  const filteredBlogs = useMemo(() => {
    const query = searchTerm.trim().toLowerCase();
    if (!query) return blogs;

    return blogs.filter((blog) => {
      const author = getBlogAuthorName(blog).toLowerCase();
      const categoryText = (blog.categories || [])
        .map(getItemLabel)
        .join(" ")
        .toLowerCase();

      return (
        blog.title.toLowerCase().includes(query) ||
        author.includes(query) ||
        categoryText.includes(query) ||
        blog.slug.toLowerCase().includes(query)
      );
    });
  }, [blogs, searchTerm]);

  const updateListUrl = (status: BlogStatusFilter, page = 1) => {
    const params = new URLSearchParams({ page: String(page) });
    if (status !== "all") params.set("status", status);
    router.push(`/admin/blogs?${params}`);
  };

  const setField = (field: keyof BlogForm, value: string) => {
    setForm((current) => ({ ...current, [field]: value }));
    setErrors((current) => ({ ...current, [field]: [] }));
  };

  const toggleCategory = (uuid: string) => {
    setForm((current) => {
      const selected = current.category_uuids;
      return {
        ...current,
        category_uuids: selected.includes(uuid)
          ? selected.filter((value) => value !== uuid)
          : [...selected, uuid],
      };
    });
    setErrors((current) => ({ ...current, category_uuids: [] }));
  };

  const openEdit = (blog: AdminBlog) => {
    setEditBlog(blog);
    setForm(blogToForm(blog));
    setErrors({});
  };

  const closeEdit = () => {
    setEditBlog(null);
    setForm(emptyForm);
    setErrors({});
  };

  const saveBlog = async () => {
    if (!editBlog) return;

    setIsSaving(true);
    setErrors({});
    setError("");

    try {
      const token = getAdminToken();
      const response = await apiRequest(
        apiUrl(`/admin/blogs/${editBlog.uuid}`),
        {
          method: "PUT",
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            ...form,
            read_time: form.read_time || 0,
          }),
        },
      );
      const result = (await response.json()) as BlogActionResponse;

      if (!response.ok || result.success === false) {
        setErrors(getErrors(result.data));
        throw new Error(
          getLocalizedApiMessage(result, "Failed to update blog."),
        );
      }

      closeEdit();
      await fetchBlogs(activeStatus, activePage);
    } catch (saveError) {
      setError(
        saveError instanceof Error
          ? saveError.message
          : "Failed to update blog.",
      );
    } finally {
      setIsSaving(false);
    }
  };

  const changeStatus = async (blog: AdminBlog, status: BlogStatus) => {
    setIsStatusUpdating(true);
    setError("");

    try {
      const token = getAdminToken();
      const response = await apiRequest(
        apiUrl(`/admin/blogs/${blog.uuid}/change-status`),
        {
          method: "POST",
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ status }),
        },
      );
      const result = (await response.json()) as BlogActionResponse;

      if (!response.ok || result.success === false) {
        throw new Error(
          getLocalizedApiMessage(result, "Failed to update blog status."),
        );
      }

      await fetchBlogs(activeStatus, activePage);
    } catch (statusError) {
      setError(
        statusError instanceof Error
          ? statusError.message
          : "Failed to update blog status.",
      );
    } finally {
      setIsStatusUpdating(false);
    }
  };

  const submitForReview = async (blog: AdminBlog) => {
    if (!blog.uuid) {
      setError("Blog UUID not found.");
      return;
    }

    setSubmittingBlogUuid(blog.uuid);
    setError("");

    try {
      const token = getAdminToken();
      const response = await apiRequest(
        apiUrl(
          `/admin/blogs/${encodeURIComponent(blog.uuid)}/mark-as-submitted`,
        ),
        {
          method: "POST",
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
          },
        },
      );
      const result = (await response.json()) as BlogActionResponse;

      if (!response.ok || result.success === false) {
        throw new Error(
          getLocalizedApiMessage(result, "Failed to submit blog for review."),
        );
      }

      await fetchBlogs(activeStatus, activePage);
    } catch (submitError) {
      setError(
        submitError instanceof Error
          ? submitError.message
          : "Failed to submit blog for review.",
      );
    } finally {
      setSubmittingBlogUuid("");
    }
  };

  const removeBlog = async () => {
    if (!deleteBlog) return;

    setIsDeleting(true);
    setError("");

    try {
      const token = getAdminToken();
      const response = await apiRequest(
        apiUrl(`/admin/blogs/${deleteBlog.uuid}`),
        {
          method: "DELETE",
          headers: {
            Authorization: `Bearer ${token}`,
            Accept: "application/json",
          },
        },
      );
      const result = (await response.json()) as BlogActionResponse;

      if (!response.ok || result.success === false) {
        throw new Error(
          getLocalizedApiMessage(result, "Failed to delete blog."),
        );
      }

      setDeleteBlog(null);
      await fetchBlogs(activeStatus, activePage);
    } catch (deleteError) {
      setError(
        deleteError instanceof Error
          ? deleteError.message
          : "Failed to delete blog.",
      );
    } finally {
      setIsDeleting(false);
    }
  };

  const visibleFrom =
    pagination.from ??
    (pagination.total > 0
      ? (pagination.current_page - 1) * pagination.per_page + 1
      : 0);
  const visibleTo =
    pagination.to ??
    Math.min(pagination.total, pagination.current_page * pagination.per_page);

  return (
    <div className="space-y-6">
      <AdminBreadcrumb current="Blog Management" />

      <div className="flex flex-col gap-3 rounded-3xl border border-[var(--theme-border)] bg-white p-5 shadow-sm sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-black text-foreground">
            Blog Management
          </h1>
          <p className="mt-1 text-sm font-medium text-muted-foreground">
            Create, review, approve, reject, and edit blog posts.
          </p>
        </div>
        <Button asChild>
          <Link href="/admin/blogs/new">
            <Plus className="mr-2 h-4 w-4" />
            New Blog Post
          </Link>
        </Button>
      </div>

      <Card className="overflow-hidden rounded-3xl border-[var(--theme-border-soft)] bg-white py-0 shadow-sm">
        <AdminTableToolbar
          stats={[
            {
              label: t("admin.total"),
              count: counts.total,
              icon: <BookOpenText className="h-4 w-4" />,
              active: activeStatus === "all",
              onClick: () => updateListUrl("all"),
            },
            {
              label: t("admin.active"),
              count: counts.approved,
              icon: <CheckCircle className="h-4 w-4" />,
              tone: "success",
              active: activeStatus === "approved",
              onClick: () => updateListUrl("approved"),
            },
            {
              label: t("admin.inactive"),
              count: counts.draft + counts.submitted + counts.rejected,
              icon: <XCircle className="h-4 w-4" />,
              tone: "danger",
              active: activeStatus === "submitted",
              onClick: () => updateListUrl("submitted"),
            },
          ]}
          searchValue={searchTerm}
          searchPlaceholder={t("admin.searchBlogs")}
          onSearchChange={setSearchTerm}
        />
        <CardContent className="p-0">
          {error && (
            <Alert className="m-6 border-red-200 bg-red-50 text-red-700">
              <AlertDescription>{error}</AlertDescription>
            </Alert>
          )}

          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow className="bg-[var(--theme-surface)]">
                  <TableHead className="min-w-[420px] px-5 py-4">
                    Blog
                  </TableHead>
                  <TableHead className="min-w-[260px]">Categories</TableHead>
                  <TableHead className="min-w-[160px]">Author</TableHead>
                  <TableHead>Blog Status</TableHead>
                  <TableHead>Read Time</TableHead>
                  <TableHead className="min-w-[150px]">Date</TableHead>
                  <TableHead className="min-w-[220px] text-right">
                    Admin Approval
                  </TableHead>
                  <TableHead className="min-w-[260px] text-right">
                    {t("common.actions")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {isLoading && (
                  <TableRow>
                    <TableCell
                      colSpan={8}
                      className="h-28 text-center text-muted-foreground"
                    >
                      {t("admin.loadingBlogs")}
                    </TableCell>
                  </TableRow>
                )}

                {!isLoading &&
                  filteredBlogs.map((blog) => {
                    const banner = imageUrl(blog.banner_image);
                    const authorName = getBlogAuthorName(blog);
                    const authorImage = imageUrl(getBlogAuthorImage(blog));

                    return (
                      <TableRow key={blog.uuid || blog.id}>
                        <TableCell className="min-w-[420px] px-5 py-4">
                          <div className="flex items-center gap-3">
                            {banner ? (
                              <img
                                src={banner}
                                alt={blog.title}
                                className="h-16 w-24 shrink-0 rounded-xl object-cover"
                              />
                            ) : (
                              <div className="flex h-16 w-24 shrink-0 items-center justify-center rounded-xl bg-[var(--theme-surface)] text-xs font-bold text-muted-foreground">
                                {t("admin.noImage")}
                              </div>
                            )}
                            <div className="min-w-0 flex-1">
                              <div className="line-clamp-1 max-w-[280px] font-semibold leading-5 text-foreground">
                                {blog.title}
                              </div>
                              <div className="line-clamp-1 max-w-[280px] text-sm text-muted-foreground">
                                {stripContent(blog.content)}
                              </div>
                            </div>
                          </div>
                        </TableCell>
                        <TableCell className="min-w-[260px] align-middle">
                          {blog.categories?.length ? (
                            <div className="flex max-w-[260px] flex-wrap items-center gap-1.5">
                              {blog.categories.map((category) => (
                                <Badge
                                  key={getItemUuid(category)}
                                  variant="outline"
                                  title={getItemLabel(category)}
                                  className="inline-flex h-7 max-w-[150px] items-center rounded-full px-2.5 text-xs font-semibold leading-none shadow-none"
                                >
                                  <span className="truncate">
                                    {getItemLabel(category)}
                                  </span>
                                </Badge>
                              ))}
                            </div>
                          ) : (
                            <span className="text-sm text-muted-foreground">
                              -
                            </span>
                          )}
                        </TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            {authorImage ? (
                              <img
                                src={authorImage}
                                alt={authorName}
                                className="h-8 w-8 rounded-full object-cover"
                              />
                            ) : (
                              <span className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--theme-surface-strong)] text-xs font-bold text-slate-600">
                                {authorName.slice(0, 1).toUpperCase()}
                              </span>
                            )}
                            <span className="font-medium">{authorName}</span>
                          </div>
                        </TableCell>
                        <TableCell>
                          {getStatusBadge(blog.status, statusLabels)}
                        </TableCell>
                        <TableCell className="text-sm font-medium text-muted-foreground">
                          {blog.read_time ? `${blog.read_time} min` : "-"}
                        </TableCell>
                        <TableCell className="text-sm font-medium text-muted-foreground">
                          <span className="inline-flex items-center gap-2">
                            <Calendar className="h-3.5 w-3.5" />
                            {formatDate(blog.published_at || blog.created_at)}
                          </span>
                        </TableCell>
                        <TableCell>
                          <div className="flex flex-wrap justify-end gap-2">
                            {blog.status === "submitted" ? (
                              <>
                                <Button
                                  size="sm"
                                  className="rounded-xl bg-green-600 font-bold text-white hover:bg-green-700"
                                  disabled={isStatusUpdating}
                                  onClick={() => changeStatus(blog, "approved")}
                                >
                                  <CheckCircle className="mr-1 h-4 w-4" />
                                  Approve
                                </Button>
                                <Button
                                  size="sm"
                                  variant="destructive"
                                  className="rounded-xl"
                                  disabled={isStatusUpdating}
                                  onClick={() => changeStatus(blog, "rejected")}
                                >
                                  <XCircle className="mr-1 h-4 w-4" />
                                  Reject
                                </Button>
                              </>
                            ) : blog.status === "approved" ||
                              blog.status === "published" ? (
                              <Button
                                size="sm"
                                variant="destructive"
                                className="rounded-xl"
                                disabled={isStatusUpdating}
                                onClick={() => changeStatus(blog, "rejected")}
                              >
                                <XCircle className="mr-1 h-4 w-4" />
                                Reject
                              </Button>
                            ) : blog.status === "rejected" ? (
                              <Button
                                size="sm"
                                className="rounded-xl bg-green-600 font-bold text-white hover:bg-green-700"
                                disabled={isStatusUpdating}
                                onClick={() => changeStatus(blog, "approved")}
                              >
                                <CheckCircle className="mr-1 h-4 w-4" />
                                Approve
                              </Button>
                            ) : (
                              <span className="text-sm font-medium text-muted-foreground">
                                -
                              </span>
                            )}
                          </div>
                        </TableCell>
                        <TableCell>
                          <div className="flex flex-wrap justify-end gap-2">
                            <Button
                              asChild
                              variant="ghost"
                              size="icon"
                              className="h-9 w-9 rounded-lg bg-[var(--theme-surface-strong)] text-slate-600 shadow-none hover:bg-[var(--theme-highlight)] hover:text-[var(--theme-primary)]"
                            >
                              <Link
                                href={`/blogs/${encodeURIComponent(blog.slug || String(blog.uuid || blog.id))}`}
                                target="_blank"
                                rel="noopener noreferrer"
                                aria-label={t("admin.preview")}
                                title={t("admin.preview")}
                              >
                                <Eye className="h-4 w-4" />
                              </Link>
                            </Button>
                            <Button
                              asChild
                              variant="ghost"
                              size="icon"
                              className="h-9 w-9 rounded-lg bg-[#f2ece2] text-[#6b5b4f] shadow-none hover:bg-[#eadfce] hover:text-[#f56a00]"
                            >
                              <Link
                                href={`/admin/blogs/${encodeURIComponent(blog.uuid)}/edit`}
                                aria-label="Edit"
                                title="Edit"
                              >
                                <Pencil className="h-4 w-4" />
                              </Link>
                            </Button>
                            {blog.status === "draft" && (
                              <Button
                                size="sm"
                                variant="secondary"
                                className="rounded-xl"
                                disabled={submittingBlogUuid === blog.uuid}
                                onClick={() => submitForReview(blog)}
                              >
                                {submittingBlogUuid === blog.uuid ? (
                                  <Loader2 className="mr-1 h-4 w-4 animate-spin" />
                                ) : (
                                  <Send className="mr-1 h-4 w-4" />
                                )}
                                Submit
                              </Button>
                            )}
                            <AdminActionButton
                              icon={Trash2}
                              label={t("common.delete")}
                              tone="danger"
                              onClick={() => setDeleteBlog(blog)}
                            />
                          </div>
                        </TableCell>
                      </TableRow>
                    );
                  })}

                {!isLoading && filteredBlogs.length === 0 && (
                  <TableRow>
                    <TableCell
                      colSpan={8}
                      className="h-28 text-center text-muted-foreground"
                    >
                      {t("admin.noBlogsFound")}
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
          <AdminTablePagination
            total={pagination.total}
            pageSize={pagination.per_page}
            currentPage={pagination.current_page}
            totalPages={getPageCount(pagination)}
            from={visibleFrom}
            to={visibleTo}
            isLoading={isLoading}
            onPageChange={(page) => updateListUrl(activeStatus, page)}
          />
        </CardContent>
      </Card>

      <Dialog
        open={Boolean(editBlog)}
        onOpenChange={(open) => {
          if (!open) closeEdit();
        }}
      >
        <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-5xl">
          <DialogHeader>
            <DialogTitle>Edit Blog Post</DialogTitle>
            <DialogDescription>
              Update blog content, status, categories, and SEO metadata.
            </DialogDescription>
          </DialogHeader>

          <div className="space-y-6">
            <div className="grid gap-4 md:grid-cols-2">
              <BlogInput
                id="blog-title"
                label="Title"
                value={form.title}
                onChange={(value) => setField("title", value)}
                error={firstError(errors, "title")}
              />
              <BlogInput
                id="blog-title-hi"
                label="Title in Hindi"
                value={form.title_hi}
                onChange={(value) => setField("title_hi", value)}
                error={firstError(errors, "title_hi")}
              />
              <BlogInput
                id="blog-slug"
                label="Slug"
                value={form.slug}
                onChange={(value) => setField("slug", value)}
                error={firstError(errors, "slug")}
              />
              <BlogInput
                id="blog-banner"
                label="Banner Image Path"
                value={form.banner_image}
                onChange={(value) => setField("banner_image", value)}
                error={firstError(errors, "banner_image")}
              />
              <BlogInput
                id="blog-read-time"
                label="Read Time"
                type="number"
                value={form.read_time}
                onChange={(value) => setField("read_time", value)}
                error={firstError(errors, "read_time")}
              />
              <div className="space-y-2">
                <Label htmlFor="blog-status" className="text-sm font-bold">
                  Status
                </Label>
                <select
                  id="blog-status"
                  value={form.status}
                  onChange={(event) => setField("status", event.target.value)}
                  className="h-10 w-full rounded-xl border border-[var(--theme-border-soft)] bg-[var(--theme-surface)] px-3 text-sm"
                >
                  <option value="draft">Draft</option>
                  <option value="submitted">Pending</option>
                  <option value="approved">Published</option>
                  <option value="rejected">Rejected</option>
                </select>
                {firstError(errors, "status") && (
                  <p className="text-xs font-semibold text-red-600">
                    {firstError(errors, "status")}
                  </p>
                )}
              </div>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <BlogTextarea
                id="blog-content"
                label="Content"
                value={form.content}
                onChange={(value) => setField("content", value)}
                error={firstError(errors, "content")}
                rows={6}
              />
              <BlogTextarea
                id="blog-content-hi"
                label="Content in Hindi"
                value={form.content_hi}
                onChange={(value) => setField("content_hi", value)}
                error={firstError(errors, "content_hi")}
                rows={6}
              />
            </div>

            <div className="space-y-3">
              <Label className="text-sm font-bold">Categories</Label>
              <div className="grid max-h-40 gap-2 overflow-y-auto rounded-2xl border border-[var(--theme-border-soft)] bg-[var(--theme-surface)] p-3 md:grid-cols-3">
                {categories.map((category) => {
                  const uuid = getItemUuid(category);
                  return (
                    <label
                      key={uuid}
                      className="flex cursor-pointer items-center gap-2 rounded-xl bg-white px-3 py-2 text-sm font-semibold"
                    >
                      <Checkbox
                        checked={form.category_uuids.includes(uuid)}
                        onCheckedChange={() => toggleCategory(uuid)}
                      />
                      {getItemLabel(category)}
                    </label>
                  );
                })}
                {categories.length === 0 && (
                  <p className="text-sm text-muted-foreground">
                    No categories available.
                  </p>
                )}
              </div>
              {firstError(errors, "category_uuids") && (
                <p className="text-xs font-semibold text-red-600">
                  {firstError(errors, "category_uuids")}
                </p>
              )}
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <BlogInput
                id="blog-meta-title"
                label="Meta Title"
                value={form.meta_title}
                onChange={(value) => setField("meta_title", value)}
                error={firstError(errors, "meta_title")}
              />
              <BlogInput
                id="blog-canonical"
                label="Canonical URL"
                value={form.canonical_url}
                onChange={(value) => setField("canonical_url", value)}
                error={firstError(errors, "canonical_url")}
              />
              <BlogTextarea
                id="blog-meta-description"
                label="Meta Description"
                value={form.meta_description}
                onChange={(value) => setField("meta_description", value)}
                error={firstError(errors, "meta_description")}
              />
              <BlogTextarea
                id="blog-meta-keywords"
                label="Meta Keywords"
                value={form.meta_keywords}
                onChange={(value) => setField("meta_keywords", value)}
                error={firstError(errors, "meta_keywords")}
              />
              <BlogInput
                id="blog-meta-robots"
                label="Meta Robots"
                value={form.meta_robots}
                onChange={(value) => setField("meta_robots", value)}
                error={firstError(errors, "meta_robots")}
              />
              <BlogInput
                id="blog-og-type"
                label="OG Type"
                value={form.og_type}
                onChange={(value) => setField("og_type", value)}
                error={firstError(errors, "og_type")}
              />
              <BlogInput
                id="blog-og-title"
                label="OG Title"
                value={form.og_title}
                onChange={(value) => setField("og_title", value)}
                error={firstError(errors, "og_title")}
              />
              <BlogInput
                id="blog-og-image"
                label="OG Image"
                value={form.og_image}
                onChange={(value) => setField("og_image", value)}
                error={firstError(errors, "og_image")}
              />
              <div className="md:col-span-2">
                <BlogTextarea
                  id="blog-og-description"
                  label="OG Description"
                  value={form.og_description}
                  onChange={(value) => setField("og_description", value)}
                  error={firstError(errors, "og_description")}
                />
              </div>
            </div>
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={closeEdit}
              disabled={isSaving}
            >
              Cancel
            </Button>
            <Button
              type="button"
              onClick={saveBlog}
              disabled={isSaving}
              className="bg-[var(--theme-primary)] hover:bg-[var(--theme-accent-dark)]"
            >
              {isSaving ? "Saving..." : "Save Blog"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog
        open={Boolean(deleteBlog)}
        onOpenChange={(open) => !open && setDeleteBlog(null)}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Blog Post</DialogTitle>
            <DialogDescription>
              This will remove the blog post from admin listings.
            </DialogDescription>
          </DialogHeader>
          <p className="text-sm font-semibold">{deleteBlog?.title}</p>
          <DialogFooter>
            <Button
              type="button"
              variant="outline"
              onClick={() => setDeleteBlog(null)}
              disabled={isDeleting}
            >
              Cancel
            </Button>
            <Button
              type="button"
              variant="destructive"
              onClick={removeBlog}
              disabled={isDeleting}
            >
              {isDeleting ? "Deleting..." : "Delete"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}