"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 { 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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
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 { isLineRootAgentNode } from "@/lib/agent-profile-caps";
import { resolveRoleStatusTone } from "@/lib/admin-status-tone";
import { cn } from "@/lib/utils";
import type { AgentNodeRow, AgentProfileRow } from "@/types/api/admin-agent";

function relativeShareRate(totalShareRate: number | undefined, parentShareRate: number | undefined): string | null {
  if (
    totalShareRate == null ||
    parentShareRate == null ||
    parentShareRate <= 0
  ) {
    return null;
  }

  return percentValueToUi((totalShareRate / parentShareRate) * 100);
}

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

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

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

  if (node === null) {
    return (
      <div className="flex flex-1 flex-col items-center justify-center bg-muted/20 px-6 py-20 text-center">
        <div className="flex size-14 items-center justify-center rounded-2xl border border-dashed border-border/80 bg-background">
          <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>
        <p className="mt-2 max-w-sm text-sm text-muted-foreground">
          {t("lineUi.selectAgentHint", {
            defaultValue: "信用占成盘以代理树为结算边界，占成、授信与回水均在代理节点配置。",
          })}
        </p>
      </div>
    );
  }

  const tabs: { key: AgentDetailTab; label: string; count?: number; visible: boolean }[] = [
    {
      key: "overview",
      label: t("lineUi.tabOverview", { defaultValue: "概览" }),
      visible: true,
    },
    {
      key: "profile",
      label: profileReadOnly
        ? t("lineUi.tabProfileReadOnly", { defaultValue: "占成与授信（只读）" })
        : t("lineUi.tabProfile", { defaultValue: "占成与授信" }),
      visible: canViewProfileTab,
    },
    {
      key: "downline",
      label: t("lineUi.tabDownline", { defaultValue: "直属下级" }),
      count: childAgents.length,
      visible: canViewDownlineTab,
    },
    {
      key: "players",
      label: t("lineUi.tabPlayers", { defaultValue: "直属玩家" }),
      visible: canViewPlayersTab,
    },
  ];

  const siteDisplay =
    siteLabel && siteCode.trim() !== ""
      ? `${siteLabel} (${siteCode})`
      : siteLabel ?? siteCode;
  const childActionHint = canCreateChild
    ? null
    : canCreateChildAgent
      ? t("lineUi.addChildUnavailableHint", {
          defaultValue: "当前代理未开启“允许创建下级代理”，如需新增请先调整该代理配置。",
        })
      : t("lineUi.addChildNoPermissionHint", {
          defaultValue: "当前账号没有为该节点创建下级代理的权限。",
        });
  const playerActionHint =
    canViewPlayersTab && !canCreatePlayerAction ? playersTabHint ?? null : null;
  const showPrimaryAction = detailTab === "downline" || detailTab === "players";
  const primaryActionEnabled =
    detailTab === "players" ? canCreatePlayerAction : canCreateChild;
  const primaryActionLabel =
    detailTab === "players"
      ? t("lineUi.createDirectPlayer", { defaultValue: "创建直属玩家" })
      : t("createChild", { defaultValue: "添加下级代理" });
  const primaryActionHint =
    detailTab === "players" ? playerActionHint : childActionHint;

  return (
    <div className="flex min-h-[28rem] min-w-0 flex-1 flex-col bg-background">
      <header className="border-b border-border/60 bg-card 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">
            <div className="flex flex-wrap items-center gap-2.5">
              <h2 className="truncate text-xl font-semibold tracking-tight text-foreground">
                {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>
            {siteDisplay ? (
              <p className="mt-1 truncate text-sm text-muted-foreground" title={siteDisplay}>
                {siteDisplay}
              </p>
            ) : null}
          </div>

          <div className="flex shrink-0 flex-col items-end gap-2">
            {canManageNode ? (
              <>
                <div className="flex flex-wrap justify-end gap-2">
                  <Button type="button" size="sm" variant="outline" onClick={onEditCurrent}>
                    <Pencil className="mr-1.5 size-3.5" />
                    {t("lineUi.editAgent", { defaultValue: "编辑代理" })}
                  </Button>
                  {showPrimaryAction && primaryActionEnabled ? (
                    <Button
                      type="button"
                      size="sm"
                      onClick={detailTab === "players" ? onAddPlayer : onAddChild}
                    >
                      <Plus className="mr-1.5 size-3.5" />
                      {primaryActionLabel}
                    </Button>
                  ) : null}
                </div>
                {primaryActionHint ? (
                  <p className="max-w-[26rem] text-right text-xs leading-5 text-muted-foreground">
                    {primaryActionHint}
                  </p>
                ) : null}
              </>
            ) : null}
          </div>
        </div>
      </header>

      <AdminSubnav
        aria-label={t("detailTabs", { defaultValue: "代理详情" })}
        className="overflow-x-auto bg-card 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 className="min-h-0 flex-1 overflow-y-auto bg-muted/15 px-5 py-5 sm:px-6 sm:py-6">
        {detailTab === "overview" ? (
          <OverviewTab
            profile={profile}
            profileLoading={profileLoading}
            profileReadOnly={profileReadOnly}
          />
        ) : null}

        {detailTab === "profile" && canViewProfileTab && profileFields ? (
          <Card className="mx-auto max-w-3xl border-border/70 shadow-sm">
            <CardHeader className="border-b border-border/60 pb-4">
              <CardTitle className="text-base">
                {profileReadOnly
                  ? t("lineUi.tabProfileReadOnly", { defaultValue: "占成与授信（只读）" })
                  : t("lineUi.tabProfile", { defaultValue: "占成与授信" })}
              </CardTitle>
              <p className="text-sm font-normal text-muted-foreground">
                {profileReadOnly
                  ? isLineRootAgentNode(node)
                    ? t("lineUi.lineRootProfileReadOnlyHint", {
                        defaultValue:
                          "一级代理的占成、站点授信总额与回水由平台超管配置；您可向直属下级代理与玩家下放额度。",
                      })
                    : t("lineUi.profileReadOnlyHint", {
                        defaultValue: "占成、授信与回水由上级配置，如需调整请联系上级代理或平台。",
                      })
                  : t("lineUi.profileTabHint", {
                      defaultValue:
                        "占成、授信、回水与风控标签在此维护；登录名、密码与启停状态请用「编辑代理」。",
                    })}
              </p>
            </CardHeader>
            <CardContent className="pt-5">
              <AgentProfileFields {...profileFields} idPrefix="inline-agent-profile" variant="card" />
              {canManageNode && canEditProfileTab ? (
                <div className="mt-6 flex justify-end border-t border-border/60 pt-5">
                  <Button
                    type="button"
                    className="min-w-[10rem]"
                    disabled={profileSaving || profileFields.loading}
                    onClick={onSaveProfile}
                  >
                    {profileSaving
                      ? t("common:actions.saving", { defaultValue: "保存中…" })
                      : t("lineUi.saveProfile", { defaultValue: "保存占成与授信" })}
                  </Button>
                </div>
              ) : null}
            </CardContent>
          </Card>
        ) : null}

        {detailTab === "downline" && canViewDownlineTab ? (
          <DownlineTable
            childAgents={childAgents}
            childCountById={childCountById}
            parentTotalShareRate={profile?.total_share_rate}
            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
            createRequestKey={playerCreateRequestKey}
          />
        ) : null}
      </div>
    </div>
  );
}

