"use client";

import { DataTableSkeleton } from "@/components/ui/data-table-skeleton";
import { AppearanceSubnavCard } from "@/components/dashboard/appearance/appearance-subnav-card";
import { WidgetsFilterPanel } from "@/components/dashboard/appearance/widgets-filter-panel";
import { WidgetsTable } from "@/components/dashboard/appearance/widgets-table";
import { SettingsPageLayout } from "@/components/dashboard/settings/settings-page-layout";
import { SettingsConfirmDialog } from "@/components/dashboard/settings/settings-confirm-dialog";
import { Button } from "@/components/ui/button";
import { FilterButton } from "@/components/ui/filter/filter-button";
import { Pagination } from "@/components/ui/pagination";
import { SearchInput } from "@/components/ui/search-input";
import { Link } from "@/i18n/routing";
import {
  buildWidgetReorderItems,
  deleteWidget,
  getWidgetsQueryParams,
  reorderWidgets,
  toggleWidget,
  useWidgets,
} from "@/lib/api/dashboard/widgets-api";
import { Plus } from "lucide-react";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";

export function WidgetsPageView() {
  const t = useTranslations("dashboard.appearance");
  const tWidgets = useTranslations("dashboard.appearance.widgets");
  const searchParams = useSearchParams();
  const filtersKey = searchParams.toString();

  const [selectedWidgetId, setSelectedWidgetId] = useState<number | null>(null);
  const [pendingWidgetId, setPendingWidgetId] = useState<number | null>(null);
  const [isFilterOpen, setIsFilterOpen] = useState(false);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);

  const params = useMemo(() => getWidgetsQueryParams(new URLSearchParams(filtersKey)), [filtersKey]);
  const { widgets, meta, error, isLoading, refetch } = useWidgets(params);

  const selectedWidget = useMemo(
    () => (widgets || []).find((widget) => widget.id === selectedWidgetId) || null,
    [widgets, selectedWidgetId],
  );

  const handleDeleteRequest = (id: number) => {
    setSelectedWidgetId(id);
    setIsDeleteOpen(true);
  };

  const handleConfirmDelete = async () => {
    if (selectedWidgetId == null) {
      return;
    }
    await deleteWidget(selectedWidgetId);
    setSelectedWidgetId(null);
    setIsDeleteOpen(false);
  };

  const handleToggleStatus = async (id: number) => {
    setPendingWidgetId(id);
    try { await toggleWidget(id); } finally { setPendingWidgetId(null); }
  };

  const handleMoveOrder = (id: number, direction: "up" | "down") => {
    const items = buildWidgetReorderItems(widgets || [], id, direction);
    if (items) {
      reorderWidgets(items);
    }
  };

  return (
    <>
      <SettingsPageLayout sideContent={<AppearanceSubnavCard activeId="widgets" />}>
        <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((previous) => !previous)} />
            </div>

             <Button type="button" className="h-12 rounded-xl px-4" asChild>
              <Link href="/dashboard/appearance/widgets/new">
                <Plus className="size-4" />
                <span>{t("actions.addNew")}</span>
              </Link>
            </Button>
          </div>

          {isFilterOpen ? (
            <div className="px-6 pb-6">
              <WidgetsFilterPanel isOpen={isFilterOpen} onClose={() => setIsFilterOpen(false)} />
            </div>
          ) : null}

          {isLoading ? (
            <DataTableSkeleton rows={8} columns={5} />
          ) : error ? (
            <div className="flex h-52 items-center justify-center text-sm text-muted-foreground" role="alert">
              {tWidgets("error")}
              <button type="button" className="ms-3 text-primary underline" onClick={() => refetch()}>
                {tWidgets("retry")}
              </button>
            </div>
          ) : (
            <>
              <WidgetsTable
                data={widgets || []}
                page={params.page}
                perPage={params.per_page}
                pendingWidgetId={pendingWidgetId}
                onDelete={handleDeleteRequest}
                onToggleStatus={handleToggleStatus}
                onMoveOrder={handleMoveOrder}
              />

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

      <SettingsConfirmDialog
        open={isDeleteOpen}
        onOpenChange={setIsDeleteOpen}
        title={t("widgets.dialogs.delete.title", { name: selectedWidget?.title || "" })}
        description={t("widgets.dialogs.delete.description")}
        cancelLabel={t("actions.back")}
        confirmLabel={t("actions.confirmDelete")}
        destructive
        onConfirm={handleConfirmDelete}
      />
    </>
  );
}