"use client";

import { Pencil, Plus, Trash2, Network } from "lucide-react";
import { useTranslation } from "react-i18next";

import { AdminSubnav, AdminSubnavButton } from "@/components/admin/admin-subnav";
import { AdminNoResourceState, AdminTableNoResourceRow } from "@/components/admin/admin-no-resource-state";
import { AdminLoadingInline } from "@/components/admin/admin-loading-state";
import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
import { AdminRowActionsMenu } from "@/components/admin/admin-row-actions-menu";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { AgentsPlayersPanel } from "@/modules/agents/agents-players-panel";
import { AgentProfileFields, type AgentProfileFieldsProps } from "@/modules/agents/agent-profile-fields";
import { formatCredit } from "@/modules/agents/agent-line-sidebar";
import { Button } from "@/components/ui/button";
import { percentValueToUi } from "@/lib/admin-rate-percent";
import { resolveRoleStatusTone } from "@/lib/admin-status-tone";
import { AdminTableMoney, adminMoneyCellClassName } from "@/components/admin/admin-table-money";
import type { AgentNodeRow, AgentProfileRow } from "@/types/api/admin-agent";

export type AgentDetailTab = "profile" | "downline" | "players";

export type AgentLineDetailPanelProps = {
  node: AgentNodeRow | null;
  profile: AgentProfileRow | null;
  profileLoading: boolean;
  profileError?: string | null;
  childAgents: AgentNodeRow[];
  childCountById: Map<number, number>;
  directPlayerCount?: number;
  onDirectPlayerCountChange?: (count: number) => void;
  siteCode: string;
  parentName: string | null;
  detailTab: AgentDetailTab;
  onDetailTabChange: (tab: AgentDetailTab) => void;
  canViewProfileTab: boolean;
  canEditProfileTab: boolean;
  canSaveProfileTab: boolean;
  canViewDownlineTab: boolean;
  canViewPlayersTab: boolean;
  canManageNode: boolean;
  canCreateChild: boolean;
  canCreatePlayerAction: boolean;
  canDeleteChild: (node: AgentNodeRow) => boolean;
  onEditChild: (node: AgentNodeRow) => void;
  onDeleteChild: (node: AgentNodeRow) => void;
  onAddChild: () => void;
  onEditCurrent: () => void;
  onSelectChild: (node: AgentNodeRow) => void;
  profileFields: AgentProfileFieldsProps | null;
  profileSaving: boolean;
  onSaveProfile: () => void;
};

