"use client";

import { Check, ChevronDown, Search } from "lucide-react";
import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

import { getSettlementPeriods, type SettlementPeriodRow } from "@/api/admin-agent-settlement";
import { getAdminIntegrationSites } from "@/api/admin-integration-sites";
import { AdminLoadingState } from "@/components/admin/admin-loading-state";
import { AdminNoIntegrationSiteState } from "@/components/admin/admin-no-integration-site-state";
import { AgentBillDetail } from "@/modules/settlement/agent-bill-detail";
import { SettlementCenterPeriodDetail } from "@/modules/settlement/settlement-center-period-detail";
import {
  parseSettlementCenterView,
  preferredBillScopeForPeriod,
  settlementCenterListHref,
  settlementPeriodViewHref,
  type SettlementPeriodView,
} from "@/modules/settlement/settlement-center-nav";
import { SettlementPeriodWorkbench } from "@/modules/settlement/settlement-period-workbench";
import { formatAdminSiteLabel } from "@/lib/admin-site-display";
import { adminHasAnyPermission } from "@/lib/admin-permissions";
import {
  PRD_INTEGRATION_MANAGE,
  PRD_INTEGRATION_VIEW,
  PRD_SETTLEMENT_AGENT_MANAGE,
} from "@/lib/admin-prd";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Button, buttonVariants } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";
import { useAdminProfile } from "@/stores/admin-session";

type SiteOption = { id: number; label: string; code: string; currency_code: string };

function siteOptionsFromProfile(profile: ReturnType<typeof useAdminProfile>): SiteOption[] {
  const byId = new Map<number, SiteOption>();

  if (profile?.site != null) {
    byId.set(profile.site.id, {
      id: profile.site.id,
      label: formatAdminSiteLabel(profile.site.name, profile.site.code),
      code: profile.site.code,
      currency_code: "NPR",
    });
  }

  for (const site of profile?.accessible_sites ?? []) {
    byId.set(site.id, {
      id: site.id,
      label: formatAdminSiteLabel(site.name, site.code),
      code: site.code,
      currency_code: "NPR",
    });
  }

  return Array.from(byId.values());
}

