"use client";

import { Button } from "@/components/ui/button";
import { SearchInput } from "@/components/ui/search-input";
import {
  getCategoriesQueryParams,
  reorderArticleCategories,
  useArticleCategories,
} from "@/lib/api/dashboard/article-categories-api";
import type { DashboardArticleCategory } from "@/components/dashboard/blogs/articles-types";
import { usePermissions } from "@/hooks/use-permissions";
import { useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";
import { toast } from "react-toastify";
import { useTranslations } from "next-intl";
import { CategoriesTable } from "./categories-table";
import { CategoryUpsertDialog } from "./category-upsert-dialog";
import { CategoryDeleteDialog } from "./category-delete-dialog";

export function CategoriesPageView() {
  const t = useTranslations("dashboard.blogs.categories");
  const { can } = usePermissions();
  const searchParams = useSearchParams();
  const params = useMemo(
    () => getCategoriesQueryParams(new URLSearchParams(searchParams.toString())),
    [searchParams],
  );

  const { categories, isLoading, error } = useArticleCategories(params);

  const [upsertOpen, setUpsertOpen] = useState(false);
  const [editing, setEditing] = useState<DashboardArticleCategory | null>(null);
  const [deleteId, setDeleteId] = useState<number | null>(null);

  const openEdit = (item: DashboardArticleCategory) => {
    setEditing(item);
    setUpsertOpen(true);
  };

  const onReorder = async (items: { id: number; order: number }[]) => {
    try {
      await reorderArticleCategories(items);
    } catch (e) {
      toast.error(e instanceof Error ? e.message : "Error");
    }
  };

  return (
    <section className="overflow-hidden rounded-2xl border border-border bg-card">
      <div className="flex flex-wrap items-center justify-between gap-3 p-6">
        <div className="flex flex-wrap items-center gap-3">
          <SearchInput />
        </div>
        {can("categories", "create") ? (
          <Button
            type="button"
            onClick={() => { setEditing(null); setUpsertOpen(true); }}
            className="h-11 rounded-xl"
          >
            {t("addNew")}
          </Button>
        ) : null}
      </div>

      <CategoriesTable
        data={categories ?? []}
        isLoading={isLoading}
        error={error}
        onEdit={can("categories", "edit") ? openEdit : () => {}}
        onDelete={can("categories", "delete") ? (item) => setDeleteId(item.id) : () => {}}
        onReorder={can("categories", "edit") ? onReorder : () => {}}
      />

      <CategoryUpsertDialog
        open={upsertOpen}
        onOpenChange={(v) => { setUpsertOpen(v); if (!v) setEditing(null); }}
        category={editing}
        parents={categories ?? []}
      />

      <CategoryDeleteDialog
        open={deleteId !== null}
        onOpenChange={(v) => { if (!v) setDeleteId(null); }}
        categoryId={deleteId}
      />
    </section>
  );
}