/**
 * 设置抽屉。两端的"改东西"都收在这里，所以密码闸门也只有一个入口。
 *
 * # 打开面板 ≠ 解锁
 *
 * 面板本身由 `App` 在**解锁之后**才挂载，但面板里的每个改动仍然各自过一次后端闸门
 * （`bind_camera` 等都会校验）。所以即使有人把这里改成"不需要密码"，配置也改不动。
 *
 * # 发现列表按需放开
 *
 * 挂载时调 `set_discovery_open(true)`，卸载时关掉。这是用户端唯一会列出别的图传板的
 * 时候——**画面不会**因此进来，接收端那道闸门只管帧，不管发现（见 `cam_core::receiver`）。
 */

import { useCallback, useEffect, useMemo, useState } from "react";

import { api } from "../lib/ipc";
import { teamName } from "../lib/format";
import type {
  ConfigView,
  CrosshairConfig,
  HudView,
  Snapshot,
} from "../lib/types";
import { Button, Field, Section, Select, Slider, Switch } from "./controls";

interface Props {
  snapshot: Snapshot;
  hud: HudView;
  onHud: (hud: HudView) => void;
  calibrating: boolean;
  onCalibrating: (active: boolean) => void;
  onClose: () => void;
  onNeedsUnlock: (reason: string) => void;
  onError: (message: string) => void;
  onInfo: (message: string) => void;
  /** 配置变了（身份/绑定）。App 用它立刻刷新顶层状态。 */
  onConfig: (config: ConfigView) => void;
}

/** HUD 的滑杆每动一下都会触发保存，节流一下，免得写盘几十次。 */
const SAVE_DEBOUNCE_MS = 350;

