"use client";

import {
  useSocialMediaLinks,
  deleteSocialMediaLink,
  toggleSocialMediaLink,
} from "@/lib/api/dashboard/social-links-api";
import { CommunicationTable } from "@/components/dashboard/settings/communication-table";
import { SettingsConfirmDialog } from "@/components/dashboard/settings/settings-confirm-dialog";
import { Pagination } from "@/components/ui/pagination";
import { SearchInput } from "@/components/ui/search-input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import type { AdminSocialMediaLink } from "@/components/dashboard/settings/settings-api-types";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { useMemo, useState } from "react";

function getCommunicationQueryParams(filtersKey: string) {
  const query = new URLSearchParams(filtersKey);
  const page = Number(query.get("page") || "1");
  const perPage = Number(query.get("perPage") || "8");
  const statusParam = query.get("status");
  const status: "active" | "inactive" | undefined =
    statusParam === "active" || statusParam === "inactive" ? statusParam : undefined;

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

export function CommunicationPageView() {
  const t = useTranslations("dashboard.settings");
  const searchParams = useSearchParams();
  const router = useRouter();
  const filtersKey = searchParams.toString();

  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
  const [isStatusDialogOpen, setIsStatusDialogOpen] = useState(false);
  const [pendingStatus, setPendingStatus] = useState<boolean | null>(null);

  const params = useMemo(() => getCommunicationQueryParams(filtersKey), [filtersKey]);
  const { socialLinks, isLoading } = useSocialMediaLinks(params);

  const data: AdminSocialMediaLink[] = socialLinks ?? [];

  const selectedChannel = useMemo(
    () => (selectedId !== null ? data.find((item) => item.id === selectedId) : undefined),
    [selectedId, data],
  );

  const selectedName = selectedChannel
    ? typeof selectedChannel.name === "string"
      ? selectedChannel.name
      : (selectedChannel.name as Record<string, string>).en || ""
    : "";

  const handleStatusFilterChange = (value: string) => {
    const nextParams = new URLSearchParams(searchParams.toString());

    if (value === "all") {
      nextParams.delete("status");
    } else {
      nextParams.set("status", value);
    }

    nextParams.set("page", "1");
    router.replace(`?${nextParams.toString()}`, { scroll: false });
  };

  const handleToggleRequest = (id: number, nextStatus: boolean) => {
    setSelectedId(id);
    setPendingStatus(nextStatus);
    setIsDeleteOpen(false);
    setIsStatusDialogOpen(true);
  };

  const handleDeleteRequest = (id: number) => {
    setSelectedId(id);
    setPendingStatus(null);
    setIsStatusDialogOpen(false);
    setIsDeleteOpen(true);
  };

  const handleConfirmDelete = async () => {
    if (selectedId === null) return;
    try {
      await deleteSocialMediaLink(selectedId);
    } finally {
      setIsDeleteOpen(false);
      setSelectedId(null);
    }
  };

  const handleConfirmStatusChange = async () => {
    if (selectedId === null || pendingStatus === null) return;
    try {
      await toggleSocialMediaLink(selectedId);
    } finally {
      setIsStatusDialogOpen(false);
      setPendingStatus(null);
      setSelectedId(null);
    }
  };

  // Derive pagination from returned data length (API may return meta separately)
  const totalItems = data.length;
  const totalPages = Math.max(1, Math.ceil(totalItems / params.perPage));

  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">
          <SearchInput className="w-[260px]" />
          <div className="min-w-[160px]">
            <Select
              value={searchParams.get("status") || "all"}
              onValueChange={handleStatusFilterChange}
            >
              <SelectTrigger className="h-12 rounded-xl">
                <SelectValue placeholder={t("actions.filter")} />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">{t("filters.status.all")}</SelectItem>
                <SelectItem value="active">{t("filters.status.active")}</SelectItem>
                <SelectItem value="inactive">{t("filters.status.inactive")}</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        {isLoading ? (
          <div className="flex h-52 items-center justify-center text-sm text-muted-foreground">
            {t("actions.loading") || "Loading…"}
          </div>
        ) : (
          <CommunicationTable
            data={data}
            page={params.page}
            perPage={params.perPage}
            onToggleStatus={handleToggleRequest}
            onDelete={handleDeleteRequest}
          />
        )}

        <Pagination
          currentPage={params.page}
          totalPages={totalPages}
          totalItems={totalItems}
          itemsPerPage={params.perPage}
        />
      </section>

      <SettingsConfirmDialog
        open={isDeleteOpen}
        onOpenChange={setIsDeleteOpen}
        title={t("communication.dialogs.delete.title")}
        description={t("communication.dialogs.delete.description")}
        cancelLabel={t("actions.back")}
        confirmLabel={t("actions.confirmDelete")}
        destructive
        onConfirm={handleConfirmDelete}
      />

      <SettingsConfirmDialog
        open={isStatusDialogOpen}
        onOpenChange={setIsStatusDialogOpen}
        title={
          pendingStatus
            ? t("communication.dialogs.enable.title", { name: selectedName })
            : t("communication.dialogs.disable.title", { name: selectedName })
        }
        description={
          pendingStatus
            ? t("communication.dialogs.enable.description")
            : t("communication.dialogs.disable.description")
        }
        cancelLabel={t("actions.back")}
        confirmLabel={t("actions.confirm")}
        onConfirm={handleConfirmStatusChange}
      />
    </>
  );
}