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

/* ============================================================
   EFFECTS PAGE — Sound Effect Settings
   Design: Reference luxsin_x8_音效.jpg
   Layout:
     - Page header with global Effect toggle
     - Glass cards: Style, 声场宽度, 交叉反馈, 音调, 响度
   All dropdowns → navigate to /select page
   ============================================================ */
import { useDevice } from "@/contexts/DeviceContext";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useLocation } from "wouter";
import { useState, useEffect, useRef, useMemo } 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";

type EffectLocale = NonNullable<(typeof localeZh)["effect"]>;

function clampPickIndex(i: number, len: number) {
  if (len <= 0) return 0;
  return Math.min(Math.max(i, 0), len - 1);
}

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 CyanSlider({ value, min, max, step = 0.1, onChange, onRelease }: {
  value: number;
  min: number;
  max: number;
  step?: number;
  onChange: (v: number) => void;
  /** Fires once when the user releases the thumb (pointer/mouse/touch). Read value from DOM to avoid stale React state. */
  onRelease?: (v: number) => void;
}) {
  const fillPct = ((value - min) / (max - min)) * 100;
  const emitRelease = (el: EventTarget | null) => {
    if (!(el instanceof HTMLInputElement)) return;
    onRelease?.(Number(el.value));
  };
  return (
    <div className="relative flex items-center w-full mt-3">
      <div className="absolute left-0 h-[4px] rounded-full pointer-events-none"
        style={{ width: `${fillPct}%`, background: "#00FFF6", boxShadow: "0 0 6px rgba(0,255,246,0.5)" }} />
      <input type="range" min={min} max={max} step={step} value={value}
        className="cyan-slider relative z-10"
        onChange={(e) => onChange(Number(e.target.value))}
        onPointerUp={(e) => emitRelease(e.currentTarget)}
        onPointerCancel={(e) => emitRelease(e.currentTarget)}
        onKeyUp={(e) => {
          if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"].includes(e.key)) {
            emitRelease(e.currentTarget);
          }
        }} />
    </div>
  );
}

