/* SpeakMind — Docklet: the app's signature resting state.
   At rest it's a quiet gradient signal strip. Hover (or auto-demo `expanded`)
   blooms it into the four controls — Language · Dictate · Refine · Scratchpad —
   each with a floating hint. Ported from the macOS app's DockletView. */

function MicFill() {
  return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <rect x="9" y="2" width="6" height="11" rx="3" />
      <path d="M5 10a7 7 0 0 0 14 0" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
      <line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function Docklet({ expanded: expProp = false, auto = false, lang = "中" }) {
  const [autoExp, setAutoExp] = React.useState(false);
  React.useEffect(() => {
    if (!auto) { setAutoExp(false); return undefined; }
    const timers = [];
    const loop = () => {
      setAutoExp(true);
      timers.push(setTimeout(() => setAutoExp(false), 1700));
      timers.push(setTimeout(loop, 3600));
    };
    timers.push(setTimeout(loop, 750));
    return () => timers.forEach(clearTimeout);
  }, [auto]);
  const expanded = expProp || autoExp;
  return (
    <div className={"docklet" + (expanded ? " expanded" : "")}>
      <div className="dk-pill">
        <button className="dk-particle dk-lang" data-hint="Language" data-key={lang} tabIndex={-1}>
          <span className="dk-glyph">{lang}</span>
        </button>

        <button className="dk-mic" data-hint="Dictate" data-key="⌥Space" tabIndex={-1}>
          <span className="dk-bar" aria-hidden="true" />
          <span className="dk-micglyph" aria-hidden="true"><MicFill /></span>
        </button>

        <button className="dk-particle dk-refine" data-hint="Refine" data-key="2" tabIndex={-1}>
          <span className="dk-glyph">✦</span>
        </button>

        <button className="dk-particle dk-scratch" data-hint="Scratchpad" data-key="3" tabIndex={-1}>
          <span className="dk-glyph">▤</span>
        </button>
      </div>
    </div>
  );
}

window.SMDocklet = { Docklet, MicFill };