export function SettlementCenterShell(): React.ReactElement {
  const { t } = useTranslation(["settlementCenter", "common"]);
  const router = useRouter();
  const searchParams = useSearchParams();
  const profile = useAdminProfile();
  const boundAgent = profile?.agent ?? null;

  const {
    siteId: siteFromUrl,
    periodId: activePeriodId,
    view: activeView,
    billScope: activeBillScope,
  } = parseSettlementCenterView(
    searchParams.get("site"),
    searchParams.get("period"),
    searchParams.get("view"),
    searchParams.get("scope"),
  );
  const billIdFromUrl = Number.parseInt(searchParams.get("bill") ?? "", 10);
  const billFocusFromUrl =
    searchParams.get("focus") === "payment"
      ? "payment"
      : searchParams.get("focus") === "confirm"
        ? "confirm"
        : null;

  const canOperateBills =
    profile?.is_super_admin === true ||
    adminHasAnyPermission(profile?.permissions, [PRD_SETTLEMENT_AGENT_MANAGE]);
  const canManagePeriods = canOperateBills && boundAgent === null;
  const canFinanceAdjustments = canOperateBills && boundAgent === null;
  const canLoadIntegrationSites =
    profile?.is_super_admin === true ||
    adminHasAnyPermission(profile?.permissions, [PRD_INTEGRATION_VIEW, PRD_INTEGRATION_MANAGE]);

  const [siteOptions, setSiteOptions] = useState<SiteOption[]>([]);
  const [sitesReady, setSitesReady] = useState(() => boundAgent?.admin_site_id != null);
  const [sitesLoadErr, setSitesLoadErr] = useState<string | null>(null);
  const [adminSiteId, setAdminSiteId] = useState<number | null>(null);
  const [sitePickerOpen, setSitePickerOpen] = useState(false);
  const [siteKeyword, setSiteKeyword] = useState("");
  const [periods, setPeriods] = useState<SettlementPeriodRow[]>([]);
  const [periodsReady, setPeriodsReady] = useState(false);
  const [detailBillId, setDetailBillId] = useState<number | null>(null);
  const [detailBillFocus, setDetailBillFocus] = useState<"confirm" | "payment" | null>(null);
  const billDeepLinkHandledRef = useRef<number | null>(null);
  const [refreshKey, setRefreshKey] = useState(0);
  const [periodLookupDone, setPeriodLookupDone] = useState(false);

  const loadIntegrationSites = useCallback(async (): Promise<void> => {
    if (boundAgent?.admin_site_id) {
      const label = formatAdminSiteLabel(
        boundAgent.admin_site_name,
        boundAgent.site_code ?? boundAgent.code,
      );
      const siteCode = boundAgent.site_code ?? boundAgent.code ?? "";
      const siteId = boundAgent.admin_site_id;

      setSitesReady(false);
      setSitesLoadErr(null);
      try {
        const sites = await getAdminIntegrationSites();
        const match = sites.items.find((site) => site.id === siteId);
        setSiteOptions([{
          id: siteId,
          label,
          code: siteCode,
          currency_code: match?.currency_code ?? "NPR",
        }]);
        setAdminSiteId(siteId);
      } catch {
        setSiteOptions([{
          id: siteId,
          label,
          code: siteCode,
          currency_code: "NPR",
        }]);
        setAdminSiteId(siteId);
      } finally {
        setSitesReady(true);
      }
      return;
    }

    const profileSites = siteOptionsFromProfile(profile);
    if (!canLoadIntegrationSites && profileSites.length > 0) {
      setSiteOptions(profileSites);
      setAdminSiteId((current) => {
        if (siteFromUrl !== null && profileSites.some((site) => site.id === siteFromUrl)) {
          return siteFromUrl;
        }
        if (current !== null && profileSites.some((site) => site.id === current)) {
          return current;
        }
        return profileSites[0]?.id ?? null;
      });
      setSitesLoadErr(null);
      setSitesReady(true);
      return;
    }

    setSitesReady(false);
    setSitesLoadErr(null);
    try {
      const sites = await getAdminIntegrationSites();
      const options = (sites.items ?? []).map((site) => ({
        id: site.id,
        label: formatAdminSiteLabel(site.name, site.code),
        code: site.code,
        currency_code: site.currency_code ?? "NPR",
      }));
      setSiteOptions(options);
      setAdminSiteId((current) => {
        if (siteFromUrl !== null && options.some((site) => site.id === siteFromUrl)) {
          return siteFromUrl;
        }
        if (current !== null && options.some((site) => site.id === current)) {
          return current;
        }
        return options[0]?.id ?? null;
      });
    } catch {
      setSiteOptions([]);
      setSitesLoadErr(
        t("sites.loadFailed", { defaultValue: "站点列表加载失败，请稍后重试。" }),
      );
    } finally {
      setSitesReady(true);
    }
  }, [boundAgent, canLoadIntegrationSites, profile, siteFromUrl, t]);

  useEffect(() => {
    void loadIntegrationSites();
  }, [loadIntegrationSites]);

  const siteId = adminSiteId ?? siteOptions[0]?.id ?? null;
  const selectedSite = siteOptions.find((s) => s.id === siteId) ?? null;
  const siteLabel = selectedSite?.label ?? null;
  const currency = siteOptions.find((s) => s.id === siteId)?.currency_code ?? "NPR";
  const filteredSites = siteKeyword.trim().toLowerCase()
    ? siteOptions.filter((site) => site.label.toLowerCase().includes(siteKeyword.trim().toLowerCase()))
    : siteOptions;

  const boundAgentIdentity =
    boundAgent !== null ? (
      <p className="text-xs text-muted-foreground">
        {t("boundAgentIdentity", {
          defaultValue: "经营身份：{{agent}} · 账号 {{username}}",
          agent: boundAgent.name || boundAgent.code,
          username: profile?.username ?? "—",
        })}
      </p>
    ) : null;

  const siteSelector =
    siteOptions.length > 0 && siteId !== null ? (
      <Popover open={sitePickerOpen} onOpenChange={setSitePickerOpen}>
        <PopoverTrigger
          render={
            <Button
              type="button"
              variant="outline"
              size="sm"
              className="h-9 w-[240px] justify-between gap-2 bg-background px-3 font-normal"
            />
          }
        >
          <span className="min-w-0 flex-1 truncate text-left">{siteLabel ?? "—"}</span>
          <span className="shrink-0 text-xs text-muted-foreground">
            {selectedSite?.code ?? ""}
          </span>
          <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
        </PopoverTrigger>
        <PopoverContent align="end" className="w-[320px] p-0">
          <div className="border-b border-border/60 p-3">
            <div className="relative">
              <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                value={siteKeyword}
                onChange={(event) => setSiteKeyword(event.target.value)}
                placeholder={t("siteSearch", { defaultValue: "搜索站点名称" })}
                className="pl-9"
              />
            </div>
          </div>
          <ScrollArea className="max-h-72">
            <div className="p-2">
              {filteredSites.map((site) => {
                const active = site.id === siteId;

                return (
                  <button
                    key={site.id}
                    type="button"
                    className={cn(
                      "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition-colors",
                      active ? "bg-primary/10 text-primary" : "hover:bg-muted/70",
                    )}
                    onClick={() => {
                      setAdminSiteId(site.id);
                      setSitePickerOpen(false);
                      setSiteKeyword("");
                      router.replace(settlementCenterListHref(site.id));
                    }}
                  >
                    <div className="min-w-0 flex-1">
                      <div className="truncate text-sm font-medium text-foreground">{site.label}</div>
                      <div className="truncate text-xs text-muted-foreground">{site.code}</div>
                    </div>
                    {active ? <Check className="size-4 shrink-0" /> : null}
                  </button>
                );
              })}
              {filteredSites.length === 0 ? (
                <div className="px-3 py-6 text-center text-sm text-muted-foreground">
                  {t("common:states.empty", { defaultValue: "暂无数据" })}
                </div>
              ) : null}
            </div>
          </ScrollArea>
        </PopoverContent>
      </Popover>
    ) : null;

  const headerActions =
    siteSelector !== null || boundAgentIdentity !== null ? (
      <div className="flex flex-col items-end gap-1">
        {siteSelector}
        {boundAgentIdentity}
      </div>
    ) : null;

  const loadPeriods = useCallback(async (): Promise<SettlementPeriodRow[]> => {
    if (siteId === null) {
      return [];
    }
    try {
      const data = await getSettlementPeriods({ admin_site_id: siteId });
      const items = data.items ?? [];
      setPeriods(items);
      setPeriodsReady(true);
      return items;
    } catch {
      setPeriods([]);
      setPeriodsReady(true);
      toast.error(t("periods.loadFailed", { defaultValue: "账期加载失败" }));
      return [];
    }
  }, [siteId, t]);

  useEffect(() => {
    setPeriodsReady(false);
    void loadPeriods();
  }, [loadPeriods]);

  const activePeriod =
    activePeriodId !== null ? (periods.find((row) => row.id === activePeriodId) ?? null) : null;

  const openPeriodView = (periodId: number, view: SettlementPeriodView = "pending"): void => {
    const period = periods.find((row) => row.id === periodId);
    const scope = preferredBillScopeForPeriod(period?.summary);
    router.push(settlementPeriodViewHref(periodId, view, siteId, scope));
  };

  const openBillDetail = (billId: number, focus?: "confirm" | "payment"): void => {
    setDetailBillId(billId);
    setDetailBillFocus(focus ?? null);
  };

  const isListMode = activePeriodId === null;

  useEffect(() => {
    if (boundAgent !== null || siteId === null) {
      return;
    }
    if (isListMode) {
      if (siteFromUrl === siteId) {
        return;
      }
      router.replace(settlementCenterListHref(siteId));
      return;
    }
    if (activePeriodId !== null && siteFromUrl !== siteId) {
      router.replace(settlementPeriodViewHref(activePeriodId, activeView, siteId, activeBillScope));
    }
  }, [activeBillScope, activePeriodId, activeView, boundAgent, isListMode, router, siteFromUrl, siteId]);

  useEffect(() => {
    setPeriodLookupDone(false);
  }, [activePeriodId, siteId]);

  useEffect(() => {
    if (
      !periodsReady ||
      !Number.isFinite(billIdFromUrl) ||
      billIdFromUrl <= 0 ||
      activePeriodId === null
    ) {
      return;
    }
    if (billDeepLinkHandledRef.current === billIdFromUrl) {
      return;
    }
    billDeepLinkHandledRef.current = billIdFromUrl;
    openBillDetail(billIdFromUrl, billFocusFromUrl ?? undefined);
  }, [activePeriodId, billFocusFromUrl, billIdFromUrl, periodsReady]);

  useEffect(() => {
    if (!periodsReady || activePeriodId === null || siteId === null) {
      return;
    }

    if (activePeriod !== null) {
      setPeriodLookupDone(true);
      return;
    }

    let cancelled = false;
    void getSettlementPeriods().then((data) => {
      if (cancelled) {
        return;
      }

      const match = (data.items ?? []).find((row) => row.id === activePeriodId);
      if (match?.admin_site_id && match.admin_site_id !== siteId) {
        setAdminSiteId(match.admin_site_id);
        router.replace(
          settlementPeriodViewHref(activePeriodId, activeView, match.admin_site_id, activeBillScope),
        );
        return;
      }

      setPeriodLookupDone(true);
    });

    return () => {
      cancelled = true;
    };
  }, [activeBillScope, activePeriod, activePeriodId, activeView, periodsReady, router, siteId]);

  const shellBootstrapping =
    !sitesReady || (siteId !== null && !periodsReady);

  return (
    <div className="mx-auto flex w-full max-w-7xl flex-col gap-4">
      {shellBootstrapping ? (
        <AdminLoadingState />
      ) : sitesLoadErr ? (
        <div className="flex flex-col items-start gap-3 rounded-xl border border-border/70 bg-card p-4">
          <p className="text-sm text-destructive">{sitesLoadErr}</p>
          <Button type="button" variant="outline" size="sm" onClick={() => void loadIntegrationSites()}>
            {t("common:actions.retry", { defaultValue: "重试" })}
          </Button>
        </div>
      ) : siteId === null && siteOptions.length === 0 && boundAgent === null ? (
        <AdminNoIntegrationSiteState canCreate={profile?.is_super_admin === true} />
      ) : siteId === null ? (
        <p className="text-sm text-muted-foreground">{t("empty.noSite", { defaultValue: "请选择站点。" })}</p>
      ) : isListMode ? (
        <SettlementPeriodWorkbench
          adminSiteId={siteId}
          currencyCode={currency}
          canManage={canManagePeriods}
          periods={periods}
          headerActions={headerActions}
          onViewDetail={(id) => openPeriodView(id, "pending")}
          onReloadPeriods={loadPeriods}
          onPeriodOpened={() => {
            setRefreshKey((n) => n + 1);
          }}
          onPeriodClosed={(result) => {
            setRefreshKey((n) => n + 1);
            const n = result?.unsettled_ticket_count ?? 0;
            if (n > 0) {
              toast.warning(
                t("toast.periodClosedUnsettled", {
                  defaultValue: "已关账，仍有 {{count}} 笔注单未结算。",
                  count: n,
                }),
              );
            }
          }}
        />
      ) : activePeriod === null ? (
        !periodLookupDone ? (
          <AdminLoadingState />
        ) : (
        <div className="flex flex-col gap-3">
          <p className="text-sm text-muted-foreground">
            {t("periodDetail.notFound", { defaultValue: "账期不存在或已切换站点，请返回列表。" })}
          </p>
          <Link
            href={settlementCenterListHref(siteId)}
            className={cn(buttonVariants({ variant: "outline", size: "sm" }), "w-fit")}
          >
            {t("periodDetail.back", { defaultValue: "返回账期列表" })}
          </Link>
        </div>
        )
      ) : (
        <SettlementCenterPeriodDetail
          period={activePeriod}
          view={activeView}
          billScope={activeBillScope}
          adminSiteId={siteId}
          currencyCode={currency}
          canOperateBills={canOperateBills}
          canManagePeriods={canManagePeriods}
          boundAgentId={boundAgent?.id ?? null}
          refreshKey={refreshKey}
          onOpenBillDetail={openBillDetail}
          onPeriodClosed={(result) => {
            setRefreshKey((n) => n + 1);
            const n = result?.unsettled_ticket_count ?? 0;
            if (n > 0) {
              toast.warning(
                t("toast.periodClosedUnsettled", {
                  defaultValue: "已关账，仍有 {{count}} 笔注单未结算。",
                  count: n,
                }),
              );
            }
          }}
          onReloadPeriods={loadPeriods}
        />
      )}

      <Dialog
        open={detailBillId !== null}
        onOpenChange={(open) => {
          if (!open) {
            setDetailBillId(null);
            setDetailBillFocus(null);
          }
        }}
      >
        <DialogContent
          className="grid !h-[min(92vh,980px)] !w-[calc(100vw-2rem)] !max-w-none sm:!w-[min(720px,calc(100vw-2rem))] sm:!max-w-[720px] grid-rows-[auto,minmax(0,1fr)] overflow-hidden p-0"
        >
          <DialogHeader className="border-b px-6 py-4">
            <DialogTitle>
              {detailBillId !== null
                ? t("actions.billDetailWithId", {
                    defaultValue: "账单 #{{id}}",
                    id: detailBillId,
                  })
                : t("actions.billDetail", { defaultValue: "账单详情" })}
            </DialogTitle>
          </DialogHeader>
          {detailBillId !== null ? (
            <div className="min-h-0 overflow-y-auto px-6 py-5">
              <AgentBillDetail
                billId={detailBillId}
                currencyCode={currency}
                canManage={canOperateBills}
                boundAgent={boundAgent}
                canFinanceAdjustments={canFinanceAdjustments}
                focusSection={detailBillFocus}
                onUpdated={() => {
                  void loadPeriods();
                  setRefreshKey((n) => n + 1);
                }}
              />
            </div>
          ) : null}
        </DialogContent>
      </Dialog>
    </div>
  );
}
