"use client";

import { useTranslation } from "react-i18next";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import { formatAdminCreditMajorDecimal } from "@/lib/money";
import { cn } from "@/lib/utils";
import type { AgentParentCaps } from "@/types/api/admin-agent";

export type AgentProfileFieldsProps = {
  disabled?: boolean;
  loading?: boolean;
  parentCaps: AgentParentCaps | null;
  availableCredit: number | null;
  canCreateChildAgent: boolean;
  isSuperAdmin: boolean;
  shareRate: string;
  onShareRateChange: (value: string) => void;
  creditLimit: string;
  onCreditLimitChange: (value: string) => void;
  rebateLimit: string;
  onRebateLimitChange: (value: string) => void;
  defaultRebate: string;
  onDefaultRebateChange: (value: string) => void;
  settlementCycle: "daily" | "weekly" | "monthly";
  onSettlementCycleChange: (value: "daily" | "weekly" | "monthly") => void;
  extraRebate: boolean;
  onExtraRebateChange: (value: boolean) => void;
  canCreatePlayer: boolean;
  onCanCreatePlayerChange: (value: boolean) => void;
  canCreateChild: boolean;
  onCanCreateChildChange: (value: boolean) => void;
  riskTags: string;
  onRiskTagsChange: (value: string) => void;
  idPrefix?: string;
  currencyCode?: string;
  /** card：用于代理线路详情 Tab 内的卡片表单 */
  variant?: "default" | "card";
};

