import AddOutlined from "@mui/icons-material/AddOutlined";
import Checkbox from "@mui/material/Checkbox";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogTitle from "@mui/material/DialogTitle";
import FormControlLabel from "@mui/material/FormControlLabel";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
import { useMemo, useState } from "react";
import { AdminSwitch } from "@/shared/ui/AdminSwitch.jsx";
import { Button } from "@/shared/ui/Button.jsx";
import { formatDecimal } from "@/shared/utils/rtpProbability.js";
import {
  configToForm,
  correctAllStageProbabilities,
  formToConfig,
  nextStageMultiplier,
  stageSummary
} from "../configForm.js";
import { formatNumber, formatPercent } from "../format.js";
import { OpsStatusBadge } from "./OpsStatusBadge.jsx";

export function LuckyGiftConfigDialog({ appOptions = [], config, mode = "edit", onClose, onSubmit, saving }) {
  const [form, setForm] = useState(() => configToForm(config));
  const [activeStage, setActiveStage] = useState("novice");

  const stageSummaries = useMemo(() => form.stages.map((stage) => stageSummary(stage, form)), [form]);
  const activeStageKey = form.stages.some((stage) => stage.stage === activeStage) ? activeStage : form.stages[0]?.stage;
  const activeStageConfig = form.stages.find((stage) => stage.stage === activeStageKey);
  const activeSummary = stageSummaries.find((summary) => summary.stageKey === activeStageKey);

  const updateField = (field, value) => {
    setForm((current) => {
      const next = { ...current, [field]: value };
      // 目标 RTP 决定各奖档概率的闭合解，改动后全部阶段重算，避免展示的概率和将要发布的值不一致。
      return field === "target_rtp_percent" ? correctAllStageProbabilities(next) : next;
    });
  };

  const updateStageTier = (stageKey, tierIndex, patch) => {
    setForm((current) =>
      correctAllStageProbabilities({
        ...current,
        stages: current.stages.map((stage) =>
          stage.stage === stageKey
            ? {
                ...stage,
                tiers: stage.tiers.map((tier, index) => (index === tierIndex ? { ...tier, ...patch } : tier))
              }
            : stage
        )
      })
    );
  };

  const addStageTier = (stageKey) => {
    setForm((current) =>
      correctAllStageProbabilities({
        ...current,
        stages: current.stages.map((stage) =>
          stage.stage === stageKey
            ? {
                ...stage,
                tiers: [
                  ...stage.tiers,
                  {
                    enabled: true,
                    // 10 倍以上属于高倍档，默认只在奖池高水位时开放，防止新档位直接击穿保底线。
                    highWaterOnly: nextStageMultiplier(stage.tiers) >= 10,
                    multiplier: String(nextStageMultiplier(stage.tiers)),
                    probabilityPercent: "0",
                    tierId: ""
                  }
                ]
              }
            : stage
        )
      })
    );
  };

  const removeStageTier = (stageKey, tierIndex) => {
    setForm((current) =>
      correctAllStageProbabilities({
        ...current,
        stages: current.stages.map((stage) =>
          stage.stage === stageKey ? { ...stage, tiers: stage.tiers.filter((_, index) => index !== tierIndex) } : stage
        )
      })
    );
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    onSubmit(formToConfig(config, form));
  };

  const isCreate = mode === "create";
  const title = isCreate ? "添加幸运礼物配置" : config.is_default ? "发布幸运礼物配置" : "新增幸运礼物版本";

  return (
    <Dialog fullWidth maxWidth="lg" open onClose={saving ? undefined : onClose}>
      <form className="ops-config-form" onSubmit={handleSubmit}>
        <DialogTitle className="ops-config-title">
          <span>{title}</span>
          <small>
            {form.app_code || "-"} / {form.pool_id || "default"} /{" "}
            {config.is_default || isCreate ? "默认草稿" : `当前版本 v${config.rule_version ?? "-"}`}
          </small>
        </DialogTitle>
        <DialogContent dividers>
          <div className="ops-config-metrics">
            <ConfigMetric label="应用" value={form.app_code || "-"} />
            <ConfigMetric label="奖池" value={form.pool_id || "default"} />
            <ConfigMetric label="目标 RTP" value={formatPercent(Number(form.target_rtp_percent))} />
            <ConfigMetric label="奖池回收" value={formatPercent(Number(form.pool_rate_percent))} />
            <ConfigMetric label="结算窗口" value={formatNumber(Number(form.settlement_window_wager))} />
            <ConfigMetric label="状态" value={form.enabled ? "启用" : "停用"} />
          </div>

          <div className="ops-config-layout">
            <aside className="ops-config-params" aria-label="基础参数">
              <section className="ops-config-section">
                <h3>规则身份</h3>
                {isCreate ? (
                  <TextField
                    fullWidth
                    required
                    label="应用"
                    select
                    size="small"
                    value={form.app_code}
                    onChange={(event) => updateField("app_code", event.target.value)}
                  >
                    {appOptions.map(([value, label]) => (
                      <MenuItem key={value} value={value}>
                        {label}
                      </MenuItem>
                    ))}
                  </TextField>
                ) : (
                  <TextField disabled fullWidth label="应用" size="small" value={form.app_code} />
                )}
                <TextField
                  fullWidth
                  required
                  helperText="修改奖池 ID 会发布到新的奖池，不影响原奖池"
                  label="奖池"
                  size="small"
                  value={form.pool_id}
                  onChange={(event) => updateField("pool_id", event.target.value)}
                />
                <FormControlLabel
                  control={<AdminSwitch checked={form.enabled} onChange={(event) => updateField("enabled", event.target.checked)} />}
                  label={form.enabled ? "发布后立即启用" : "发布后保持停用"}
                  sx={{ gap: 1, marginLeft: 0 }}
                />
              </section>

              <section className="ops-config-section">
                <h3>RTP 与奖池</h3>
                <div className="ops-form-grid">
                  <NumberField form={form} label="目标 RTP (%)" name="target_rtp_percent" step="0.01" onChange={updateField} />
                  <NumberField form={form} label="奖池回收率 (%)" name="pool_rate_percent" step="0.01" onChange={updateField} />
                  <NumberField form={form} label="控制带宽 (%)" name="control_band_percent" step="0.01" onChange={updateField} />
                  <NumberField form={form} label="结算窗口流水" name="settlement_window_wager" onChange={updateField} />
                  <NumberField form={form} label="礼物参考金额" name="gift_price_reference" onChange={updateField} />
                </div>
              </section>
            </aside>

            <section className="ops-stage-designer" aria-label="阶段奖档设计">
              <div className="ops-stage-tabs" role="tablist" aria-label="阶段奖档">
                {stageSummaries.map((summary) => (
                  <button
                    aria-selected={summary.stageKey === activeStageKey}
                    className={`ops-stage-tab ${summary.stageKey === activeStageKey ? "is-active" : ""} ${summary.ok ? "is-ok" : "is-warn"}`}
                    key={summary.stageKey}
                    role="tab"
                    type="button"
                    onClick={() => setActiveStage(summary.stageKey)}
                  >
                    <span>{summary.tabLabel}</span>
                  </button>
                ))}
              </div>
              {activeStageConfig ? (
                <div className="ops-stage-stack">
                  <div className="ops-stage-block__head">
                    <div>
                      <h3>{activeSummary?.stageLabel}</h3>
                      <OpsStatusBadge
                        label={`${activeSummary?.status} · 概率 ${formatDecimal(activeSummary?.probability)}% · 期望 RTP ${formatDecimal(activeSummary?.expected)}%`}
                        tone={activeSummary?.ok ? "succeeded" : "warning"}
                      />
                    </div>
                    <Button startIcon={<AddOutlined fontSize="small" />} onClick={() => addStageTier(activeStageConfig.stage)}>
                      添加奖档
                    </Button>
                  </div>
                  <div className="ops-tier-table">
                    <div className="ops-tier-head" aria-hidden="true">
                      <span>倍率</span>
                      <span>概率 %</span>
                      <span>高水位</span>
                      <span>启用</span>
                      <span>操作</span>
                    </div>
                    {activeStageConfig.tiers.map((tier, index) => (
                      <div className="ops-tier-row" key={`${activeStageConfig.stage}-${index}`}>
                        <TextField
                          required
                          size="small"
                          slotProps={{ htmlInput: { "aria-label": "倍率", min: 0, step: "0.01" } }}
                          type="number"
                          value={tier.multiplier}
                          onChange={(event) =>
                            updateStageTier(activeStageConfig.stage, index, {
                              // 10 倍及以上强制只走高水位，输入时同步勾选并锁死，防止高倍档在低水位放开。
                              highWaterOnly: Number(event.target.value) >= 10 || tier.highWaterOnly,
                              multiplier: event.target.value
                            })
                          }
                        />
                        {/* 概率由目标 RTP 和倍率统一校正，保持只读可以避免运营手填后绕过服务端概率闭合校验。 */}
                        <TextField
                          size="small"
                          slotProps={{ htmlInput: { "aria-label": "概率 %", readOnly: true } }}
                          value={formatDecimal(tier.probabilityPercent)}
                        />
                        <Checkbox
                          checked={Boolean(tier.highWaterOnly)}
                          disabled={Number(tier.multiplier) >= 10}
                          size="small"
                          slotProps={{ input: { "aria-label": "高水位" } }}
                          onChange={(event) => updateStageTier(activeStageConfig.stage, index, { highWaterOnly: event.target.checked })}
                        />
                        <Checkbox
                          checked={tier.enabled !== false}
                          size="small"
                          slotProps={{ input: { "aria-label": "启用" } }}
                          onChange={(event) => updateStageTier(activeStageConfig.stage, index, { enabled: event.target.checked })}
                        />
                        <Button
                          disabled={activeStageConfig.tiers.length <= 1}
                          variant="danger"
                          onClick={() => removeStageTier(activeStageConfig.stage, index)}
                        >
                          删除
                        </Button>
                      </div>
                    ))}
                  </div>
                </div>
              ) : null}
            </section>
          </div>
        </DialogContent>
        <DialogActions>
          <Button disabled={saving} onClick={onClose}>
            取消
          </Button>
          <Button disabled={saving} type="submit" variant="primary">
            {saving ? "保存中" : "保存配置"}
          </Button>
        </DialogActions>
      </form>
    </Dialog>
  );
}

function ConfigMetric({ label, value }) {
  return (
    <article className="ops-config-metric">
      <span>{label}</span>
      <strong>{value}</strong>
    </article>
  );
}

function NumberField({ form, label, name, onChange, step = "1" }) {
  return (
    <TextField
      label={label}
      required
      size="small"
      slotProps={{ htmlInput: { min: 0, step } }}
      type="number"
      value={form[name]}
      onChange={(event) => onChange(name, event.target.value)}
    />
  );
}