Glass Controls

/**
 * VibeBox Motion · Glass Controls
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
"use client";

import { useState } from "react";
import { cn } from "@/lib/utils";
import { Glass, GlassGlyphIcon, type GlassGlyph } from "@/lib/vibebox/glass";

export type GlassToggle = { id: string; label: string; glyph: GlassGlyph; on?: boolean };

export type GlassControlsProps = {
  /** The toggle tiles, two per row. */
  toggles?: GlassToggle[];
  /** Slider names and their starting values (0 to 100). */
  sliders?: { id: string; label: string; glyph: GlassGlyph; value: number }[];
  onToggle?: (id: string, on: boolean) => void;
  tone?: "auto" | "dark" | "light";
  className?: string;
};

const TOGGLES: GlassToggle[] = [
  { id: "wifi", label: "Wi-Fi", glyph: "wifi", on: true },
  { id: "bluetooth", label: "Bluetooth", glyph: "bluetooth", on: true },
  { id: "focus", label: "Focus", glyph: "moon" },
  { id: "alerts", label: "Alerts", glyph: "bell", on: true },
];
const SLIDERS = [
  { id: "brightness", label: "Brightness", glyph: "sun" as GlassGlyph, value: 72 },
  { id: "volume", label: "Volume", glyph: "volume" as GlassGlyph, value: 40 },
];

/**
 * A control centre: glass tiles that switch on to a bright face, and sliders that are real range
 * inputs (so keyboard and screen readers work) with a glass track.
 */
export function GlassControls({ toggles = TOGGLES, sliders = SLIDERS, onToggle, tone, className }: GlassControlsProps) {
  const [state, setState] = useState<Record<string, boolean>>(() => Object.fromEntries(toggles.map((toggle) => [toggle.id, Boolean(toggle.on)])));
  const [levels, setLevels] = useState<Record<string, number>>(() => Object.fromEntries(sliders.map((slider) => [slider.id, slider.value])));

  return (
    <Glass as="section" data-vb="glass-controls" aria-label="Controls" tone={tone} still className={cn("w-full max-w-[20rem] p-3", className)}>
      <ul className="grid grid-cols-2 gap-2">
        {toggles.map((toggle) => {
          const on = Boolean(state[toggle.id]);
          return (
            <li key={toggle.id}>
              <button
                type="button"
                aria-pressed={on}
                onClick={() => {
                  setState((value) => ({ ...value, [toggle.id]: !on }));
                  onToggle?.(toggle.id, !on);
                }}
                className={cn(
                  "flex h-[4.25rem] w-full flex-col justify-between rounded-lg border p-2.5 text-left transition-colors duration-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
                  on ? "border-white/60 bg-white/85 text-[#101521] shadow-[0_8px_20px_-10px_rgb(255_255_255/0.6)]" : "border-white/20 bg-white/10 hover:bg-white/15",
                )}
              >
                <GlassGlyphIcon name={toggle.glyph} className="size-[1.15rem]" />
                <span className="flex items-center justify-between text-[0.8rem] font-medium">
                  {toggle.label}
                  <span className="font-mono text-[0.62rem] opacity-60">{on ? "On" : "Off"}</span>
                </span>
              </button>
            </li>
          );
        })}
      </ul>
      <ul className="mt-2 flex flex-col gap-2">
        {sliders.map((slider) => (
          <li key={slider.id} className="relative h-11 overflow-hidden rounded-lg border border-white/20 bg-white/10">
            <span aria-hidden="true" className="absolute inset-0 origin-left bg-white/70" style={{ transform: `scaleX(${(levels[slider.id] ?? 0) / 100})` }} />
            <GlassGlyphIcon name={slider.glyph} className="pointer-events-none absolute top-1/2 left-3 size-[1.1rem] -translate-y-1/2 mix-blend-difference" />
            <input
              type="range"
              min={0}
              max={100}
              value={levels[slider.id] ?? 0}
              aria-label={slider.label}
              onChange={(event) => setLevels((value) => ({ ...value, [slider.id]: Number(event.target.value) }))}
              className="absolute inset-0 size-full cursor-pointer appearance-none bg-transparent opacity-0 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-ring"
            />
          </li>
        ))}
      </ul>
    </Glass>
  );
}

/**
 * VibeBox Motion · Glass Controls
 * Copyright (c) 2026 VibeBox. Licensed under the VibeBox Motion Free License:
 * https://motion.vibeboxph.com/license
 * Use it in unlimited personal, commercial and client projects.
 * Do not sell or redistribute it as a component, kit, template or builder.
 */
export * from "./glass-controls.client";