"use client";

import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { useTranslation } from "react-i18next";

import type { SettlementPeriodRow } from "@/api/admin-agent-settlement";
import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
import { SettlementCreditLedgerPanel } from "@/modules/settlement/settlement-credit-ledger-panel";
import { SettlementMainPanel } from "@/modules/settlement/settlement-main-panel";
import { SettlementOperationsPanel } from "@/modules/settlement/settlement-operations-panel";
import {
  settlementCenterListHref,
  settlementPeriodViewHref,
  type SettlementPeriodView,
} from "@/modules/settlement/settlement-center-nav";
import { formatSettlementPeriodSpan } from "@/lib/agent-settlement-period-range";
import { settlementPeriodStatusLabel } from "@/modules/settlement/settlement-status-label";
import { AdminSubnav, AdminSubnavLink } from "@/components/admin/admin-subnav";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type SettlementCenterPeriodDetailProps = {
  period: SettlementPeriodRow;
  view: SettlementPeriodView;
  adminSiteId: number;
  currencyCode: string;
  canOperateBills: boolean;
  boundAgentId?: number | null;
  refreshKey: number;
  onOpenBillDetail: (billId: number) => void;
};

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

  const subViews: { key: SettlementPeriodView; label: string }[] = [
    { key: "bills", label: t("nav.bills", { defaultValue: "账单" }) },
    { key: "operations", label: t("nav.operations", { defaultValue: "收付与调账" }) },
    { key: "ledger", label: t("nav.ledger", { defaultValue: "账务流水" }) },
  ];

  const pendingConfirm = period.summary?.pending_confirm ?? 0;
  const awaitingPayment = period.summary?.awaiting_payment ?? 0;

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex min-w-0 flex-col gap-2">
          <Link
            href={settlementCenterListHref(adminSiteId)}
            className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "h-8 w-fit px-2")}
          >
            <ArrowLeft className="size-4" aria-hidden />
            {t("periodDetail.back", { defaultValue: "返回账期列表" })}
          </Link>
          <div className="flex flex-wrap items-center gap-2">
            <h2 className="text-base font-semibold tracking-tight">
              {formatSettlementPeriodSpan(period.period_start, period.period_end)}
            </h2>
            <AdminStatusBadge status={period.status}>
              {settlementPeriodStatusLabel(period.status, t)}
            </AdminStatusBadge>
          </div>
        </div>
      </div>

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

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

      {view === "operations" ? (
        <SettlementOperationsPanel
          key={`${adminSiteId}-${period.id}-${refreshKey}-ops`}
          adminSiteId={adminSiteId}
          settlementPeriodId={period.id}
          currencyCode={currencyCode}
          refreshKey={refreshKey}
          onOpenBill={onOpenBillDetail}
        />
      ) : null}

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

    </div>
  );
}