controller-v2/client/src/pages/SystemPage.tsx

/* ============================================================
   SYSTEM PAGE — Settings
   Design: Reference luxsin_x8_设置.png
   Sections:
     - 显示: 屏幕亮度, 自动锁屏, 旋钮亮度, 旋钮熄屏呼吸灯
     - 通用: 语言, 自动返回首页, 休眠
     - 声音: 开机提示音
     - 关于: 设备名, 固件版本, MAC
   All list rows with options → navigate to /select page
   ============================================================ */
import { useDevice } from "@/contexts/DeviceContext";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useLocation } from "wouter";
import { useEffect } from "react";
import BottomNav from "@/components/BottomNav";
import { navigateToSelect } from "./SelectPage";
import localeZh from "@/locales/data-zh.json";
import localeZhHK from "@/locales/data-zh-HK.json";
import localeEn from "@/locales/data-en.json";

function IOSToggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
  return (
    <label className="ios-toggle" onClick={(e) => e.stopPropagation()}>
      <input type="checkbox" checked={checked} onChange={(e) => onChange(e.target.checked)} />
      <span className="ios-toggle-track"><span className="ios-toggle-thumb" /></span>
    </label>
  );
}

function SectionHeader({ title }: { title: string }) {
  return (
    <div className="px-1 pt-5 pb-2">
      <span className="text-[14px] font-semibold" style={{ color: "#00FFF6" }}>{title}</span>
    </div>
  );
}

function ListRow({ label, description, value, onClick, toggle, checked, onToggle }: {
  label: string; description?: string; value?: string;
  onClick?: () => void; toggle?: boolean; checked?: boolean; onToggle?: (v: boolean) => void;
}) {
  if (toggle) {
    return (
      <div className="ios-list-row">
        <div className="flex-1 min-w-0">
          <div className="text-[16px] text-white">{label}</div>
          {description && <div className="text-[12px] text-white/35 mt-0.5">{description}</div>}
        </div>
        <IOSToggle checked={!!checked} onChange={onToggle ?? (() => {})} />
      </div>
    );
  }
  return (
    <button className="ios-list-row w-full text-left active:bg-white/5 transition-colors" onClick={onClick}>
      <div className="flex-1 min-w-0">
        <div className="text-[16px] text-white">{label}</div>
        {description && <div className="text-[12px] text-white/35 mt-0.5">{description}</div>}
      </div>
      <div className="flex items-center gap-1">
        {value && <span className="ios-row-value">{value}</span>}
        <ChevronRight size={16} className="ios-chevron ml-1" />
      </div>
    </button>
  );
}

type LocaleSettings = {
  settings: {
    vu: string;
    vuMeter?: string;
    screenBrightness: { label: string; options: Array<{ index: number; label: string }> };
    turnOffScreen: { label: string; options: Array<{ index: number; label: string }> };
    knobBrightness: { label: string; options: Array<{ index: number; label: string }> };
    buttonLight: { label: string; options: Array<{ index: number; label: string }> };
    language: { label: string; options: Array<{ index: number; label: string }> };
    Automatic: { label: string; options: Array<{ index: number; label: string }> };
    sleepTime?: { label: string; options: Array<{ index: number; label: string }> };
    sleep?: { label: string; options: Array<{ index: number; label: string }> };
    systemPage: {
      sectionDisplay: string;
      sectionGeneral: string;
      sectionAbout: string;
      screenBrightnessDesc: string;
      turnOffScreenDesc: string;
      knobBrightnessDesc: string;
      buttonLightDesc: string;
      languageDesc: string;
      automaticDesc: string;
      sleepDesc: string;
      deviceName: string;
      firmwareVersion: string;
      macAddress: string;
      deviceIp: string;
    };
  };
};

const LOCALE_BY_LANG: Record<number, LocaleSettings> = {
  0: localeEn as LocaleSettings,
  1: localeZhHK as LocaleSettings,
  2: localeZh as LocaleSettings,
};

function optionLabels(items: Array<{ index: number; label: string }> | undefined, fallback: string[]) {
  if (!items || items.length === 0) return fallback;
  const sorted = [...items].sort((a, b) => a.index - b.index);
  return sorted.map((item) => item.label);
}