function OverviewTab({
  profile,
  profileLoading,
  profileReadOnly,
}: {
  profile: AgentProfileRow | null;
  profileLoading: boolean;
  profileReadOnly: boolean;
}): React.ReactElement {
  const { t } = useTranslation(["agents", "common"]);

  const rebateCap =
    profile && !profileLoading ? percentValueToUi(profile.rebate_limit ?? 0) : null;
  const parentRelativeShare = relativeShareRate(
    profile?.total_share_rate,
    profile?.parent_caps?.total_share_rate,
  );

  const yesLabel = t("common:states.yes", { defaultValue: "是" });
  const noLabel = t("common:states.no", { defaultValue: "否" });

  return (
    <div className="mx-auto max-w-5xl space-y-6">
      {profileReadOnly ? (
        <p className="rounded-lg border border-border/60 bg-card px-4 py-3 text-sm text-muted-foreground">
          {t("lineUi.selfAgentOverviewHint", {
            defaultValue:
              "以下为上级为您分配的占成与授信；如需调整请联系上级代理或平台。",
          })}
        </p>
      ) : null}

      <div className="grid grid-cols-2 gap-3 lg:grid-cols-4">
        <MetricCard
          label={t("profile.totalShareRate", { defaultValue: "占成比例" })}
          value={profileLoading ? "…" : `${profile?.total_share_rate ?? 0}%`}
          subtitle={
            parentRelativeShare
              ? t("profile.relativeShareRateValue", {
                  defaultValue: "占上级 {{rate}}%",
                  rate: parentRelativeShare,
                })
              : undefined
          }
          accent
        />
        <MetricCard
          label={t("profile.creditLimit", { defaultValue: "授信额度" })}
          value={profileLoading ? "…" : formatCredit(profile?.credit_limit ?? 0)}
        />
        <MetricCard
          label={t("lineUi.allocatedCredit", { defaultValue: "已下发" })}
          value={profileLoading ? "…" : formatCredit(profile?.allocated_credit ?? 0)}
        />
        <MetricCard
          label={t("lineUi.availableCredit", { defaultValue: "可下发" })}
          value={profileLoading ? "…" : formatCredit(profile?.available_credit ?? 0)}
          highlight
        />
      </div>

      {!profileLoading && profile ? (
        <>
          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
            <MetricCard
              label={t("profile.rebateLimit", { defaultValue: "回水上限 (%)" })}
              value={`${rebateCap ?? "0"}%`}
            />
            <MetricCard
              label={t("profile.defaultPlayerRebate", { defaultValue: "默认玩家回水 (%)" })}
              value={`${percentValueToUi(profile.default_player_rebate ?? 0)}%`}
            />
            <MetricCard
              label={t("profile.riskTags", { defaultValue: "风控标签" })}
              value={
                (profile.risk_tags?.length ?? 0) > 0
                  ? profile.risk_tags!.join(", ")
                  : t("common:states.none", { defaultValue: "无" })
              }
            />
          </div>

          <div className="grid gap-3 sm:grid-cols-3">
            <CapabilityMetric
              label={t("profile.canGrantExtraRebate", { defaultValue: "允许额外回水" })}
              enabled={profile.can_grant_extra_rebate === true}
              yesLabel={yesLabel}
              noLabel={noLabel}
            />
            <CapabilityMetric
              label={t("profile.canCreatePlayer", { defaultValue: "允许创建玩家" })}
              enabled={profile.can_create_player !== false}
              yesLabel={yesLabel}
              noLabel={noLabel}
            />
            <CapabilityMetric
              label={t("profile.canCreateChildAgent", { defaultValue: "允许创建下级代理" })}
              enabled={profile.can_create_child_agent === true}
              yesLabel={yesLabel}
              noLabel={noLabel}
            />
          </div>
        </>
      ) : null}
    </div>
  );
}

