"use client";

import { ExportButton } from "@/components/dashboard/lifi/export-button";
import { ActiveFilterBadges } from "@/components/ui/filter/active-filter-badges";
import { FilterButton } from "@/components/ui/filter/filter-button";
import { Pagination } from "@/components/ui/pagination";
import { SearchInput } from "@/components/ui/search-input";
import { getArticlesQueryParams, useArticles, deleteArticle, toggleArticleFeatured } from "@/lib/api/dashboard/articles-api";
import { useArticleCategories } from "@/lib/api/dashboard/article-categories-api";
import type { DashboardArticleItem } 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 { BlogsFilterPanel } from "./blogs-filter-panel";
import { BlogsTable } from "./blogs-table";
import { ArticleDeleteDialog } from "./article-delete-dialog";
import { ArticleStatusDialog } from "./article-status-dialog";

export function BlogsPageView({ featuredOnly = false }: { featuredOnly?: boolean }) {
  const searchParams = useSearchParams();
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const filtersKey = searchParams.toString();

  const { can } = usePermissions();
  const [toDelete, setToDelete] = useState<DashboardArticleItem | null>(null);
  const [toStatus, setToStatus] = useState<DashboardArticleItem | null>(null);
  const [pendingBlogId, setPendingBlogId] = useState<number | null>(null);

  const params = useMemo(() => {
    const parsed = getArticlesQueryParams(new URLSearchParams(filtersKey));
    return featuredOnly ? { ...parsed, is_featured: 1 as const } : parsed;
  }, [filtersKey, featuredOnly]);

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

  const onToggleFeatured = async (id: number) => {
    setPendingBlogId(id);
    try { await toggleArticleFeatured(id); } catch (e) { toast.error(e instanceof Error ? e.message : "Error"); } finally { setPendingBlogId(null); }
  };

  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 />
          <FilterButton isActive={isFilterOpen} onClick={() => setIsFilterOpen((p) => !p)} />
        </div>
        <ExportButton />
      </div>

      {isFilterOpen ? (
        <div className="px-6 pb-6">
          <BlogsFilterPanel
            key={filtersKey}
            isOpen={isFilterOpen}
            onClose={() => setIsFilterOpen(false)}
            categories={categories ?? []}
          />
        </div>
      ) : (
        <ActiveFilterBadges className="px-6 pb-4" />
      )}

      <BlogsTable
        data={articles ?? []}
        page={params.page}
        perPage={params.per_page}
        isLoading={isLoading}
        error={error}
        pendingBlogId={pendingBlogId}
        onToggleFeatured={can("articles", "edit") ? onToggleFeatured : undefined}
        onDelete={can("articles", "delete") ? setToDelete : undefined}
        onChangeStatus={can("articles", "edit") ? setToStatus : undefined}
      />

      <Pagination
        currentPage={params.page}
        totalPages={meta.last_page}
        totalItems={meta.total}
        itemsPerPage={params.per_page}
        className="border-t border-border"
      />

      <ArticleDeleteDialog
        open={!!toDelete}
        onOpenChange={(v) => { if (!v) setToDelete(null); }}
        onConfirm={async () => {
          if (toDelete) {
            await deleteArticle(toDelete.id);
            toast.success("Deleted");
          }
        }}
      />
      <ArticleStatusDialog
        item={toStatus}
        open={!!toStatus}
        onOpenChange={(v) => { if (!v) setToStatus(null); }}
      />
    </section>
  );
}