/* ============================================================
   HOME — Luxsin X9 Controller (Main Dashboard)
   Design: Reference luxsin_x8_首页.png
   Layout (top to bottom):
     1. TopBar: device name + settings icon
     2. Device status card (运行中/待机/充电 + 电量/模式/环保参数)
     3. Device render image (hardware photo)
     4. Volume slider with dB display
     5. 4 quick-action circle buttons (电源/EQ/HP-EQ/Bypass)
     6. iOS list rows (输入源/输出端口/Effect/音频设置/VU表)
   ============================================================ */
import { useDevice } from "@/contexts/DeviceContext";
import ConnectScreen from "@/components/ConnectScreen";
import BottomNav from "@/components/BottomNav";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { INPUT_LABELS, OUTPUT_LABELS } from "@/lib/luxsinApi";
import { cn } from "@/lib/utils";
import {
  ChevronRight,
  Power,
  Settings,
  Sliders,
  Activity,
  Gauge,
  ChevronDown,
  Zap,
  Wifi,
  Bluetooth,
} from "lucide-react";
import { useLocation } from "wouter";
import { useRef, useState, useEffect, useCallback, useMemo } from "react";
import { toast } from "sonner";
import localeZh from "@/locales/data-zh.json";
import localeZhHK from "@/locales/data-zh-HK.json";
import localeEn from "@/locales/data-en.json";

type HomeLocale = NonNullable<(typeof localeZh)["home"]>;

// ── Volume in dB (0-200 → -100dB to 0dB) ──
function volToDB(v: number) {
  if (v === 0) return "-∞";
  const db = (v - 200) / 2;
  return `${db >= 0 ? "+" : ""}${db.toFixed(1)}dB`;
}

// ── iOS-style Toggle ──
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>
  );
}

// ── List row ──
function ListRow({
  icon, label, value, onClick, toggle, checked, onToggle,
}: {
  icon: React.ReactNode;
  label: string;
  value?: string;
  onClick?: () => void;
  toggle?: boolean;
  checked?: boolean;
  onToggle?: (v: boolean) => void;
}) {
  return (
    <div className="ios-list-row cursor-pointer" onClick={onClick}>
      <div className="w-8 h-8 rounded-[8px] flex items-center justify-center mr-3 flex-shrink-0"
        style={{ background: "rgba(0,255,246,0.1)", border: "1px solid rgba(0,255,246,0.15)" }}>
        <span className="text-[#00FFF6]">{icon}</span>
      </div>
      <div className="flex-1 min-w-0">
        <span className="text-[16px] text-white font-medium">{label}</span>
      </div>
      {toggle ? (
        <IOSToggle checked={!!checked} onChange={onToggle ?? (() => {})} />
      ) : (
        <div className="flex items-center gap-1">
          {value && <span className="ios-row-value">{value}</span>}
          <ChevronRight size={16} className="ios-chevron" />
        </div>
      )}
    </div>
  );
}