export default function SystemPage() {
  const [, setLocation] = useLocation();
  const { deviceState, updateSetting, refresh, isConnected, api, ip } = useDevice();
  const ds = deviceState;

  // 页面加载且已连接时刷新数据
  useEffect(() => {
    if (isConnected || api) {
      refresh();
    }
  }, [isConnected, api]);

  const screenLightIdx = ds?.screenLight ?? 1;
  const buttonLightIdx = ds?.buttonLight ?? 1;
  const screenOffIdx = ds?.screenOff ?? 2;
  const sleepIdx = ds?.sleep ?? 0;
  const autoHomeIdx = ds?.autoHome ?? 1;
  const langIdx = ds?.language ?? 2;
  const knobBreathLightOn = (ds?.knob_breathlight ?? 1) === 0;
  const localeData = LOCALE_BY_LANG[langIdx] ?? localeZh;
  const settingsText = localeData.settings;
  const ui = settingsText.systemPage;
  const SCREEN_LIGHT_OPTIONS = optionLabels(settingsText.screenBrightness?.options, ["亮", "中等", "暗"]);
  const KNOB_LIGHT_OPTIONS = optionLabels(settingsText.knobBrightness?.options, ["关闭", "亮", "中等", "暗"]);
  const SCREEN_OFF_OPTIONS = optionLabels(settingsText.turnOffScreen?.options, ["常亮", "30秒", "1分钟", "3分钟", "5分钟"]);
  const SLEEP_OPTIONS = optionLabels(settingsText.sleepTime?.options ?? settingsText.sleep?.options, ["关闭", "1分钟", "5分钟", "10分钟"]);
  const AUTO_HOME_OPTIONS = optionLabels(settingsText.Automatic?.options, ["关闭", "20秒", "40秒", "60秒"]);
  const LANG_OPTIONS = optionLabels(settingsText.language?.options, ["English", "繁體中文", "简体中文"]);

  const sleepRowLabel =
    settingsText.sleepTime?.label ??
    settingsText.sleep?.label ??
    (localeEn as LocaleSettings).settings.sleep?.label ??
    "Sleep";

  const goSelect = (title: string, options: string[], selected: number, key: string) => {
    navigateToSelect(title, options, selected, "/system", key);
    setLocation("/select");
  };

  return (
    <div className="min-h-screen bg-black">
      <div className="page-header">
        <button onClick={() => setLocation("/")} className="mr-4 text-white/60 active:text-white transition-colors">
          <ChevronLeft size={24} />
        </button>
        <h1 className="flex-1 text-center text-[17px] font-semibold text-white">{settingsText.vu}</h1>
        <div className="w-8" />
      </div>

      <div className="px-4 pb-32">
        {/* ── 显示 ── */}
        <SectionHeader title={ui.sectionDisplay} />
        <div className="ios-list-group">
          <ListRow label={settingsText.screenBrightness.label} description={ui.screenBrightnessDesc}
            value={SCREEN_LIGHT_OPTIONS[screenLightIdx]}
            onClick={() => goSelect(settingsText.screenBrightness.label, SCREEN_LIGHT_OPTIONS, screenLightIdx, "screenLight")} />
          <ListRow label={settingsText.turnOffScreen.label} description={ui.turnOffScreenDesc}
            value={SCREEN_OFF_OPTIONS[screenOffIdx]}
            onClick={() => goSelect(settingsText.turnOffScreen.label, SCREEN_OFF_OPTIONS, screenOffIdx, "screenOff")} />
          <ListRow label={settingsText.knobBrightness.label} description={ui.knobBrightnessDesc}
            value={KNOB_LIGHT_OPTIONS[buttonLightIdx]}
            onClick={() => goSelect(settingsText.knobBrightness.label, KNOB_LIGHT_OPTIONS, buttonLightIdx, "buttonLight")} />
          <ListRow label={settingsText.buttonLight.label} description={ui.buttonLightDesc}
            toggle checked={knobBreathLightOn}
            onToggle={(v) => updateSetting({ knob_breathlight: v ? 0 : 1 })} />
        </div>

        {/* ── 通用 ── */}
        <SectionHeader title={ui.sectionGeneral} />
        <div className="ios-list-group">
          <ListRow label={settingsText.language.label} description={ui.languageDesc}
            value={LANG_OPTIONS[langIdx]}
            onClick={() => goSelect(settingsText.language.label, LANG_OPTIONS, langIdx, "language")} />
          <ListRow label={settingsText.Automatic.label} description={ui.automaticDesc}
            value={AUTO_HOME_OPTIONS[autoHomeIdx]}
            onClick={() => goSelect(settingsText.Automatic.label, AUTO_HOME_OPTIONS, autoHomeIdx, "autoHome")} />
          <ListRow label={sleepRowLabel} description={ui.sleepDesc}
            value={SLEEP_OPTIONS[sleepIdx]}
            onClick={() => goSelect(sleepRowLabel, SLEEP_OPTIONS, sleepIdx, "sleep")} />
        </div>

        {/* ── 关于 ── */}
        <SectionHeader title={ui.sectionAbout} />
        <div className="ios-list-group">
          <div className="ios-list-row">
            <span className="flex-1 text-[16px] text-white">{ui.deviceName}</span>
            <span className="ios-row-value">{ds?.device ?? "Luxsin X9"}</span>
          </div>
          <div className="ios-list-row">
            <span className="flex-1 text-[16px] text-white">{ui.firmwareVersion}</span>
            <span className="ios-row-value">{ds?.version ?? "—"}</span>
          </div>
          <div className="ios-list-row">
            <span className="flex-1 text-[16px] text-white">{ui.macAddress}</span>
            <span className="ios-row-value text-[12px]">{ds?.mac ?? "—"}</span>
          </div>
          <div className="ios-list-row">
            <span className="flex-1 text-[16px] text-white">{ui.deviceIp ?? "设备 IP"}</span>
            <span className="ios-row-value text-[12px]">{ip || "—"}</span>
          </div>
        </div>
      </div>

      <BottomNav />
    </div>
  );
}