import peonIcon from "/peon.webp";
import { useSystemInfo, useLoops } from "../hooks/useSystemInfo";
import { useSoundEnabled } from "../usePeonSounds";

export default function StatusBar() {
  const { data: sysInfo } = useSystemInfo();
  const { data: loops } = useLoops();
  const [soundOn, toggleSound] = useSoundEnabled();

  const version = sysInfo?.version ? `v${sysInfo.version}` : "...";
  const dbPath = sysInfo?.db_path || "...";
  const loopCount = loops?.active_count ?? null;

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 flex h-7 items-center border-t border-[#2e3625] bg-[#1a1f14] px-3 font-mono text-[11px] text-[#8a8672]">
      <img
        src={peonIcon}
        alt="peon"
        className="mr-3 h-[22px] w-[22px] rounded-full object-cover"
      />
      <span>{version}</span>
      <span className="mx-3.5 text-[#2e3625]">|</span>
      <span className="mr-1.5 text-[#5c5a4a]">DB:</span>
      <span>{dbPath}</span>
      <span className="mx-3.5 text-[#2e3625]">|</span>
      <span
        className={`mr-1.5 inline-block h-[7px] w-[7px] rounded-full ${
          loopCount && loopCount > 0 ? "bg-[#7ab648]" : "bg-[#5c5a4a]"
        }`}
      />
      <span className="mr-1.5 text-[#5c5a4a]">Loops:</span>
      <span>{loopCount && loopCount > 0 ? loopCount : "--"}</span>
      <span className="mx-3.5 text-[#2e3625]">|</span>
      <button
        onClick={toggleSound}
        className="flex items-center gap-1 hover:text-[#d4d2c4]"
        title={soundOn ? "Mute sounds" : "Unmute sounds"}
      >
        <span>{soundOn ? "\u{1F50A}" : "\u{1F507}"}</span>
        <span>{soundOn ? "Sound" : "Muted"}</span>
      </button>
    </div>
  );
}
