"use client";

import { adminFetchJson } from "@/app/customer/_lib/admin/admin-client-fetch";

import * as React from "react";

import { BankCustomersList } from "@/app/customer/[tenant]/admin/_components/bank-customers-list";
import { BankAccountsSheet } from "@/app/customer/[tenant]/admin/link-bank-accounts/_components/bank-accounts-sheet";
import { adminPaths } from "@/app/customer/_lib/admin/admin-paths";
import type { PortalLinkBankCustomerRow } from "@/app/customer/_lib/admin/link-bank-accounts-server-api";
import type { PortalUnassignedBankAccountRow } from "@/app/customer/_lib/admin/parent-banks-server-api";
import { mergeUnassignedCustomers } from "@/app/customer/[tenant]/admin/unassigned-banks/_lib/merge-unassigned-customers";
import type { CustomerPortalCapabilities } from "@/lib/frontend-auth/report-capabilities";

type UnassignedBanksPageClientProps = {
  tenant: string;
  initialCustomers: PortalLinkBankCustomerRow[];
  initialUnassignedAccounts: PortalUnassignedBankAccountRow[];
  initialErrorMessage: string | null;
  canManage: boolean;
  capabilities?: CustomerPortalCapabilities | null;
};

/**
 * Local search mode (client filter). URL list query is not used here — unassigned
 * rows are a merged client-side set; see useAdminListQuery header for when to use URL mode.
 */
export function UnassignedBanksPageClient({
  tenant,
  initialCustomers,
  initialUnassignedAccounts,
  initialErrorMessage,
  canManage,
  capabilities,
}: UnassignedBanksPageClientProps) {
  const paths = adminPaths(tenant);
  const [customers, setCustomers] = React.useState(initialCustomers);
  const [unassignedAccounts, setUnassignedAccounts] = React.useState(
    initialUnassignedAccounts,
  );
  const [search, setSearch] = React.useState("");
  const [selectedCustomer, setSelectedCustomer] =
    React.useState<PortalLinkBankCustomerRow | null>(null);
  const [sheetOpen, setSheetOpen] = React.useState(false);

  const rows = React.useMemo(
    () => mergeUnassignedCustomers(customers, unassignedAccounts),
    [customers, unassignedAccounts],
  );

  const filtered = React.useMemo(() => {
    const q = search.trim().toLowerCase();
    if (!q) return rows;
    return rows.filter((row) =>
      [row.fullName, row.email, row.company, row.subdomain, String(row.customerId)]
        .join(" ")
        .toLowerCase()
        .includes(q),
    );
  }, [rows, search]);

  const openSheet = (customer: PortalLinkBankCustomerRow) => {
    setSelectedCustomer(customer);
    setSheetOpen(true);
  };

  const refreshUnassigned = async () => {
    try {
      const result = await adminFetchJson<{
        unassignedAccounts?: PortalUnassignedBankAccountRow[];
      }>(paths.unassignedBanksList(), {
        headers: { Accept: "application/json" },
        cache: "no-store",
      });
      const accounts = result.data?.unassignedAccounts;
      if (Array.isArray(accounts)) {
        setUnassignedAccounts(accounts);
      }
    } catch {
      // Keep the current list if refresh fails; the sheet save already succeeded.
    }
  };

  const handleSaved = (customerId: number, accountCount: number) => {
    setCustomers((prev) => {
      const exists = prev.some((row) => row.customerId === customerId);
      if (!exists) {
        return prev;
      }
      return prev.map((row) =>
        row.customerId === customerId ? { ...row, accountCount } : row,
      );
    });
    void refreshUnassigned();
  };

  return (
    <>
      <BankCustomersList
        tenant={tenant}
        description="Customers with bank accounts whose parent bank is still set to None."
        activeTab="unassigned"
        capabilities={capabilities}
        rows={filtered}
        canManage={canManage}
        errorMessage={initialErrorMessage}
        searchValue={search}
        onSearchChange={setSearch}
        searchAriaLabel="Search unassigned bank customers"
        emptyMessage={
          search.trim()
            ? "No customers match this search."
            : "Every bank account has a parent bank assigned."
        }
        showUnassignedCount
        onOpenCustomer={openSheet}
      />

      <BankAccountsSheet
        tenant={tenant}
        customer={selectedCustomer}
        open={sheetOpen}
        canManage={canManage}
        onOpenChange={setSheetOpen}
        onSaved={handleSaved}
      />
    </>
  );
}