export default function Home() {
  const { isConnected, deviceState, setVolume, updateSetting, api, disconnect, isDemoMode } = useDevice();
  const [, setLocation] = useLocation();
  const powerActionRef = useRef(false);
  const [powerConfirmOpen, setPowerConfirmOpen] = useState(false);

  const homeText = useMemo((): HomeLocale => {
    if (!deviceState) return {} as HomeLocale;
    const loc =
      deviceState.language === 0 ? localeEn : deviceState.language === 1 ? localeZhHK : localeZh;
    return (loc.home ?? {}) as HomeLocale;
  }, [deviceState]);

  const [localVol, setLocalVol] = useState(deviceState?.volume ?? 100);
  const isDragging = useRef(false);
  const knobDraggingRef = useRef(false);
  const knobStartAngleRef = useRef(0);
  const knobStartVolRef = useRef(0);
  const knobLastVolRef = useRef<number>(localVol);

  useEffect(() => {
    if (!isDragging.current && deviceState?.volume !== undefined) {
      setLocalVol(deviceState.volume);
    }
  }, [deviceState?.volume]);

  useEffect(() => {
    knobLastVolRef.current = localVol;
  }, [localVol]);

  const handleVolChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const v = Number(e.target.value);
    setLocalVol(v);
    setVolume(v);
  }, [setVolume]);

  const handlePowerOff = useCallback(async () => {
    if (powerActionRef.current) return;
    powerActionRef.current = true;
    try {
      if (isDemoMode) {
        toast.info(homeText.powerOffToastDemo ?? "演示模式：已断开与设备的连接");
        disconnect();
        return;
      }
      if (api) {
        try {
          await api.powerOff();
        } catch {
          // 设备可能已掉线或未返回响应，仍断开本地会话
        }
      }
      disconnect();
      toast.success(homeText.powerOffToastSent ?? "已发送关机指令");
    } finally {
      powerActionRef.current = false;
    }
  }, [api, disconnect, isDemoMode, homeText]);

  if (!isConnected) return <ConnectScreen />;

  const ds = deviceState!;
  const inputLabel = INPUT_LABELS[ds.input] ?? "USB-C";
  const outputLabel = OUTPUT_LABELS[ds.output] ?? "Headset";
  const effectOn = ds.audio_enable === 1;
  const audioOn = ds.audio_enable === 1;
  const vuLabel = `${homeText.vu ?? "VU表"}${(ds.vu ?? 0) + 1}`;
  const bypassOn = (ds.dsp_enable ?? 0) === 0;

  // Slider fill % (0-200 → 0-100%)
  const fillPct = (localVol / 200) * 100;
  // Knob angle (map 0..200 -> -135..+135 degrees)
  const knobAngle = -135 + (localVol / 200) * 270;

  const pointAngle = (clientX: number, clientY: number, rect: DOMRect) => {
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    return Math.atan2(clientY - cy, clientX - cx);
  };

  const normalizeDelta = (delta: number) => {
    // Wrap to [-PI, PI] to avoid jumps across the -PI/PI boundary.
    const pi2 = Math.PI * 2;
    let d = ((delta + Math.PI) % pi2) - Math.PI;
    if (d < -Math.PI) d += pi2;
    return d;
  };

  const beginKnobDrag = (e: React.PointerEvent<HTMLDivElement>) => {
    const el = e.currentTarget;
    const rect = el.getBoundingClientRect();
    knobDraggingRef.current = true;
    knobStartAngleRef.current = pointAngle(e.clientX, e.clientY, rect);
    knobStartVolRef.current = knobLastVolRef.current;
    isDragging.current = true;
    el.setPointerCapture(e.pointerId);
  };

  const moveKnobDrag = (e: React.PointerEvent<HTMLDivElement>) => {
    if (!knobDraggingRef.current) return;
    const el = e.currentTarget;
    const rect = el.getBoundingClientRect();
    const a = pointAngle(e.clientX, e.clientY, rect);
    const delta = normalizeDelta(a - knobStartAngleRef.current);
    // 270deg travel -> full scale; 1 rad maps to ~200/(1.5*pi) volume steps
    const stepsPerRad = 200 / (Math.PI * 1.5);
    const next = Math.max(0, Math.min(200, Math.round(knobStartVolRef.current + delta * stepsPerRad)));
    setLocalVol(next);
    setVolume(next);
  };

  const endKnobDrag = (e: React.PointerEvent<HTMLDivElement>) => {
    if (!knobDraggingRef.current) return;
    knobDraggingRef.current = false;
    isDragging.current = false;
    try {
      e.currentTarget.releasePointerCapture(e.pointerId);
    } catch {
      // ignore
    }
  };

  return (
    <div className="min-h-screen bg-black flex flex-col">
      {/* ── Top bar ── */}
      <div className="flex items-center justify-end px-4 pt-4 pb-2">
        <button onClick={() => setLocation("/system")}
          className="w-9 h-9 rounded-full flex items-center justify-center text-white/60 active:text-white transition-colors"
          style={{ background: "rgba(44,44,46,0.6)" }}>
          <Settings size={18} />
        </button>
      </div>

      {/* ── Device render image ── */}
      <div className="px-4 pb-4">
        <div className="w-full rounded-2xl overflow-hidden flex items-center justify-center"
          style={{ background: "rgba(18,18,20,0.8)", minHeight: 140 }}>
          {/* Stylized device illustration */}
          <div className="w-full relative" style={{ height: 140 }}>
            {/* Device body */}
            <div className="absolute inset-x-4 inset-y-3 rounded-xl flex items-center"
              style={{ background: "linear-gradient(135deg, #1a1a1c 0%, #2a2a2e 50%, #1a1a1c 100%)", border: "1px solid rgba(255,255,255,0.08)" }}>
              {/* Left ports */}
              <div className="px-4">
                <div className="flex items-center gap-3">
                  {/* Big hole (left) */}
                  <div
                    className="w-7 h-7 rounded-full border-2 bg-black/25 flex items-center justify-center"
                    style={{
                      borderColor: "rgba(245, 158, 11, 0.75)",
                      boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.35)",
                    }}
                  >
                    <div
                      className="w-2 h-2 rounded-full"
                      style={{ background: "rgba(196, 126, 9, 0.9)" }}
                    />
                  </div>
                  {/* Two small holes (right, stacked) */}
                  <div className="flex flex-col gap-2">
                    <div
                      className="w-5 h-5 rounded-full border-2 bg-black/25"
                      style={{
                        borderColor: "rgba(245, 158, 11, 0.65)",
                        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.35)",
                      }}
                    />
                    <div
                      className="w-5 h-5 rounded-full border-2 bg-black/25"
                      style={{
                        borderColor: "rgba(245, 158, 11, 0.65)",
                        boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.35)",
                      }}
                    />
                  </div>
                </div>
              </div>
              {/* VU display area */}
              <div className="flex-1 mx-3 rounded-lg overflow-hidden"
                style={{ background: "#0d1208", border: "1px solid rgba(255,255,255,0.1)", height: 90 }}>
                <div className="flex items-center justify-between px-2 pt-1">
                  <span className="text-[9px] text-white/50">{ds.audioFormat}</span>
                  <span className="text-[9px] text-white/50">{volToDB(localVol)}</span>
                </div>
                {/* Mini VU bars */}
                <div className="flex gap-0.5 px-2 pt-1 pb-2 h-16 items-end">
                  {Array.from({ length: 20 }).map((_, i) => {
                    const h = Math.max(0.1, Math.sin((i / 20) * Math.PI) * 0.8 + Math.random() * 0.2);
                    const isHot = i > 16;
                    return (
                      <div key={i} className="flex-1 rounded-sm"
                        style={{
                          height: `${h * 100}%`,
                          background: isHot ? "#ef4444" : i > 13 ? "#f59e0b" : "#00FFF6",
                          opacity: 0.7,
                        }} />
                    );
                  })}
                </div>
              </div>
              {/* Right knob */}
              <div className="pr-4">
                <div
                  className="w-12 h-12 rounded-full flex items-center justify-center touch-none select-none"
                  style={{
                    background: "radial-gradient(circle at 35% 35%, #4a4a4e, #1a1a1c)",
                    border: "2px solid rgba(255,255,255,0.12)",
                    boxShadow: "inset 0 2px 4px rgba(0,0,0,0.5)",
                    transform: `rotate(${knobAngle}deg)`,
                    transition: knobDraggingRef.current ? "none" : "transform 120ms ease-out",
                  }}
                  role="slider"
                  aria-label="Volume"
                  aria-valuemin={0}
                  aria-valuemax={200}
                  aria-valuenow={localVol}
                  onPointerDown={beginKnobDrag}
                  onPointerMove={moveKnobDrag}
                  onPointerUp={endKnobDrag}
                  onPointerCancel={endKnobDrag}
                >
                  <div className="w-1 h-4 rounded-full bg-white/40" style={{ transform: "rotate(-30deg)", transformOrigin: "bottom center" }} />
                </div>
              </div>
            </div>
            {/* Brand label */}
            <div className="absolute top-5 left-8">
              <span className="text-[11px] font-bold tracking-widest text-white/30">LUXSIN</span>
            </div>
          </div>
        </div>
      </div>

      {/* ── Volume slider ── */}
      <div className="px-4 mb-5">
        <div className="flex items-center gap-3">
          <button onClick={() => { setLocalVol(0); setVolume(0); }}
            className="text-white/50 active:text-white transition-colors flex-shrink-0">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-6 h-6">
              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
              <line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/>
            </svg>
          </button>

          <div className="flex-1 relative flex items-center">
            {/* Track fill - 根据按钮位置调整 */}
            <div className="absolute left-0 h-[4px] rounded-full pointer-events-none"
              style={{ 
                width: `${fillPct}%`, 
                background: "#00FFF6", 
                boxShadow: "0 0 8px rgba(0,255,246,0.5)" 
              }} />
            <input
              type="range" min={0} max={200} value={localVol}
              className="cyan-slider relative z-10"
              onMouseDown={() => { isDragging.current = true; }}
              onMouseUp={() => { isDragging.current = false; }}
              onTouchStart={() => { isDragging.current = true; }}
              onTouchEnd={() => { isDragging.current = false; }}
              onChange={handleVolChange}
            />
          </div>

          <button onClick={() => { setLocalVol(200); setVolume(200); }}
            className="text-white/50 active:text-white transition-colors flex-shrink-0">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-6 h-6">
              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
              <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
              <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>
            </svg>
          </button>
        </div>
        {/* dB value */}
        <div className="text-center mt-1">
          <span className="text-[22px] font-bold tracking-tight" style={{ color: "#00FFF6" }}>
            {volToDB(localVol)}
          </span>
        </div>

        {/* Bluetooth info */}
        {ds.bt_status !== 0 && (
          <div className="mt-3 px-3 py-3 text-center">
            <div className="flex items-center justify-center gap-1.5 mb-1">
              <Bluetooth size={14} className="text-[#00FFF6]" />
              <span className="text-[11px] text-white/50">{ds.bt_srcname}</span>
            </div>
            {ds.bt_title && (
              <p className="text-[13px] text-white font-medium truncate mb-2">
                {ds.bt_title}
                {ds.bt_artist && <span className="text-white/50"> - {ds.bt_artist}</span>}
              </p>
            )}
            {/* Playback controls */}
            <div className="flex items-center justify-center gap-4 mt-2">
              <button
                onClick={() => updateSetting({ bt_next: 0 })}
                className="w-10 h-10 rounded-full flex items-center justify-center transition-all active:scale-95"
                style={{ background: "rgba(0,255,246,0.15)", border: "1px solid rgba(0,255,246,0.3)" }}>
                <img src="/player/skip-forward.png" alt="上一首" className="w-5 h-5" />
              </button>
              <button
                onClick={() => updateSetting({ bt_play: 1 })}
                className="w-12 h-12 rounded-full flex items-center justify-center transition-all active:scale-95"
                style={{ background: "transparent", border: "1px solid rgba(0,255,246,0.5)", boxShadow: "0 0 12px rgba(0,255,246,0.4)" }}>
                <img 
                  src={ds.bt_status === 1 ? "/player/play.png" : "/player/pause.png"} 
                  alt={ds.bt_status === 1 ? "播放" : "暂停"} 
                  className="w-6 h-6" 
                />
              </button>
              <button
                onClick={() => updateSetting({ bt_next: 1 })}
                className="w-10 h-10 rounded-full flex items-center justify-center transition-all active:scale-95"
                style={{ background: "rgba(0,255,246,0.15)", border: "1px solid rgba(0,255,246,0.3)" }}>
                <img src="/player/skip-back.png" alt="下一首" className="w-5 h-5" />
              </button>
            </div>
          </div>
        )}
      </div>

      {/* ── 4 quick-action circle buttons ── */}
      <div className="flex justify-around px-6 mb-6">
        {/* Power */}
        <div className="flex flex-col items-center gap-2">
          <button
            type="button"
            className="icon-circle-btn"
            onClick={() => setPowerConfirmOpen(true)}
          >
            <Power size={22} className="text-white/60" />
          </button>
          <span className="text-[11px] text-white/35">{homeText.power ?? "电源"}</span>
        </div>

        {/* EQ */}
        <div className="flex flex-col items-center gap-2">
          <button
            className={cn("icon-circle-btn", !bypassOn && ds.peqEnable === 1 && "active")}
            onClick={() => setLocation("/eq")}
          >
            <Sliders size={22} className={(!bypassOn && ds.peqEnable === 1) ? "text-[#00FFF6]" : "text-white/60"} />
          </button>
          <span className={cn("text-[11px]", (!bypassOn && ds.peqEnable === 1) ? "text-[#00FFF6]" : "text-white/35")}>HP-EQ</span>
        </div>

        {/* Effect */}
        <div className="flex flex-col items-center gap-2">
          <button
            className={cn("icon-circle-btn", !bypassOn && effectOn && "active")}
            onClick={() => setLocation("/effects")}
          >
            <Activity size={22} className={(!bypassOn && effectOn) ? "text-[#00FFF6]" : "text-white/60"} />
          </button>
          <span className={cn("text-[11px]", (!bypassOn && effectOn) ? "text-[#00FFF6]" : "text-white/35")}>Effect</span>
        </div>

        {/* Bypass (DSP) */}
        <div className="flex flex-col items-center gap-2">
          <button
            className={cn("icon-circle-btn", bypassOn && "active")}
            onClick={() => updateSetting({ dsp_enable: bypassOn ? 1 : 0 })}
          >
            <Zap size={22} className={bypassOn ? "text-[#00FFF6]" : "text-white/60"} />
          </button>
          <span className={cn("text-[11px]", bypassOn ? "text-[#00FFF6]" : "text-white/35")}>Bypass</span>
        </div>
      </div>

      {/* ── iOS list rows ── */}
      <div className="px-4 pb-4">
        <div className="ios-list-group">
          <ListRow
            icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4"><path d="M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"/></svg>}
            label={homeText.input ?? "输入源"}
            value={inputLabel}
            onClick={() => setLocation("/io")}
          />
          <ListRow
            icon={<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="w-4 h-4"><path d="M15 3H9a2 2 0 0 0-2 2v4m8-6h4a2 2 0 0 1 2 2v4M15 3v18m0 0H9a2 2 0 0 1-2-2V9m8 12h4a2 2 0 0 0 2-2V9M7 9H3"/></svg>}
            label={homeText.output ?? "输出端口"}
            value={outputLabel}
            onClick={() => setLocation("/io")}
          />
          <ListRow
            icon={<Sliders size={16} />}
            label="Effect"
            value={effectOn ? "已开启" : undefined}
            toggle
            checked={effectOn}
            onToggle={(v) => updateSetting({ audio_enable: v ? 1 : 0 })}
          />
          <ListRow
            icon={<Settings size={16} />}
            label={homeText.audioSet ?? "音频设置"}
            onClick={() => setLocation("/audio")}
          />
          <ListRow
            icon={<Gauge size={16} />}
            label={homeText.vu ?? "VU表"}
            value={vuLabel}
            onClick={() => setLocation("/vu")}
          />
        </div>
      </div>

      <AlertDialog open={powerConfirmOpen} onOpenChange={setPowerConfirmOpen}>
        <AlertDialogContent className="border-white/10 bg-zinc-900 text-white sm:max-w-md">
          <AlertDialogHeader>
            <AlertDialogTitle className="text-white">
              {homeText.powerOffConfirmTitle ?? "确认关闭电源？"}
            </AlertDialogTitle>
            <AlertDialogDescription className="text-white/60">
              {homeText.powerOffConfirmDesc ??
                "设备将关机并断开与本应用的连接，是否继续？"}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel className="border-white/20 bg-transparent text-white hover:bg-white/10">
              {homeText.powerOffConfirmCancel ?? "取消"}
            </AlertDialogCancel>
            <AlertDialogAction
              className="bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-600"
              onClick={() => void handlePowerOff()}
            >
              {homeText.powerOffConfirmOk ?? "关闭电源"}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Bottom nav */}
      <BottomNav />
    </div>
  );
}