"use client";

import { Button } from "@/components/ui/button";
import { SearchInput } from "@/components/ui/search-input";
import { getTagsQueryParams, useArticleTags } from "@/lib/api/dashboard/article-tags-api";
import type { DashboardArticleTag } from "@/components/dashboard/blogs/articles-types";
import { usePermissions } from "@/hooks/use-permissions";
import { useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";
import { useTranslations } from "next-intl";
import { TagsTable } from "./tags-table";
import { TagUpsertDialog } from "./tag-upsert-dialog";
import { TagDeleteDialog } from "./tag-delete-dialog";

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

  const { tags, isLoading, error } = useArticleTags(params);

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

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

  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("tags", "create") ? (
          <Button
            type="button"
            onClick={() => { setEditing(null); setUpsertOpen(true); }}
            className="h-11 rounded-xl"
          >
            {t("addNew")}
          </Button>
        ) : null}
      </div>

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

      <TagUpsertDialog
        open={upsertOpen}
        onOpenChange={(v) => { setUpsertOpen(v); if (!v) setEditing(null); }}
        tag={editing}
      />

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