export function SettingsPanel({
  snapshot,
  hud,
  onHud,
  calibrating,
  onCalibrating,
  onClose,
  onNeedsUnlock,
  onError,
  onInfo,
  onConfig,
}: Props) {
  const config = snapshot.config;
  const locked = !snapshot.unlocked && config.role !== "referee";

  // 打开面板时放开发现列表（后端会校验是否已解锁）。
  useEffect(() => {
    if (locked) return;

    void api.setDiscoveryOpen(true).catch((err) => {
      onNeedsUnlock(err instanceof Error ? err.message : String(err));
    });

    return () => {
      void api.setDiscoveryOpen(false).catch(() => undefined);
    };
  }, [locked, onNeedsUnlock]);

  // HUD 的保存节流。滑杆一停就写。
  const [pending, setPending] = useState<HudView | null>(null);

  useEffect(() => {
    if (!pending) return;

    const timer = window.setTimeout(() => {
      setPending(null);
      void api.saveHud(pending).then(onConfig).catch((err) => {
        onError(err instanceof Error ? err.message : String(err));
      });
    }, SAVE_DEBOUNCE_MS);

    return () => window.clearTimeout(timer);
  }, [pending, onConfig, onError]);

  const update = useCallback(
    (change: (draft: HudView) => void) => {
      const next = structuredClone(hud);
      change(next);
      onHud(next);
      setPending(next);
    },
    [hud, onHud],
  );

  const run = async (action: () => Promise<ConfigView>) => {
    try {
      onConfig(await action());
      await api.refresh();
    } catch (err) {
      const message = err instanceof Error ? err.message : String(err);

      if (message.includes("密码")) {
        onNeedsUnlock(message);
        return;
      }

      onError(message);
    }
  };

  const cameraOptions = useMemo(
    () =>
      snapshot.cameras.map((camera) => ({
        value: camera.id,
        label: camera.idText,
        hint: `${camera.addr} · ${camera.online ? "在线" : "离线"}${
          snapshot.stats.find((s) => s.camera === camera.id)?.hasFrames ? "" : " · 无画面"
        }`,
      })),
    [snapshot.cameras, snapshot.stats],
  );

  const armorOptions = useMemo(
    () =>
      snapshot.armorBoards.map((board) => ({
        value: board.id,
        label: board.idText,
        hint: `${board.addr} · ${teamName(board.team)} · ${board.hp} 血 · ${
          board.online ? "在线" : "离线"
        }`,
      })),
    [snapshot.armorBoards],
  );

  return (
    <aside className="drawer">
      <header className="drawer__head">
        <h2 className="drawer__title">设置</h2>
        <div className="drawer__head-actions">
          {config.role === "team" && (
            <Button
              variant="ghost"
              onClick={() => {
                void api.lock().then(() => {
                  onInfo("已重新上锁。");
                  onClose();
                });
              }}
            >
              上锁
            </Button>
          )}
          <Button variant="ghost" onClick={onClose}>
            关闭
          </Button>
        </div>
      </header>

      {locked && (
        <p className="drawer__locked">
          这个面板的改动需要密码。<button onClick={() => onNeedsUnlock("改动设置需要密码")}>立即解锁</button>
        </p>
      )}

      <div className="drawer__body">
        <Section title="身份">
          <Field label="这台机器是哪一端">
            <Select
              value={config.role}
              options={[
                { value: "team", label: "用户端", hint: "一路画面 + 血条 + 瞄准器" },
                { value: "referee", label: "裁判端", hint: "两路 + 双方血量 + 录制" },
              ]}
              onChange={(role) => void run(() => api.setRole(role))}
            />
          </Field>
          <p className="section__note">
            离开用户端要密码：否则切到裁判端就能看两路画面、也能随便改配置。
          </p>
        </Section>

        {config.role === "team" && (
          <>
            <Section
              title="绑定"
              hint="图传板与装甲板都用 MAC 派生的 id 标识，重启不变，所以绑定是稳的。改动需要密码。"
            >
              <Field label="摄像头（图传板）">
                <Select
                  value={config.cameraId}
                  options={cameraOptions}
                  onChange={(id) => void run(() => api.bindCamera(id))}
                />
              </Field>

              <Field label="装甲板主板" hint="决定血条读谁的血量。下拉里是场上正在广播的板子。">
                <Select
                  value={config.armorId}
                  options={armorOptions}
                  onChange={(id) => void run(() => api.bindArmor(id))}
                />
              </Field>

              <Field label="自己属于哪一边" hint="改错队号会让血条显示对手的血量。">
                <Select
                  value={config.team}
                  options={[
                    { value: 0, label: "队伍一（红）" },
                    { value: 1, label: "队伍二（蓝）" },
                  ]}
                  onChange={(team) => void run(() => api.setTeam(team))}
                />
              </Field>

              <Switch
                checked={config.mirror}
                label="左右镜像画面（摄像头装反了）"
                onChange={(mirror) => void run(() => api.setMirror(mirror))}
              />

              {cameraOptions.length === 0 && (
                <p className="section__note section__note--warn">
                  现在没有发现任何图传板。板子每 2 秒广播一次，确认它已上电、和这台机器在同一个
                  网络里，然后稍等。
                </p>
              )}
            </Section>

            <Section title="瞄准器" hint="位置跟着画面走，大小不跟着缩放走——放大后准星更精确。">
              <Switch
                checked={hud.crosshair.visible}
                label="显示瞄准器"
                onChange={(visible) =>
                  update((draft) => {
                    draft.crosshair.visible = visible;
                  })
                }
              />

              <Field label="样式">
                <Select
                  value={hud.crosshair.style}
                  options={[
                    { value: "cross", label: "四臂十字" },
                    { value: "cross-dot", label: "十字 + 中心点" },
                    { value: "circle-dot", label: "圆环 + 中心点" },
                    { value: "dot", label: "只有点" },
                  ]}
                  onChange={(style) =>
                    update((draft) => {
                      draft.crosshair.style = style;
                    })
                  }
                />
              </Field>

              <Field label="大小" hint="画面短边的比例">
                <Slider
                  value={hud.crosshair.size}
                  min={0.01}
                  max={0.2}
                  step={0.005}
                  format={(value) => `${(value * 100).toFixed(1)}%`}
                  onChange={(size) =>
                    update((draft) => {
                      draft.crosshair.size = size;
                    })
                  }
                />
              </Field>

              <Field label="线宽">
                <Slider
                  value={hud.crosshair.thickness}
                  min={0.001}
                  max={0.02}
                  step={0.0005}
                  format={(value) => value.toFixed(4)}
                  onChange={(thickness) =>
                    update((draft) => {
                      draft.crosshair.thickness = thickness;
                    })
                  }
                />
              </Field>

              <Field label="中心空隙">
                <Slider
                  value={hud.crosshair.gap}
                  min={0}
                  max={0.1}
                  step={0.002}
                  format={(value) => `${(value * 100).toFixed(1)}%`}
                  onChange={(gap) =>
                    update((draft) => {
                      draft.crosshair.gap = gap;
                    })
                  }
                />
              </Field>

              <Field label="颜色">
                <input
                  className="color"
                  type="color"
                  value={hud.crosshair.color}
                  onChange={(event) =>
                    update((draft) => {
                      draft.crosshair.color = event.target.value;
                    })
                  }
                />
              </Field>

              <Calibration
                crosshair={hud.crosshair}
                calibrating={calibrating}
                onCalibrating={onCalibrating}
                onChange={(offsetX, offsetY) =>
                  update((draft) => {
                    draft.crosshair.offsetX = offsetX;
                    draft.crosshair.offsetY = offsetY;
                  })
                }
              />
            </Section>

            <Section title="叠加与提示">
              <Switch
                checked={hud.grid.visible}
                label="显示网格"
                onChange={(visible) =>
                  update((draft) => {
                    draft.grid.visible = visible;
                  })
                }
              />

              {hud.grid.visible && (
                <>
                  <Field label="网格样式">
                    <Select
                      value={hud.grid.style}
                      options={[
                        { value: "thirds", label: "三分线" },
                        { value: "squares", label: "等分方格" },
                        { value: "cross", label: "中心十字" },
                      ]}
                      onChange={(style) =>
                        update((draft) => {
                          draft.grid.style = style;
                        })
                      }
                    />
                  </Field>

                  {hud.grid.style === "squares" && (
                    <Field label="等分数">
                      <Slider
                        value={hud.grid.divisions}
                        min={2}
                        max={16}
                        step={1}
                        format={(value) => `${value} 格`}
                        onChange={(divisions) =>
                          update((draft) => {
                            draft.grid.divisions = divisions;
                          })
                        }
                      />
                    </Field>
                  )}

                  <Field label="网格明显程度">
                    <Slider
                      value={hud.grid.opacity}
                      min={0.05}
                      max={1}
                      step={0.01}
                      format={(value) => value.toFixed(2)}
                      onChange={(opacity) =>
                        update((draft) => {
                          draft.grid.opacity = opacity;
                        })
                      }
                    />
                  </Field>
                </>
              )}

              <Switch
                checked={hud.showZoom}
                label="显示放大倍率"
                onChange={(showZoom) =>
                  update((draft) => {
                    draft.showZoom = showZoom;
                  })
                }
              />

              <Switch
                checked={hud.hitFeedback.flash}
                label="被打中时闪红"
                onChange={(flash) =>
                  update((draft) => {
                    draft.hitFeedback.flash = flash;
                  })
                }
              />

              <Switch
                checked={hud.hitFeedback.shake}
                label="被打中时画面抖动"
                onChange={(shake) =>
                  update((draft) => {
                    draft.hitFeedback.shake = shake;
                  })
                }
              />

              <Switch
                checked={hud.hitFeedback.marker}
                label="在瞄点旁显示伤害数字"
                onChange={(marker) =>
                  update((draft) => {
                    draft.hitFeedback.marker = marker;
                  })
                }
              />

              <Field label="反馈强度">
                <Slider
                  value={hud.hitFeedback.intensity}
                  min={0.2}
                  max={2}
                  step={0.1}
                  format={(value) => `${value.toFixed(1)}×`}
                  onChange={(intensity) =>
                    update((draft) => {
                      draft.hitFeedback.intensity = intensity;
                    })
                  }
                />
              </Field>
            </Section>

            <Section title="血条">
              <Switch
                checked={hud.health.visible}
                label="显示血条"
                onChange={(visible) =>
                  update((draft) => {
                    draft.health.visible = visible;
                  })
                }
              />
              <Switch
                checked={hud.health.showNumbers}
                label="显示血量数字"
                onChange={(showNumbers) =>
                  update((draft) => {
                    draft.health.showNumbers = showNumbers;
                  })
                }
              />
              <Switch
                checked={hud.health.showTeamName}
                label="显示队伍名"
                onChange={(showTeamName) =>
                  update((draft) => {
                    draft.health.showTeamName = showTeamName;
                  })
                }
              />
              <Switch
                checked={hud.health.pulse}
                label="低血时脉动"
                onChange={(pulse) =>
                  update((draft) => {
                    draft.health.pulse = pulse;
                  })
                }
              />
              <Field label="低血阈值">
                <Slider
                  value={hud.health.lowThreshold}
                  min={5}
                  max={100}
                  step={5}
                  format={(value) => `${value} 血`}
                  onChange={(lowThreshold) =>
                    update((draft) => {
                      draft.health.lowThreshold = lowThreshold;
                    })
                  }
                />
              </Field>
              <Field label="血条宽度" hint="占画面宽度的比例">
                <Slider
                  value={hud.health.width}
                  min={0.15}
                  max={0.9}
                  step={0.01}
                  format={(value) => `${(value * 100).toFixed(0)}%`}
                  onChange={(width) =>
                    update((draft) => {
                      draft.health.width = width;
                    })
                  }
                />
              </Field>
            </Section>
          </>
        )}

        {config.role === "referee" && (
          <Section
            title="裁判端槽位"
            hint="默认按装甲板自报的队伍自动分左右。有烧错固件的板子时打开手动指定。"
          >
            <Switch
              checked={snapshot.slots.manual}
              label="手动指定槽位"
              onChange={(manual) =>
                void run(() =>
                  api.setRefereeSlots({
                    cameraA: snapshot.slots.cameraA,
                    cameraB: snapshot.slots.cameraB,
                    armorA: snapshot.slots.armorA,
                    armorB: snapshot.slots.armorB,
                    manual,
                  }),
                )
              }
            />

            {snapshot.slots.manual && (
              <>
                <Field label="左格：队伍一摄像头">
                  <Select
                    value={snapshot.slots.cameraA}
                    options={cameraOptions}
                    onChange={(cameraA) =>
                      void run(() =>
                        api.setRefereeSlots({ ...snapshot.slots, cameraA, manual: true }),
                      )
                    }
                  />
                </Field>
                <Field label="左格：队伍一装甲板">
                  <Select
                    value={snapshot.slots.armorA}
                    options={armorOptions}
                    onChange={(armorA) =>
                      void run(() =>
                        api.setRefereeSlots({ ...snapshot.slots, armorA, manual: true }),
                      )
                    }
                  />
                </Field>
                <Field label="右格：队伍二摄像头">
                  <Select
                    value={snapshot.slots.cameraB}
                    options={cameraOptions}
                    onChange={(cameraB) =>
                      void run(() =>
                        api.setRefereeSlots({ ...snapshot.slots, cameraB, manual: true }),
                      )
                    }
                  />
                </Field>
                <Field label="右格：队伍二装甲板">
                  <Select
                    value={snapshot.slots.armorB}
                    options={armorOptions}
                    onChange={(armorB) =>
                      void run(() =>
                        api.setRefereeSlots({ ...snapshot.slots, armorB, manual: true }),
                      )
                    }
                  />
                </Field>
              </>
            )}
          </Section>
        )}

        <Section title="录制与截图" hint="截图存 PNG，录制存 mp4（需要 ffmpeg）。">
          <Field label="输出目录">
            <input
              className="input"
              type="text"
              defaultValue={config.recordingDir}
              onBlur={(event) => {
                const value = event.target.value.trim();
                if (value !== config.recordingDir) {
                  void run(() => api.setRecordingOptions({ dir: value, ffmpeg: null, crf: null, preset: null }));
                }
              }}
            />
          </Field>
          <Field label="ffmpeg 路径" hint="默认从 PATH 找。找不到就录不了，但界面照常用。">
            <input
              className="input"
              type="text"
              defaultValue={config.ffmpeg}
              onBlur={(event) => {
                const value = event.target.value.trim();
                if (value && value !== config.ffmpeg) {
                  void run(() => api.setRecordingOptions({ dir: null, ffmpeg: value, crf: null, preset: null }));
                }
              }}
            />
          </Field>
          <p className="section__note">
            界面内回放要目录在资源协议的白名单里（默认的 ~/Movies/cam-desktop 就在）。
            改到别处时回放会失败，界面上会给出"用系统播放器打开"的退路。
          </p>
        </Section>

        <Section title="安全" hint="密码只挡现场随手改绑；配置文件与程序都在本机，愿意改的人绕得过去。">
          <ChangePassword onDone={onInfo} onError={onError} />
          <div className="row">
            <Button
              variant="danger"
              onClick={() => {
                if (!window.confirm("清空配置？旧文件会被改名成 .bak，然后需要重启程序。")) return;
                void api.clearConfig().then(
                  (message) => onInfo(message),
                  (err) => {
                    const text = err instanceof Error ? err.message : String(err);
                    if (text.includes("密码")) onNeedsUnlock(text);
                    else onError(text);
                  },
                );
              }}
            >
              清空配置
            </Button>

            <Button
              variant="danger"
              onClick={() => {
                if (!window.confirm("退出程序？正在进行的录制会先收尾。")) return;
                void api.quit().catch((err) => {
                  const text = err instanceof Error ? err.message : String(err);
                  if (text.includes("密码")) onNeedsUnlock(text);
                  else onError(text);
                });
              }}
            >
              退出程序
            </Button>
          </div>
        </Section>
      </div>
    </aside>
  );
}

