"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { Pencil, Trash2 } from "lucide-react";
import MainTitle from "@/components/layout/dashboard/main-title";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import DataService from "@/config/axios";
import { useRequireSuperAdmin } from "@/hooks/use-require-super-admin";
import { getApiErrorMessage } from "@/lib/api-error";
import { toast } from "sonner";

type Category = { _id: string; name: string; slug: string; description?: string };
type Blog = {
  _id: string;
  title: string;
  slug: string;
  excerpt?: string;
  content: string;
  status: "draft" | "published";
  category?: { _id: string; name: string; slug: string } | null;
  coverImage?: string;
  metaTitle?: string;
  metaDescription?: string;
  tags?: string[];
};

export default function AdminBlogsBlock() {
  const ready = useRequireSuperAdmin();
  const params = useParams();
  const app = params.app as string;

  const [loading, setLoading] = useState(true);
  const [categories, setCategories] = useState<Category[]>([]);
  const [blogs, setBlogs] = useState<Blog[]>([]);
  const [openCategory, setOpenCategory] = useState(false);
  const [editingCategory, setEditingCategory] = useState<Category | null>(null);
  const [categoryForm, setCategoryForm] = useState({ name: "", description: "" });

  const load = useCallback(async () => {
    try {
      const [cats, posts] = await Promise.all([
        DataService.get("/admin/blog-categories"),
        DataService.get("/admin/blogs"),
      ]);
      setCategories(cats.data?.data || []);
      setBlogs(posts.data?.data || []);
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Failed to load blog data"));
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (ready) load();
  }, [ready, load]);

  const resetCategoryForm = () => {
    setEditingCategory(null);
    setCategoryForm({ name: "", description: "" });
  };

  const saveCategory = async () => {
    try {
      if (!categoryForm.name.trim()) {
        toast.error("Category name is required");
        return;
      }
      if (editingCategory) {
        await DataService.patch(`/admin/blog-categories/${editingCategory._id}`, categoryForm);
        toast.success("Category updated");
      } else {
        await DataService.post("/admin/blog-categories", categoryForm);
        toast.success("Category created");
      }
      setOpenCategory(false);
      resetCategoryForm();
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not save category"));
    }
  };

  const removeCategory = async (category: Category) => {
    if (!confirm(`Delete category "${category.name}"?`)) return;
    try {
      await DataService.delete(`/admin/blog-categories/${category._id}`);
      toast.success("Category deleted");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not delete category"));
    }
  };

  const removeBlog = async (blog: Blog) => {
    if (!confirm(`Delete blog "${blog.title}"?`)) return;
    try {
      await DataService.delete(`/admin/blogs/${blog._id}`);
      toast.success("Blog deleted");
      load();
    } catch (e: unknown) {
      toast.error(getApiErrorMessage(e, "Could not delete blog"));
    }
  };

  if (!ready || loading) {
    return <div className="rounded-md border bg-white p-8 text-center text-gray-500">Loading…</div>;
  }

  return (
    <div className="space-y-6">
      <MainTitle title="Blog management (Super admin)" />

      <Tabs defaultValue="categories" className="w-full">
        <TabsList className="mb-4 w-full sm:w-auto">
          <TabsTrigger value="categories">Categories</TabsTrigger>
          <TabsTrigger value="blogs">Blogs</TabsTrigger>
        </TabsList>

        <TabsContent value="categories" className="mt-0 space-y-4">
          <div className="flex justify-end">
            <Button
              variant="outline"
              onClick={() => {
                resetCategoryForm();
                setOpenCategory(true);
              }}
            >
              Add category
            </Button>
          </div>
          <div className="rounded-md border bg-white">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Category</TableHead>
                  <TableHead>Slug</TableHead>
                  <TableHead className="w-[100px]" />
                </TableRow>
              </TableHeader>
              <TableBody>
                {categories.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={3} className="text-center text-gray-400">
                      No categories yet.
                    </TableCell>
                  </TableRow>
                ) : (
                  categories.map((c) => (
                    <TableRow key={c._id}>
                      <TableCell>{c.name}</TableCell>
                      <TableCell>{c.slug}</TableCell>
                      <TableCell className="flex gap-2">
                        <Button
                          variant="outline"
                          size="icon"
                          onClick={() => {
                            setEditingCategory(c);
                            setCategoryForm({ name: c.name, description: c.description || "" });
                            setOpenCategory(true);
                          }}
                        >
                          <Pencil className="size-4" />
                        </Button>
                        <Button variant="outline" size="icon" onClick={() => removeCategory(c)}>
                          <Trash2 className="size-4 text-red-600" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </TabsContent>

        <TabsContent value="blogs" className="mt-0 space-y-4">
          <div className="flex justify-end">
            <Button asChild>
              <Link href={`/${app}/admin/blogs/new`}>Add blog</Link>
            </Button>
          </div>
          <div className="rounded-md border bg-white">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Title</TableHead>
                  <TableHead>Category</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead className="w-[100px]" />
                </TableRow>
              </TableHeader>
              <TableBody>
                {blogs.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={4} className="text-center text-gray-400">
                      No blogs yet.
                    </TableCell>
                  </TableRow>
                ) : (
                  blogs.map((b) => (
                    <TableRow key={b._id}>
                      <TableCell className="font-medium">{b.title}</TableCell>
                      <TableCell>{b.category?.name || "—"}</TableCell>
                      <TableCell className="capitalize">{b.status}</TableCell>
                      <TableCell className="flex gap-2">
                        <Button variant="outline" size="icon" asChild>
                          <Link href={`/${app}/admin/blogs/${b._id}/edit`} aria-label="Edit blog">
                            <Pencil className="size-4" />
                          </Link>
                        </Button>
                        <Button variant="outline" size="icon" onClick={() => removeBlog(b)}>
                          <Trash2 className="size-4 text-red-600" />
                        </Button>
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>
        </TabsContent>
      </Tabs>

      <Dialog open={openCategory} onOpenChange={setOpenCategory}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{editingCategory ? "Edit category" : "Add category"}</DialogTitle>
          </DialogHeader>
          <div className="grid gap-3">
            <div className="grid gap-2">
              <Label>Category name</Label>
              <Input
                value={categoryForm.name}
                onChange={(e) => setCategoryForm((p) => ({ ...p, name: e.target.value }))}
              />
            </div>
            <div className="grid gap-2">
              <Label>Description</Label>
              <Textarea
                value={categoryForm.description}
                onChange={(e) => setCategoryForm((p) => ({ ...p, description: e.target.value }))}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpenCategory(false)}>
              Cancel
            </Button>
            <Button onClick={saveCategory}>Save</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}