function CapabilityMetric({
  label,
  enabled,
  yesLabel,
  noLabel,
}: {
  label: string;
  enabled: boolean;
  yesLabel: string;
  noLabel: string;
}): React.ReactElement {
  return (
    <div className="rounded-xl border border-border/70 bg-card px-4 py-4 shadow-sm">
      <p className="text-xs font-medium text-muted-foreground">{label}</p>
      <p
        className={cn(
          "mt-1.5 text-lg font-semibold",
          enabled ? "text-foreground" : "text-muted-foreground",
        )}
      >
        {enabled ? yesLabel : noLabel}
      </p>
    </div>
  );
}

function DownlineTable({
  childAgents,
  childCountById,
  parentTotalShareRate,
  canManageNode,
  canCreateChild,
  canDeleteChild,
  onEditChild,
  onDeleteChild,
  onSelectChild,
  onAddChild,
}: {
  childAgents: AgentNodeRow[];
  childCountById: Map<number, number>;
  parentTotalShareRate?: 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"]);
  const createChildLabel = t("lineUi.createDownline", { defaultValue: "创建下级代理" });
  const editChildLabel = t("lineUi.editDownline", { defaultValue: "编辑代理" });
  const deleteChildLabel = t("lineUi.deleteDownline", { defaultValue: "删除代理" });

  return (
    <div className="admin-table-shell overflow-hidden rounded-2xl border border-border/70 bg-card shadow-sm">
        <div className="overflow-x-auto">
          <Table>
            <TableHeader>
              <TableRow className="bg-muted/40 hover:bg-muted/40">
                <TableHead>{t("agentCode", { defaultValue: "代理编码" })}</TableHead>
                <TableHead>{t("agentName", { defaultValue: "代理名称" })}</TableHead>
                <TableHead>{t("loginUsername", { defaultValue: "登录名" })}</TableHead>
                <TableHead>{t("lineUi.downlineColumns.email", { 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.allocatedCredit", { defaultValue: "已下发" })}
                </TableHead>
                <TableHead className="text-center whitespace-nowrap">
                  {t("lineUi.downlineColumns.downlineCount", { defaultValue: "下级数" })}
                </TableHead>
                <TableHead className="w-24">{t("common:status.label", { defaultValue: "状态" })}</TableHead>
                {canManageNode ? (
                  <TableHead className="sticky right-0 z-20 w-14 bg-muted whitespace-nowrap text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]">
                    {t("common:table.actions", { defaultValue: "操作" })}
                  </TableHead>
                ) : null}
              </TableRow>
            </TableHeader>
            <TableBody>
              {childAgents.length === 0 ? (
                <AdminTableNoResourceRow colSpan={canManageNode ? 10 : 9} cellClassName="py-12 text-center" />
              ) : (
                childAgents.map((child) => {
                  const summary = child.profile_summary;
                  return (
                    <TableRow
                      key={child.id}
                      className="cursor-pointer"
                      onClick={() => onSelectChild(child)}
                    >
                      <TableCell className="font-mono text-xs">{child.code}</TableCell>
                      <TableCell className="font-medium">{child.name}</TableCell>
                      <TableCell className="text-xs">{child.username ?? "—"}</TableCell>
                      <TableCell className="max-w-[10rem] truncate text-xs text-muted-foreground">
                        {child.email ?? "—"}
                      </TableCell>
                      <TableCell className="text-right tabular-nums text-xs">
                        {summary ? (
                          <div className="space-y-0.5">
                            <div>{`${summary.total_share_rate ?? 0}%`}</div>
                            {parentTotalShareRate && parentTotalShareRate > 0 ? (
                              <div className="text-[11px] text-muted-foreground">
                                {t("profile.relativeShareRateValue", {
                                  defaultValue: "占上级 {{rate}}%",
                                  rate: relativeShareRate(
                                    summary.total_share_rate,
                                    parentTotalShareRate,
                                  ) ?? "0",
                                })}
                              </div>
                            ) : null}
                          </div>
                        ) : "—"}
                      </TableCell>
                      <TableCell className="text-right tabular-nums text-xs">
                        {summary ? formatCredit(summary.credit_limit) : "—"}
                      </TableCell>
                      <TableCell className="text-right tabular-nums text-xs">
                        {summary ? formatCredit(summary.allocated_credit) : "—"}
                      </TableCell>
                      <TableCell className="text-center tabular-nums text-xs">
                        {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 bg-card text-center shadow-[-1px_0_0_rgba(203,213,225,0.7)]"
                          onClick={(e) => e.stopPropagation()}
                        >
                          <AdminRowActionsMenu
                            actions={[
                              {
                                key: "edit",
                                label: editChildLabel,
                                icon: Pencil,
                                onClick: () => onEditChild(child),
                              },
                              {
                                key: "delete",
                                label: deleteChildLabel,
                                icon: Trash2,
                                destructive: true,
                                disabled: !canDeleteChild(child),
                                onClick: () => onDeleteChild(child),
                              },
                            ]}
                          />
                        </TableCell>
                      ) : null}
                    </TableRow>
                  );
                })
              )}
            </TableBody>
          </Table>
        </div>
    </div>
  );
}

function MetricCard({
  label,
  value,
  subtitle,
  accent = false,
  highlight = false,
}: {
  label: string;
  value: string;
  subtitle?: string;
  accent?: boolean;
  highlight?: boolean;
}): React.ReactElement {
  return (
    <div
      className={cn(
        "rounded-xl border bg-card px-4 py-4 shadow-sm transition-colors",
        highlight && "border-primary/25 bg-primary/[0.04]",
        accent && !highlight && "border-border/70",
        !accent && !highlight && "border-border/70",
      )}
    >
      <p className="text-xs font-medium text-muted-foreground">{label}</p>
      <p
        className={cn(
          "mt-1.5 text-2xl font-semibold tabular-nums tracking-tight",
          highlight ? "text-primary" : "text-foreground",
        )}
      >
        {value}
      </p>
      {subtitle ? <p className="mt-1 text-xs text-muted-foreground">{subtitle}</p> : null}
    </div>
  );
}