/** 瞄准器偏移：拖画面校准 + 数值微调 + 归零。 */
function Calibration({
  crosshair,
  calibrating,
  onCalibrating,
  onChange,
}: {
  crosshair: CrosshairConfig;
  calibrating: boolean;
  onCalibrating: (active: boolean) => void;
  onChange: (offsetX: number, offsetY: number) => void;
}) {
  return (
    <div className="calibration">
      <Switch
        checked={calibrating}
        label="拖动画面校准瞄准点"
        onChange={onCalibrating}
      />

      <p className="section__note">
        摄像头与枪管不同轴时用这里把瞄点挪到弹着点上。偏移存的是<span className="em">画面比例</span>
        ，所以换分辨率、换窗口大小都不影响它。
      </p>

      <Field label="水平偏移" hint={`${(crosshair.offsetX * 100).toFixed(2)}%`}>
        <Slider
          value={crosshair.offsetX}
          min={-0.3}
          max={0.3}
          step={0.001}
          format={(value) => `${(value * 100).toFixed(2)}%`}
          onChange={(value) => onChange(value, crosshair.offsetY)}
        />
      </Field>

      <Field label="垂直偏移" hint={`${(crosshair.offsetY * 100).toFixed(2)}%`}>
        <Slider
          value={crosshair.offsetY}
          min={-0.3}
          max={0.3}
          step={0.001}
          format={(value) => `${(value * 100).toFixed(2)}%`}
          onChange={(value) => onChange(crosshair.offsetX, value)}
        />
      </Field>

      <Button variant="ghost" onClick={() => onChange(0, 0)}>
        偏移归零
      </Button>
    </div>
  );
}

/** 改密码。 */
function ChangePassword({
  onDone,
  onError,
}: {
  onDone: (message: string) => void;
  onError: (message: string) => void;
}) {
  const [current, setCurrent] = useState("");
  const [fresh, setFresh] = useState("");
  const [busy, setBusy] = useState(false);

  return (
    <div className="password-change">
      <input
        className="input"
        type="password"
        placeholder="当前密码"
        autoComplete="off"
        value={current}
        onChange={(event) => setCurrent(event.target.value)}
      />
      <input
        className="input"
        type="password"
        placeholder="新密码（≥4 位）"
        autoComplete="new-password"
        value={fresh}
        onChange={(event) => setFresh(event.target.value)}
      />
      <Button
        disabled={busy || fresh.length < 4}
        onClick={() => {
          setBusy(true);
          void api
            .setPassword(fresh, current)
            .then(() => {
              onDone("密码已更新。");
              setCurrent("");
              setFresh("");
            })
            .catch((err) => onError(err instanceof Error ? err.message : String(err)))
            .finally(() => setBusy(false));
        }}
      >
        {busy ? "保存中…" : "修改密码"}
      </Button>
    </div>
  );
}