"use client";

import type { ComponentType } from "react";
import { ChevronRight, Network, Pencil, Plus, Trash2, Users } 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 { resolveRoleStatusTone } from "@/lib/admin-status-tone";
import { cn } from "@/lib/utils";
import type { AgentNodeProfileSummary, 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}
            canViewDownlineTab={canViewDownlineTab}
            canViewPlayersTab={canViewPlayersTab}
            playersTabHint={playersTabHint}
            childCount={childAgents.length}
            onGoToDownline={() => onDetailTabChange("downline")}
            onGoToPlayers={() => onDetailTabChange("players")}
          />
        ) : 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
                  ? 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={profile?.can_create_player === true}
            embedded
            createRequestKey={playerCreateRequestKey}
          />
        ) : null}
      </div>
    </div>
  );
}

function OverviewTab({
  profile,
  profileLoading,
  profileReadOnly,
  canViewDownlineTab,
  canViewPlayersTab,
  playersTabHint,
  childCount,
  onGoToDownline,
  onGoToPlayers,
}: {
  profile: AgentProfileRow | null;
  profileLoading: boolean;
  profileReadOnly: boolean;
  canViewDownlineTab: boolean;
  canViewPlayersTab: boolean;
  playersTabHint?: string | null;
  childCount: number;
  onGoToDownline: () => void;
  onGoToPlayers: () => void;
}): 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,
  );

  return (
    <div className="mx-auto max-w-5xl space-y-6">
      {profileReadOnly ? (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
          <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>
      ) : (
        <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,
                  })
                : rebateCap !== null
                  ? t("lineUi.shareRebateCap", {
                      defaultValue: "回水上限 {{rate}}%",
                      rate: rebateCap,
                    })
                  : 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>
      )}

      {!profileReadOnly && !profileLoading && profile ? (
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
          <MetricCard
            label={t("profile.rebateLimit", { defaultValue: "回水上限 (%)" })}
            value={`${percentValueToUi(profile.rebate_limit ?? 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>
      ) : null}

      {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}

      {canViewDownlineTab || canViewPlayersTab || playersTabHint ? (
        <div className="grid gap-4 md:grid-cols-2">
          {canViewDownlineTab ? (
            <OverviewLinkCard
              icon={Network}
              title={t("lineUi.tabDownline", { defaultValue: "直属下级" })}
              summary={t("lineUi.overviewDownlineCount", {
                defaultValue: "{{count}} 个",
                count: childCount,
              })}
              description={t("lineUi.overviewDownlineHint", {
                defaultValue: "直属下级 {{count}} 个，可在对应 Tab 管理下级代理。",
                count: childCount,
              })}
              actionLabel={t("lineUi.viewDownline", { defaultValue: "查看直属下级" })}
              onAction={onGoToDownline}
            />
          ) : null}
          {canViewPlayersTab ? (
            <OverviewLinkCard
              icon={Users}
              title={t("lineUi.tabPlayers", { defaultValue: "直属玩家" })}
              summary={t("lineUi.overviewPlayersSummary", {
                defaultValue: "玩家管理",
              })}
              description={t("lineUi.overviewPlayersHint", {
                defaultValue: "直属玩家请在「直属玩家」Tab 维护。",
              })}
              actionLabel={t("lineUi.viewPlayers", { defaultValue: "查看直属玩家" })}
              onAction={onGoToPlayers}
            />
          ) : null}
          {!canViewPlayersTab && playersTabHint ? (
            <Card className="border-border/70 shadow-sm">
              <CardContent className="flex items-start gap-3 pt-5">
                <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground">
                  <Users className="size-5" aria-hidden />
                </div>
                <div className="min-w-0">
                  <p className="font-medium text-foreground">
                    {t("lineUi.tabPlayers", { defaultValue: "直属玩家" })}
                  </p>
                  <p className="mt-1 text-sm text-muted-foreground">{playersTabHint}</p>
                </div>
              </CardContent>
            </Card>
          ) : null}
        </div>
      ) : null}
    </div>
  );
}

function OverviewLinkCard({
  icon: Icon,
  title,
  summary,
  description,
  actionLabel,
  onAction,
}: {
  icon: ComponentType<{ className?: string }>;
  title: string;
  summary: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
}): React.ReactElement {
  return (
    <Card 
      className="group relative cursor-pointer overflow-hidden border-border/70 shadow-sm transition-all hover:border-primary/40 hover:shadow-md"
      onClick={onAction}
    >
      <CardContent className="flex flex-col p-5">
        <div className="flex items-start justify-between">
          <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
            <Icon className="size-5.5" aria-hidden />
          </div>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="shrink-0 text-primary -mr-2"
            onClick={(e) => {
              e.stopPropagation();
              onAction();
            }}
          >
            {actionLabel}
            <ChevronRight className="ml-0.5 size-4" aria-hidden />
          </Button>
        </div>
        
        <div className="mt-4">
          <p className="text-sm font-medium text-muted-foreground">{title}</p>
          <p className={cn(
            "mt-1 font-semibold tracking-tight text-foreground",
            summary.length > 5 ? "text-xl" : "text-2xl tabular-nums"
          )}>
            {summary}
          </p>
          <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
            {description}
          </p>
        </div>
      </CardContent>
    </Card>
  );
}

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>
  );
}