export function AgentProfileFields({
  disabled = false,
  loading = false,
  parentCaps,
  availableCredit,
  canCreateChildAgent,
  isSuperAdmin,
  shareRate,
  onShareRateChange,
  creditLimit,
  onCreditLimitChange,
  rebateLimit,
  onRebateLimitChange,
  defaultRebate,
  onDefaultRebateChange,
  settlementCycle,
  onSettlementCycleChange,
  extraRebate,
  onExtraRebateChange,
  canCreatePlayer,
  onCanCreatePlayerChange,
  canCreateChild,
  onCanCreateChildChange,
  riskTags,
  onRiskTagsChange,
  idPrefix = "agent-profile",
  currencyCode = "NPR",
  variant = "default",
}: AgentProfileFieldsProps): React.ReactElement {
  const { t } = useTranslation(["agents", "common"]);
  const fieldDisabled = disabled || loading;
  const isCard = variant === "card";

  return (
    <div className="space-y-5">
      {(parentCaps || availableCredit !== null) && !loading ? (
        <div
          className={cn(
            "rounded-lg text-xs text-muted-foreground",
            isCard ? "border border-border/60 bg-muted/25 px-3 py-2.5 space-y-1" : "space-y-1",
          )}
        >
          {parentCaps ? (
            <p>
              {t("profile.parentCaps", {
                defaultValue: "上级占成 {{share}}%，可下发额度 {{credit}}",
                share: parentCaps.total_share_rate,
                credit: formatAdminCreditMajorDecimal(parentCaps.available_credit, currencyCode),
              })}
            </p>
          ) : null}
          {availableCredit !== null ? (
            <p>
              {t("profile.availableCredit", {
                defaultValue: "可下发额度：{{amount}}",
                amount: formatAdminCreditMajorDecimal(availableCredit, currencyCode),
              })}
            </p>
          ) : null}
        </div>
      ) : null}
      {loading ? (
        <p className="text-sm text-muted-foreground">
          {t("profile.loading", { defaultValue: "正在加载占成与授信…" })}
        </p>
      ) : null}

      <div
        className={cn(
          "grid gap-4 sm:grid-cols-2",
          fieldDisabled ? "pointer-events-none opacity-50" : "",
        )}
      >
        <div className="space-y-2">
          <Label htmlFor={`${idPrefix}-share-rate`}>
            {t("profile.totalShareRate", { defaultValue: "占成比例 (%)" })}
          </Label>
          <Input
            id={`${idPrefix}-share-rate`}
            type="number"
            min={0}
            max={100}
            step="0.01"
            value={shareRate}
            onChange={(e) => onShareRateChange(e.target.value)}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor={`${idPrefix}-credit-limit`}>
            {t("profile.creditLimit", { defaultValue: "授信额度" })}
          </Label>
          <Input
            id={`${idPrefix}-credit-limit`}
            type="number"
            min={0}
            value={creditLimit}
            onChange={(e) => onCreditLimitChange(e.target.value)}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor={`${idPrefix}-rebate-limit`}>
            {t("profile.rebateLimit", { defaultValue: "回水上限 (%)" })}
          </Label>
          <Input
            id={`${idPrefix}-rebate-limit`}
            type="number"
            min={0}
            max={100}
            step="0.01"
            value={rebateLimit}
            onChange={(e) => onRebateLimitChange(e.target.value)}
            placeholder="0.5"
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor={`${idPrefix}-default-rebate`}>
            {t("profile.defaultPlayerRebate", { defaultValue: "默认玩家回水 (%)" })}
          </Label>
          <Input
            id={`${idPrefix}-default-rebate`}
            type="number"
            min={0}
            max={100}
            step="0.01"
            value={defaultRebate}
            onChange={(e) => onDefaultRebateChange(e.target.value)}
            placeholder="0.5"
          />
        </div>
        <div className="space-y-2 sm:col-span-2">
          <Label htmlFor={`${idPrefix}-risk-tags`}>
            {t("profile.riskTags", { defaultValue: "风控标签" })}
          </Label>
          <Input
            id={`${idPrefix}-risk-tags`}
            value={riskTags}
            onChange={(e) => onRiskTagsChange(e.target.value)}
            placeholder={t("profile.riskTagsPlaceholder", {
              defaultValue: "逗号分隔，如 overdue, high_turnover",
            })}
          />
        </div>
        <div className="space-y-2 sm:col-span-2">
          <Label htmlFor={`${idPrefix}-settlement-cycle`}>
            {t("profile.settlementCycle", { defaultValue: "结算周期" })}
          </Label>
          <Select
            value={settlementCycle}
            onValueChange={(value) =>
              onSettlementCycleChange((value as "daily" | "weekly" | "monthly") ?? "weekly")
            }
          >
            <SelectTrigger id={`${idPrefix}-settlement-cycle`}>
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="daily">{t("profile.cycleDaily", { defaultValue: "日结" })}</SelectItem>
              <SelectItem value="weekly">{t("profile.cycleWeekly", { defaultValue: "周结" })}</SelectItem>
              <SelectItem value="monthly">{t("profile.cycleMonthly", { defaultValue: "月结" })}</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

      <div
        className={cn(
          "space-y-4 border-t border-border/60 pt-4",
          fieldDisabled ? "pointer-events-none opacity-50" : "",
        )}
      >
        {!isCard ? (
          <p className="text-xs text-muted-foreground">
            {t("profile.capabilityHint", {
              defaultValue:
                "保存后约束该代理主账号能否开玩家/下级；与平台「代理」角色叠加，以本开关为准。",
            })}
          </p>
        ) : null}
        <div className="grid gap-4 sm:grid-cols-1">
          <SwitchRow
            checked={extraRebate}
            onCheckedChange={onExtraRebateChange}
            label={t("profile.canGrantExtraRebate", { defaultValue: "允许额外回水" })}
          />
          <SwitchRow
            checked={canCreatePlayer}
            onCheckedChange={onCanCreatePlayerChange}
            label={t("profile.canCreatePlayer", { defaultValue: "允许创建玩家" })}
          />
          <SwitchRow
            checked={canCreateChild}
            onCheckedChange={onCanCreateChildChange}
            disabled={!canCreateChildAgent && !isSuperAdmin}
            label={t("profile.canCreateChildAgent", { defaultValue: "允许创建下级代理" })}
          />
        </div>
      </div>
    </div>
  );
}

function SwitchRow({
  checked,
  onCheckedChange,
  label,
  disabled = false,
}: {
  checked: boolean;
  onCheckedChange: (value: boolean) => void;
  label: string;
  disabled?: boolean;
}): React.ReactElement {
  return (
    <div className="flex items-center justify-between gap-4 rounded-lg border border-border/60 bg-muted/20 px-3 py-2.5">
      <Label className="font-normal">{label}</Label>
      <Switch checked={checked} onCheckedChange={onCheckedChange} disabled={disabled} />
    </div>
  );
}