"use client";

import type { DashboardServiceItem } from "@/components/dashboard/services/services-types";
import { useDashboardServicesData } from "@/hooks/use-dashboard-services-data";
import { Pagination } from "@/components/ui/pagination";
import { DataTableSkeleton } from "@/components/ui/data-table-skeleton";
import { SearchInput } from "@/components/ui/search-input";
import { useTranslations } from "next-intl";
import { useSearchParams } from "next/navigation";
import { useMemo, useState } from "react";
import { ServiceDeleteDialog } from "./service-delete-dialog";
import { ServicesTable } from "./services-table";

function getServicesQueryParams(filtersKey: string) {
  const urlSearch = new URLSearchParams(filtersKey);
  const page = Number(urlSearch.get("page") || "1");
  const perPage = Number(urlSearch.get("perPage") || "8");

  return {
    page: Number.isFinite(page) && page > 0 ? page : 1,
    perPage: Number.isFinite(perPage) && perPage > 0 ? perPage : 8,
    search: urlSearch.get("search") || "",
  };
}

export function ServicesPageView() {
  const t = useTranslations("dashboard.services");
  const searchParams = useSearchParams();
  const filtersKey = searchParams.toString();

  const [serviceToDelete, setServiceToDelete] = useState<DashboardServiceItem | null>(null);
  const [isDeleting, setIsDeleting] = useState(false);

  const params = useMemo(() => getServicesQueryParams(filtersKey), [filtersKey]);
  const servicesState = useDashboardServicesData(params);

  const handleConfirmDelete = async () => {
    if (!serviceToDelete) {
      return;
    }

    setIsDeleting(true);
    try {
      await servicesState.removeService(serviceToDelete.id);
      setServiceToDelete(null);
    } catch {
      // Dialog stays open on failure; user input is preserved
    } finally {
      setIsDeleting(false);
    }
  };

  if (servicesState.isLoading) {
    return (
      <section className="overflow-hidden rounded-2xl border border-border bg-card">
        <DataTableSkeleton rows={8} columns={5} />
      </section>
    );
  }

  if (servicesState.error) {
    return (
      <section className="overflow-hidden rounded-2xl border border-border bg-card">
        <div className="flex h-52 items-center justify-center text-sm text-muted-foreground" role="alert">
          {t("error")}
          <button
            type="button"
            className="ml-3 text-primary underline"
            onClick={() => servicesState.refetch()}
          >
            {t("retry")}
          </button>
        </div>
      </section>
    );
  }

  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>
      </div>

      <ServicesTable
        data={servicesState.data}
        page={params.page}
        perPage={params.perPage}
        totalItems={servicesState.totalItems}
        pendingServiceId={servicesState.pendingServiceId}
        search={params.search}
        onMove={servicesState.moveService}
        onToggle={servicesState.toggleService}
        onDuplicate={servicesState.copyService}
        onRequestDelete={setServiceToDelete}
      />

      <Pagination
        currentPage={params.page}
        totalPages={servicesState.totalPages}
        totalItems={servicesState.totalItems}
        itemsPerPage={params.perPage}
        className="border-t border-border"
      />

      <ServiceDeleteDialog
        service={serviceToDelete}
        open={Boolean(serviceToDelete)}
        onOpenChange={(open) => {
          if (!open) {
            setServiceToDelete(null);
          }
        }}
        onConfirmDelete={handleConfirmDelete}
        isLoading={isDeleting}
      />
    </section>
  );
}