"use client";

import { useTranslation } from "react-i18next";

import type { SettlementPeriodCloseResult, SettlementPeriodRow } from "@/api/admin-agent-settlement";
import { SettlementCreditLedgerPanel } from "@/modules/settlement/settlement-credit-ledger-panel";
import { SettlementMainPanel } from "@/modules/settlement/settlement-main-panel";
import { SettlementPeriodHeader } from "@/modules/settlement/settlement-period-header";
import {
  settlementPeriodViewHref,
  type SettlementBillScopeFilter,
  type SettlementPeriodView,
} from "@/modules/settlement/settlement-center-nav";
import { AdminSubnav, AdminSubnavLink } from "@/components/admin/admin-subnav";

type SettlementCenterPeriodDetailProps = {
  period: SettlementPeriodRow;
  view: SettlementPeriodView;
  billScope: SettlementBillScopeFilter;
  adminSiteId: number;
  currencyCode: string;
  canOperateBills: boolean;
  canManagePeriods: boolean;
  boundAgentId?: number | null;
  refreshKey: number;
  onOpenBillDetail: (billId: number, focus?: "confirm" | "payment") => void;
  onPeriodClosed?: (result: SettlementPeriodCloseResult) => void;
  onReloadPeriods?: () => Promise<unknown>;
};

export function SettlementCenterPeriodDetail({
  period,
  view,
  billScope,
  adminSiteId,
  currencyCode,
  canOperateBills,
  canManagePeriods,
  boundAgentId = null,
  refreshKey,
  onOpenBillDetail,
  onPeriodClosed,
  onReloadPeriods,
}: SettlementCenterPeriodDetailProps): React.ReactElement {
  const { t } = useTranslation("settlementCenter");

  const subViews: { key: SettlementPeriodView; label: string }[] = [
    { key: "pending", label: t("nav.pendingWorkbench", { defaultValue: "待处理" }) },
    { key: "bills", label: t("nav.allBills", { defaultValue: "全部账单" }) },
    { key: "ledger", label: t("nav.ledgerAudit", { defaultValue: "流水审计" }) },
  ];

  return (
    <div className="flex flex-col gap-4">
      <SettlementPeriodHeader
        period={period}
        adminSiteId={adminSiteId}
        currencyCode={currencyCode}
        billScope={billScope}
        canManage={canManagePeriods}
        onPeriodClosed={onPeriodClosed}
        onReloadPeriods={onReloadPeriods}
      />

      <AdminSubnav aria-label={t("nav.aria", { defaultValue: "账期视图" })}>
        {subViews.map((item) => (
          <AdminSubnavLink
            key={item.key}
            href={settlementPeriodViewHref(period.id, item.key, adminSiteId, billScope)}
            active={view === item.key}
          >
            {item.label}
          </AdminSubnavLink>
        ))}
      </AdminSubnav>

      {view === "pending" ? (
        <SettlementMainPanel
          key={`${adminSiteId}-${period.id}-${refreshKey}-pending`}
          adminSiteId={adminSiteId}
          currencyCode={currencyCode}
          periodFilter={period.id}
          mode="workbench"
          onOpenBillDetail={onOpenBillDetail}
          refreshKey={refreshKey}
          canOperateBills={canOperateBills}
          selectedPeriodStatus={period.status}
          boundAgentId={boundAgentId}
        />
      ) : null}

      {view === "bills" ? (
        <SettlementMainPanel
          key={`${adminSiteId}-${period.id}-${refreshKey}-${billScope}`}
          adminSiteId={adminSiteId}
          currencyCode={currencyCode}
          periodFilter={period.id}
          billScope={billScope}
          onOpenBillDetail={onOpenBillDetail}
          refreshKey={refreshKey}
          canOperateBills={canOperateBills}
          selectedPeriodStatus={period.status}
          boundAgentId={boundAgentId}
        />
      ) : null}

      {view === "ledger" ? (
        <SettlementCreditLedgerPanel
          key={`${adminSiteId}-${period.id}-${refreshKey}`}
          adminSiteId={adminSiteId}
          settlementPeriodId={period.id}
          currencyCode={currencyCode}
          refreshKey={refreshKey}
        />
      ) : null}
    </div>
  );
}