export function AgentLineDetailPanel({
  node,
  profile,
  profileLoading,
  profileError = null,
  childAgents,
  childCountById,
  directPlayerCount,
  onDirectPlayerCountChange,
  siteCode,
  parentName,
  detailTab,
  onDetailTabChange,
  canViewProfileTab,
  canEditProfileTab,
  canSaveProfileTab,
  canViewDownlineTab,
  canViewPlayersTab,
  canManageNode,
  canCreateChild,
  canCreatePlayerAction,
  canDeleteChild,
  onEditChild,
  onDeleteChild,
  onAddChild,
  onEditCurrent,
  onSelectChild,
  profileFields,
  profileSaving,
  onSaveProfile,
}: AgentLineDetailPanelProps): React.ReactElement {
  const { t } = useTranslation(["agents", "common"]);

  if (node === null) {
    return (
      <div className="flex flex-1 flex-col items-center justify-center px-6 py-20 text-center">
        <div className="flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/80">
          <Network className="size-6 text-muted-foreground/70" aria-hidden />
        </div>
        <p className="mt-4 text-sm font-medium text-foreground">
          {t("lineUi.selectAgent", { defaultValue: "选择左侧代理" })}
        </p>
      </div>
    );
  }

  const tabs: { key: AgentDetailTab; label: string; count?: number; visible: boolean }[] = [
    {
      key: "profile",
      label: t("lineUi.tabProfileShort", { defaultValue: "占成授信" }),
      visible: canViewProfileTab,
    },
    {
      key: "downline",
      label: t("lineUi.tabDownline", { defaultValue: "直属下级" }),
      count: childAgents.length,
      visible: canViewDownlineTab,
    },
    {
      key: "players",
      label: t("lineUi.tabPlayers", { defaultValue: "直属玩家" }),
      count: directPlayerCount,
      visible: canViewPlayersTab,
    },
  ];

  const metaParts = [
    parentName
      ? t("lineUi.parentMeta", { defaultValue: "上级 {{name}}", name: parentName })
      : null,
    node.username?.trim() ? node.username : node.code,
  ].filter(Boolean);

  return (
    <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
      <div className="shrink-0 border-b border-border/60">
        <header className="px-5 py-4 sm:px-6">
          <div className="flex flex-wrap items-start justify-between gap-3">
            <div className="min-w-0 flex-1 space-y-2">
              <div className="flex flex-wrap items-center gap-2">
                <h2 className="truncate text-lg font-semibold tracking-tight">{node.name}</h2>
                <AdminStatusBadge tone={resolveRoleStatusTone(node.status)} className="shrink-0">
                  {node.status === 1
                    ? t("common:status.enabled", { defaultValue: "启用" })
                    : t("common:status.disabled", { defaultValue: "停用" })}
                </AdminStatusBadge>
              </div>
              {metaParts.length > 0 ? (
                <p className="truncate text-sm text-muted-foreground">{metaParts.join(" · ")}</p>
              ) : null}
              <AgentHeaderMetrics profile={profile} loading={profileLoading} />
            </div>
            {canManageNode ? (
              <Button type="button" size="sm" variant="outline" onClick={onEditCurrent}>
                <Pencil className="mr-1.5 size-3.5" />
                {t("lineUi.editAgent", { defaultValue: "编辑" })}
              </Button>
            ) : null}
          </div>
        </header>

        <AdminSubnav
          aria-label={t("detailTabs", { defaultValue: "代理详情" })}
          className="min-h-11 overflow-x-auto px-4 sm:px-5"
        >
          {tabs
            .filter((tab) => tab.visible)
            .map((tab) => (
              <AdminSubnavButton
                key={tab.key}
                active={detailTab === tab.key}
                onClick={() => onDetailTabChange(tab.key)}
                count={tab.count}
              >
                {tab.label}
              </AdminSubnavButton>
            ))}
        </AdminSubnav>
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 sm:px-6 sm:py-6">
        {profileError ? (
          <p className="mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
            {profileError}
          </p>
        ) : null}

        {profileLoading && detailTab === "profile" ? (
          <AdminLoadingInline className="py-16" />
        ) : null}

        {detailTab === "profile" && canViewProfileTab && profileFields && !profileLoading ? (
          <div className="mx-auto max-w-3xl space-y-5">
            <AgentProfileFields {...profileFields} idPrefix="inline-agent-profile" variant="card" />
            {canSaveProfileTab ? (
              <div className="flex justify-end">
                <Button
                  type="button"
                  disabled={profileSaving || profileFields.loading}
                  onClick={onSaveProfile}
                >
                  {profileSaving
                    ? t("common:actions.saving", { defaultValue: "保存中…" })
                    : t("lineUi.saveProfile", { defaultValue: "保存" })}
                </Button>
              </div>
            ) : null}
          </div>
        ) : null}

        {detailTab === "downline" && canViewDownlineTab ? (
          <DownlineSection
            childAgents={childAgents}
            childCountById={childCountById}
            canManageNode={canManageNode}
            canCreateChild={canCreateChild}
            canDeleteChild={canDeleteChild}
            onEditChild={onEditChild}
            onDeleteChild={onDeleteChild}
            onSelectChild={onSelectChild}
            onAddChild={onAddChild}
          />
        ) : null}

        {detailTab === "players" && canViewPlayersTab ? (
          <AgentsPlayersPanel
            siteCode={siteCode}
            agentNodeId={node.id}
            allowCreatePlayer={canCreatePlayerAction}
            embedded
            onTotalChange={onDirectPlayerCountChange}
          />
        ) : null}
      </div>
    </div>
  );
}

function AgentHeaderMetrics({
  profile,
  loading,
}: {
  profile: AgentProfileRow | null;
  loading: boolean;
}): React.ReactElement {
  const { t } = useTranslation("agents");

  if (loading) {
    return <p className="text-sm text-muted-foreground">…</p>;
  }

  const items = [
    `${t("profile.totalShareRate", { defaultValue: "占成" })} ${profile?.total_share_rate ?? 0}%`,
    `${t("profile.creditLimit", { defaultValue: "授信" })} ${formatCredit(profile?.credit_limit ?? 0)}`,
    `${t("lineUi.availableCredit", { defaultValue: "可下发" })} ${formatCredit(profile?.available_credit ?? 0)}`,
    `${t("profile.rebateLimit", { defaultValue: "回水上限" })} ${percentValueToUi(profile?.rebate_limit ?? 0)}%`,
  ];

  return (
    <p className="text-sm text-muted-foreground">
      {items.join(" · ")}
    </p>
  );
}

function DownlineSection({
  childAgents,
  childCountById,
  canManageNode,
  canCreateChild,
  canDeleteChild,
  onEditChild,
  onDeleteChild,
  onSelectChild,
  onAddChild,
}: {
  childAgents: AgentNodeRow[];
  childCountById: Map<number, number>;
  canManageNode: boolean;
  canCreateChild: boolean;
  canDeleteChild: (node: AgentNodeRow) => boolean;
  onEditChild: (node: AgentNodeRow) => void;
  onDeleteChild: (node: AgentNodeRow) => void;
  onSelectChild: (node: AgentNodeRow) => void;
  onAddChild: () => void;
}): React.ReactElement {
  const { t } = useTranslation(["agents", "common"]);

  if (childAgents.length === 0) {
    return (
      <AdminNoResourceState message={t("lineUi.downlineEmptyShort", { defaultValue: "暂无直属下级" })}>
        {canManageNode && canCreateChild ? (
          <Button type="button" size="sm" onClick={onAddChild}>
            <Plus className="mr-1.5 size-3.5" />
            {t("createChild", { defaultValue: "添加下级" })}
          </Button>
        ) : null}
      </AdminNoResourceState>
    );
  }

  return (
    <div className="space-y-3">
      {canManageNode && canCreateChild ? (
        <div className="flex justify-end">
          <Button type="button" size="sm" onClick={onAddChild}>
            <Plus className="mr-1.5 size-3.5" />
            {t("createChild", { defaultValue: "添加下级" })}
          </Button>
        </div>
      ) : null}
      <DownlineTable
        childAgents={childAgents}
        childCountById={childCountById}
        canManageNode={canManageNode}
        onEditChild={onEditChild}
        onDeleteChild={onDeleteChild}
        onSelectChild={onSelectChild}
        canDeleteChild={canDeleteChild}
      />
    </div>
  );
}