export default function EffectsPage() {
  const [, setLocation] = useLocation();
  const { deviceState, updateSetting } = useDevice();

  const effectText = useMemo((): EffectLocale => {
    const lang = deviceState?.language;
    const pack = lang === 0 ? localeEn : lang === 1 ? localeZhHK : localeZh;
    return (pack.effect ?? localeZh.effect) as EffectLocale;
  }, [deviceState?.language]);

  const sceneLabels = useMemo(() => {
    const opts = effectText.style?.options ?? [];
    return [...opts].sort((a, b) => a.index - b.index).map((o) => o.label);
  }, [effectText]);

  const crossfeedLabels = useMemo(
    () => effectText.crossfeed?.options ?? [],
    [effectText],
  );

  const ds = deviceState;
  const effectOn = (ds?.audio_enable ?? 0) === 1;
  const widthOn = (ds?.width_enable ?? 0) === 1;
  const widthVal = ds?.width_value ?? 50;
  const crossfeedOn = (ds?.crossfeed_enable ?? 0) === 1;
  const crossfeedVal = ds?.crossfeed_value ?? 0;
  const sceneOn = (ds?.effect_enable ?? 0) === 1;
  const sceneVal = ds?.effect_value ?? 0;
  const colorOn = (ds?.color_enable ?? 0) === 1;
  const colorBassGain = (ds?.color_bass_gain ?? 0) / 10;
  const colorMidGain = (ds?.color_mid_gain ?? 0) / 10;
  const colorTrebleGain = (ds?.color_treble_gain ?? 0) / 10;
  const loudnessOn = (ds?.loudness_enable ?? 0) === 1;
  const loudnessThreshold = ds?.loudness_threshold_gain ?? 0;
  const loudnessBassGain = (ds?.loudness_bass_gain ?? 0) / 10;
  const loudnessTrebleGain = (ds?.loudness_treble_gain ?? 0) / 10;

  const [localBass, setLocalBass] = useState(colorBassGain);
  const [localMid, setLocalMid] = useState(colorMidGain);
  const [localTreble, setLocalTreble] = useState(colorTrebleGain);
  const isDraggingBass = useRef(false);
  const isDraggingMid = useRef(false);
  const isDraggingTreble = useRef(false);

  const [localLoudnessThreshold, setLocalLoudnessThreshold] = useState(loudnessThreshold);
  const [localLoudnessBass, setLocalLoudnessBass] = useState(loudnessBassGain);
  const [localLoudnessTreble, setLocalLoudnessTreble] = useState(loudnessTrebleGain);
  const isDraggingLoudnessThreshold = useRef(false);
  const isDraggingLoudnessBass = useRef(false);
  const isDraggingLoudnessTreble = useRef(false);

  useEffect(() => {
    if (!isDraggingBass.current) setLocalBass(colorBassGain);
    if (!isDraggingMid.current) setLocalMid(colorMidGain);
    if (!isDraggingTreble.current) setLocalTreble(colorTrebleGain);
    if (!isDraggingLoudnessThreshold.current) setLocalLoudnessThreshold(loudnessThreshold);
    if (!isDraggingLoudnessBass.current) setLocalLoudnessBass(loudnessBassGain);
    if (!isDraggingLoudnessTreble.current) setLocalLoudnessTreble(loudnessTrebleGain);
  }, [colorBassGain, colorMidGain, colorTrebleGain, loudnessThreshold, loudnessBassGain, loudnessTrebleGain]);

  const [localWidth, setLocalWidth] = useState(() => Math.round(widthVal));
  const isDragging = useRef(false);

  useEffect(() => {
    if (!isDragging.current) setLocalWidth(Math.round(widthVal));
  }, [widthVal]);

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

  const sceneIdx = clampPickIndex(sceneVal, sceneLabels.length);
  const sceneDisplay = sceneLabels[sceneIdx] ?? "";
  const crossIdx = clampPickIndex(crossfeedVal, crossfeedLabels.length);
  const crossfeedDisplay = crossfeedLabels[crossIdx] ?? "";

  return (
    <div className="min-h-screen bg-black">
      <div style={{
        filter: effectOn ? "none" : "grayscale(1) opacity(0.4)",
        transition: "filter 0.3s ease-in-out"
      }}>
        <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">{effectText.pageTitle}</h1>
        <IOSToggle checked={effectOn} onChange={(v) => updateSetting({ audio_enable: v ? 1 : 0 })} />
      </div>

      <div className="px-4 pb-32 pt-3 space-y-3">
        {/* ── Style ── */}
        <div className="ios-list-group p-4">
          <div className="flex items-center justify-between mb-3">
            <span className="text-[16px] font-medium text-white">{effectText.style.label}</span>
            <IOSToggle checked={sceneOn} onChange={(v) => updateSetting({ effect_enable: v ? 1 : 0 })} />
          </div>
          <button
            className="flex items-center justify-between w-full active:opacity-70 transition-opacity"
            onClick={() => goSelect(effectText.selectStyleTitle, sceneLabels, sceneVal, "effect_value")}>
            <span className="text-[15px] text-white/55">{sceneDisplay}</span>
            <ChevronRight size={16} className="ios-chevron" />
          </button>
        </div>

        {/* ── 声场宽度 ── */}
        <div className="ios-list-group p-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <span className="text-[16px] font-medium text-white">{effectText.stereoWidth.label}</span>
              <span className="text-[16px] font-bold" style={{ color: "#00FFF6" }}>{Math.round(localWidth)}</span>
            </div>
            <IOSToggle checked={widthOn} onChange={(v) => updateSetting({ width_enable: v ? 1 : 0 })} />
          </div>
          <CyanSlider
            value={localWidth}
            min={0}
            max={100}
            step={1}
            onChange={(v) => {
              isDragging.current = true;
              setLocalWidth(Math.round(v));
            }}
            onRelease={(v) => {
              isDragging.current = false;
              const w = Math.round(v);
              setLocalWidth(w);
              updateSetting({ width_value: w });
            }} />
        </div>

        {/* ── 交叉反馈 ── */}
        <div className="ios-list-group p-4">
          <div className="flex items-center justify-between mb-3">
            <span className="text-[16px] font-medium text-white">{effectText.crossfeed.label}</span>
            <IOSToggle checked={crossfeedOn} onChange={(v) => updateSetting({ crossfeed_enable: v ? 1 : 0 })} />
          </div>
          <button
            className="flex items-center justify-between w-full active:opacity-70 transition-opacity"
            onClick={() => goSelect(effectText.selectCrossfeedTitle, crossfeedLabels, crossfeedVal, "crossfeed_value")}>
            <span className="text-[14px] text-white/45">{crossfeedDisplay}</span>
            <ChevronRight size={16} className="ios-chevron" />
          </button>
        </div>

        {/* ── 音调 ── */}
        <div className="ios-list-group p-4">
          <div className="flex items-center justify-between">
            <span className="text-[16px] font-medium text-white">{effectText.tone}</span>
            <IOSToggle checked={colorOn} onChange={(v) => updateSetting({ color_enable: v ? 1 : 0 })} />
          </div>
          
          {colorOn && (
            <div className="space-y-4 mt-4">
              {/* 低音 */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[14px] text-white/60">{effectText.lowBass}</span>
                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localBass.toFixed(1)}</span>
                </div>
                <CyanSlider
                  value={localBass}
                  min={-10}
                  max={10}
                  onChange={(v) => {
                    isDraggingBass.current = true;
                    setLocalBass(v);
                  }}
                  onRelease={(v) => {
                    isDraggingBass.current = false;
                    updateSetting({ color_bass_gain: Math.round(v * 10) });
                  }}
                />
              </div>
              
              {/* 中音 */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[14px] text-white/60">{effectText.enterBass}</span>
                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localMid.toFixed(1)}</span>
                </div>
                <CyanSlider
                  value={localMid}
                  min={-10}
                  max={10}
                  onChange={(v) => {
                    isDraggingMid.current = true;
                    setLocalMid(v);
                  }}
                  onRelease={(v) => {
                    isDraggingMid.current = false;
                    updateSetting({ color_mid_gain: Math.round(v * 10) });
                  }}
                />
              </div>
              
              {/* 高音 */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[14px] text-white/60">{effectText.highBass}</span>
                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localTreble.toFixed(1)}</span>
                </div>
                <CyanSlider
                  value={localTreble}
                  min={-10}
                  max={10}
                  onChange={(v) => {
                    isDraggingTreble.current = true;
                    setLocalTreble(v);
                  }}
                  onRelease={(v) => {
                    isDraggingTreble.current = false;
                    updateSetting({ color_treble_gain: Math.round(v * 10) });
                  }}
                />
              </div>
            </div>
          )}
        </div>

        {/* ── 响度 ── */}
        <div className="ios-list-group p-4">
          <div className="flex items-center justify-between">
            <span className="text-[16px] font-medium text-white">{effectText.loudness}</span>
            <IOSToggle checked={loudnessOn} onChange={(v) => updateSetting({ loudness_enable: v ? 1 : 0 })} />
          </div>
          
          {loudnessOn && (
            <div className="space-y-4 mt-4">
              {/* 阈值 */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[14px] text-white/60">{effectText.threshold}</span>
                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessThreshold}</span>
                </div>
                <CyanSlider
                  value={localLoudnessThreshold}
                  min={-30}
                  max={0}
                  step={1}
                  onChange={(v) => {
                    isDraggingLoudnessThreshold.current = true;
                    setLocalLoudnessThreshold(v);
                  }}
                  onRelease={(v) => {
                    isDraggingLoudnessThreshold.current = false;
                    updateSetting({ loudness_threshold_gain: Math.round(v) });
                  }}
                />
              </div>
              
              {/* Loudness bass */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[14px] text-white/60">{effectText.lowBass}</span>
                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessBass.toFixed(1)}</span>
                </div>
                <CyanSlider
                  value={localLoudnessBass}
                  min={0}
                  max={10}
                  step={0.1}
                  onChange={(v) => {
                    isDraggingLoudnessBass.current = true;
                    setLocalLoudnessBass(v);
                  }}
                  onRelease={(v) => {
                    isDraggingLoudnessBass.current = false;
                    updateSetting({ loudness_bass_gain: Math.round(v * 10) });
                  }}
                />
              </div>
              
              {/* Loudness treble */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <span className="text-[14px] text-white/60">{effectText.highBass}</span>
                  <span className="text-[14px] font-bold" style={{ color: "#00FFF6" }}>{localLoudnessTreble.toFixed(1)}</span>
                </div>
                <CyanSlider
                  value={localLoudnessTreble}
                  min={0}
                  max={10}
                  step={0.1}
                  onChange={(v) => {
                    isDraggingLoudnessTreble.current = true;
                    setLocalLoudnessTreble(v);
                  }}
                  onRelease={(v) => {
                    isDraggingLoudnessTreble.current = false;
                    updateSetting({ loudness_treble_gain: Math.round(v * 10) });
                  }}
                />
              </div>
            </div>
          )}
        </div>
      </div>
      </div>

      <BottomNav />
    </div>
  );
}