function DownlineTable({
  childAgents,
  childCountById,
  canManageNode,
  canDeleteChild,
  onEditChild,
  onDeleteChild,
  onSelectChild,
}: {
  childAgents: AgentNodeRow[];
  childCountById: Map<number, number>;
  canManageNode: boolean;
  canDeleteChild: (node: AgentNodeRow) => boolean;
  onEditChild: (node: AgentNodeRow) => void;
  onDeleteChild: (node: AgentNodeRow) => void;
  onSelectChild: (node: AgentNodeRow) => void;
}): React.ReactElement {
  const { t } = useTranslation(["agents", "common"]);

  return (
    <div className="admin-table-inset overflow-hidden">
      <div className="overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow className="hover:bg-transparent">
              <TableHead>{t("agentName", { defaultValue: "名称" })}</TableHead>
              <TableHead>{t("loginUsername", { defaultValue: "登录名" })}</TableHead>
              <TableHead className="text-right whitespace-nowrap">
                {t("profile.totalShareRate", { defaultValue: "占成" })}
              </TableHead>
              <TableHead className="text-right whitespace-nowrap">
                {t("profile.creditLimit", { defaultValue: "授信" })}
              </TableHead>
              <TableHead className="text-right whitespace-nowrap">
                {t("lineUi.availableCredit", { defaultValue: "可下发" })}
              </TableHead>
              <TableHead className="text-center whitespace-nowrap">
                {t("lineUi.downlineColumns.downlineCount", { defaultValue: "下级" })}
              </TableHead>
              <TableHead>{t("common:status.label", { defaultValue: "状态" })}</TableHead>
              {canManageNode ? (
                <TableHead className="sticky right-0 z-20 w-14 text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
                  {t("common:table.actions", { defaultValue: "操作" })}
                </TableHead>
              ) : null}
            </TableRow>
          </TableHeader>
          <TableBody>
            {childAgents.map((child) => {
              const summary = child.profile_summary;
              return (
                <TableRow
                  key={child.id}
                  className="cursor-pointer"
                  onClick={() => onSelectChild(child)}
                >
                  <TableCell>
                    <div className="font-medium">{child.name}</div>
                    <div className="font-mono text-xs text-muted-foreground">{child.code}</div>
                  </TableCell>
                  <TableCell className="text-sm">{child.username ?? "—"}</TableCell>
                  <TableCell className="text-right tabular-nums text-sm">
                    {summary ? `${summary.total_share_rate ?? 0}%` : "—"}
                  </TableCell>
                  <TableCell className={adminMoneyCellClassName("text-right text-sm")}>
                    {summary ? <AdminTableMoney>{formatCredit(summary.credit_limit)}</AdminTableMoney> : "—"}
                  </TableCell>
                  <TableCell className={adminMoneyCellClassName("text-right text-sm")}>
                    {summary ? (
                      <AdminTableMoney>{formatCredit(summary.available_credit)}</AdminTableMoney>
                    ) : (
                      "—"
                    )}
                  </TableCell>
                  <TableCell className="text-center tabular-nums text-sm">
                    {childCountById.get(child.id) ?? 0}
                  </TableCell>
                  <TableCell>
                    <AdminStatusBadge tone={resolveRoleStatusTone(child.status)} className="shrink-0">
                      {child.status === 1
                        ? t("common:status.enabled", { defaultValue: "启用" })
                        : t("common:status.disabled", { defaultValue: "停用" })}
                    </AdminStatusBadge>
                  </TableCell>
                  {canManageNode ? (
                    <TableCell
                      className="sticky right-0 z-10 text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]"
                      onClick={(e) => e.stopPropagation()}
                    >
                      <AdminRowActionsMenu
                        actions={[
                          {
                            key: "edit",
                            label: t("lineUi.editDownline", { defaultValue: "编辑" }),
                            icon: Pencil,
                            onClick: () => onEditChild(child),
                          },
                          {
                            key: "delete",
                            label: t("lineUi.deleteDownline", { defaultValue: "删除" }),
                            icon: Trash2,
                            destructive: true,
                            disabled: !canDeleteChild(child),
                            onClick: () => onDeleteChild(child),
                          },
                        ]}
                      />
                    </TableCell>
                  ) : null}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}