"use client";

import {
  ArrowClockwise,
  BatteryHigh,
  Circle,
  Pause,
  Play,
  Square,
  SpeakerHigh,
  SpeakerSlash,
  WifiHigh,
  WifiSlash,
} from "@phosphor-icons/react";
import { useEffect, useRef, useState } from "react";
import { play } from "cuelume";
import NumberFlow from "@number-flow/react";

const hover6pmzh = {
  source: { type: "triangle" as const, frequency: 1379.3755954416245 },
  envelope: {
    attack: 0,
    decay: 0.01,
    sustain: 0,
    release: 0.004656336943861842,
  },
  gain: 0.309,
  filter: {
    type: "bandpass" as const,
    frequency: 2184.5385103644376,
    Q: 3.712,
  },
};

const WAVE = [
  12, 34, 76, 21, 43, 119, 16, 64, 50, 76, 34, 31, 35, 43, 61, 36, 19, 17, 15,
  12, 30, 28, 15, 65, 54, 81, 35, 20, 53, 120, 34, 61, 18, 75, 62, 100, 45, 37,
  16, 13, 15, 66, 52, 18, 17,
];

function formatTime(milliseconds: number) {
  const seconds = Math.floor(milliseconds / 1000);
  return [
    Math.floor(seconds / 3600),
    Math.floor(seconds / 60) % 60,
    seconds % 60,
  ]
    .map((value) => String(value).padStart(2, "0"))
    .join(":");
}

export default function PocketRecorder() {
  const [mode, setMode] = useState<
    "paused" | "recording" | "playing" | "stopped"
  >("paused");
  const [elapsed, setElapsed] = useState(730000);
  const [connected, setConnected] = useState(true);
  const [clock, setClock] = useState("04.35 PM");
  const [generation, setGeneration] = useState(0);
  const [volume, setVolume] = useState(65);
  const [volumeVisible, setVolumeVisible] = useState(false);
  const volumeValue = useRef(65);
  const volumeControl = useRef<HTMLInputElement>(null);
  const hideVolume = useRef<ReturnType<typeof setTimeout> | null>(null);
  const audio = useRef<AudioContext | null>(null);
  const lastTick = useRef(0);
  const accumulated = useRef(730000);
  const started = useRef(0);
  const playhead = useRef<HTMLDivElement>(null);
  const waveWindow = useRef<HTMLDivElement>(null);
  const waveTrack = useRef<SVGGElement>(null);
  const ticks = useRef<HTMLDivElement>(null);
  const tickTrack = useRef<SVGGElement>(null);
  const running = mode === "recording" || mode === "playing";

  function showVolume() {
    setVolumeVisible(true);
    if (hideVolume.current) clearTimeout(hideVolume.current);
    hideVolume.current = setTimeout(() => setVolumeVisible(false), 1400);
  }

  async function playButtonSound() {
    const level = volumeValue.current;
    if (level === 0) return;
    try {
      const context = audio.current ?? new AudioContext();
      audio.current = context;
      if (context.state === "suspended") await context.resume();
      if (context.state !== "running") return;
      const oscillator = context.createOscillator();
      const gain = context.createGain();
      const filter = context.createBiquadFilter();
      const now = context.currentTime;
      const { source, envelope } = hover6pmzh;
      oscillator.type = source.type;
      oscillator.frequency.setValueAtTime(source.frequency, now);
      filter.type = hover6pmzh.filter.type;
      filter.frequency.value = hover6pmzh.filter.frequency;
      filter.Q.value = hover6pmzh.filter.Q;
      const peak = (hover6pmzh.gain * level) / 100;
      gain.gain.setValueAtTime(peak, now + envelope.attack);
      gain.gain.linearRampToValueAtTime(
        peak * envelope.sustain,
        now + envelope.attack + envelope.decay,
      );
      const end = now + envelope.attack + envelope.decay + envelope.release;
      gain.gain.linearRampToValueAtTime(0, end);
      oscillator.connect(filter);
      filter.connect(gain);
      gain.connect(context.destination);
      oscillator.onended = () => {
        oscillator.disconnect();
        filter.disconnect();
        gain.disconnect();
      };
      oscillator.start(now);
      oscillator.stop(end);
    } catch {
      // Volume remains usable when the browser cannot initialize audio.
    }
  }

  function updateVolume(value: number) {
    const next = Math.max(0, Math.min(100, Math.round(value / 5) * 5));
    showVolume();
    if (next === volumeValue.current) return;
    volumeValue.current = next;
    setVolume(next);
    if (next > 0 && performance.now() - lastTick.current >= 45) {
      lastTick.current = performance.now();
      play("tick", { volume: next / 100 });
    }
  }

  useEffect(() => {
    const control = volumeControl.current;
    const onWheel = (event: WheelEvent) => {
      event.preventDefault();
      if (event.deltaY)
        updateVolume(volumeValue.current - Math.sign(event.deltaY) * 5);
    };
    control?.addEventListener("wheel", onWheel, { passive: false });
    return () => {
      control?.removeEventListener("wheel", onWheel);
      if (hideVolume.current) clearTimeout(hideVolume.current);
      if (audio.current) void audio.current.close().catch(() => {});
      audio.current = null;
    };
  }, []);

  useEffect(() => {
    const update = () =>
      setClock(
        new Date()
          .toLocaleTimeString("en-US", {
            hour: "2-digit",
            minute: "2-digit",
            hour12: true,
          })
          .replace(":", "."),
      );
    update();
    const interval = window.setInterval(update, 1000);
    return () => window.clearInterval(interval);
  }, []);

  useEffect(() => {
    if (!running) return;
    const interval = window.setInterval(() => {
      setElapsed(accumulated.current + performance.now() - started.current);
    }, 100);
    return () => window.clearInterval(interval);
  }, [running]);

  useEffect(() => {
    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
    let frame = 0;
    // Fill eight seconds of history, then scroll under the locked playhead.
    const draw = () => {
      const time =
        accumulated.current +
        (running ? performance.now() - started.current : 0);
      const position = Math.min(time / 8000, 1) * 100;
      const offset = reducedMotion.matches
        ? 0
        : ((Math.max(0, time - 8000) / 8000) * 600) % 360;
      if (playhead.current)
        playhead.current.style.transform = `translateX(${position}%)`;
      if (waveWindow.current)
        waveWindow.current.style.clipPath = `inset(0 ${100 - position}% 0 0)`;
      if (ticks.current)
        ticks.current.style.clipPath = `inset(0 0 0 ${position}%)`;
      if (tickTrack.current) {
        const tickOffset = reducedMotion.matches
          ? 0
          : ((time / 8000) * 600) % 8;
        tickTrack.current.style.transform = `translateX(${-tickOffset}px)`;
      }
      if (waveTrack.current)
        waveTrack.current.style.transform = `translateX(${-offset}px)`;
      if (running) frame = requestAnimationFrame(draw);
    };
    draw();
    return () => cancelAnimationFrame(frame);
  }, [running, generation]);

  function changeMode(next: typeof mode) {
    void playButtonSound();
    if (running) accumulated.current += performance.now() - started.current;
    started.current = performance.now();
    setElapsed(accumulated.current);
    setMode(next);
  }

  function reset() {
    void playButtonSound();
    accumulated.current = 0;
    setElapsed(0);
    setMode("paused");
    setGeneration((value) => value + 1);
  }

  const transportLabel = running ? "Pause" : "Play";
  const status =
    mode === "recording"
      ? "RECORDING"
      : mode === "playing"
        ? "PLAYING"
        : mode === "stopped"
          ? "STOPPED"
          : "NEW RECORDING";

  return (
    <div className="pr-scene">
      <section
        className="pr-device"
        aria-label="Pocket recorder demo"
        data-running={running}
      >
        <div className="pr-wheel-control">
          <div
            className="pr-wheel"
            aria-hidden="true"
            style={{ backgroundPositionY: `${volume * 0.4}px` }}
          />
          <input
            ref={volumeControl}
            className="pr-volume-input"
            type="range"
            min="0"
            max="100"
            step="5"
            value={volume}
            aria-label="Volume"
            aria-orientation="vertical"
            aria-valuetext={volume === 0 ? "Muted" : `${volume} percent`}
            title="Volume"
            onFocus={showVolume}
            onPointerDown={showVolume}
            onChange={(event) => updateVolume(Number(event.target.value))}
          />
        </div>
        <div className="pr-display">
          <div
            className="pr-volume-hud"
            data-visible={volumeVisible}
            aria-hidden="true"
          >
            {volume === 0 ? <SpeakerSlash /> : <SpeakerHigh />}
            <div className="pr-volume-meter">
              {Array.from({ length: 20 }, (_, index) => (
                <i key={index} data-lit={index < volume / 5} />
              ))}
            </div>
            <span className="pr-volume-value">
              <NumberFlow
                value={volume}
                transformTiming={{
                  duration: 220,
                  easing: "cubic-bezier(0.22, 1, 0.36, 1)",
                }}
                spinTiming={{
                  duration: 220,
                  easing: "cubic-bezier(0.22, 1, 0.36, 1)",
                }}
                opacityTiming={{ duration: 150, easing: "ease-out" }}
                respectMotionPreference
              />
            </span>
          </div>
          <header className="pr-status">
            <span className="pr-clock">{clock}</span>
            <span className="pr-state" role="status">
              <i data-recording={mode === "recording"} />
              {status}
            </span>
            <button
              type="button"
              className="pr-transport"
              aria-label={transportLabel}
              title={transportLabel}
              onClick={() => changeMode(running ? "paused" : "playing")}
            >
              {running ? <Pause weight="fill" /> : <Play weight="fill" />}
            </button>
            <span
              className="pr-signal"
              aria-label={
                connected ? "Signal connected" : "Signal disconnected"
              }
            >
              {connected ? <WifiHigh /> : <WifiSlash />}
            </span>
          </header>

          <div className="pr-waveform" aria-hidden="true">
            <div className="pr-ticks" ref={ticks}>
              <svg viewBox="0 0 600 4" preserveAspectRatio="none">
                <g ref={tickTrack}>
                  {Array.from({ length: 77 }, (_, index) => (
                    <path
                      key={index}
                      d={`M ${index * 8} 0 v 4`}
                      vectorEffect="non-scaling-stroke"
                    />
                  ))}
                </g>
              </svg>
            </div>
            <div className="pr-wave-window" ref={waveWindow}>
              <svg viewBox="0 0 600 200" preserveAspectRatio="none">
                <g className="pr-wave-track" ref={waveTrack}>
                  {[0, 1, 2].map((copy) =>
                    WAVE.map((height, index) => (
                      <path
                        key={`${copy}-${index}`}
                        d={`M ${copy * 360 + index * 8} ${100 - height / 2} v ${height}`}
                      />
                    )),
                  )}
                </g>
              </svg>
            </div>
            <div className="pr-playhead" ref={playhead}>
              <i />
            </div>
          </div>

          <output
            className="pr-timer"
            aria-label="Elapsed time"
            aria-live="off"
          >
            {formatTime(elapsed)}
          </output>
        </div>

        <div className="pr-speaker-row">
          <span
            className="pr-battery"
            aria-label="Demo battery level: 89 percent"
          >
            <BatteryHigh weight="fill" />
            89%
          </span>
          <div className="pr-grille" aria-hidden="true" />
        </div>

        <div className="pr-controls">
          <button
            type="button"
            className="pr-key pr-record"
            aria-label={
              mode === "recording" ? "Pause recording" : "Start recording"
            }
            title={mode === "recording" ? "Pause recording" : "Record"}
            aria-pressed={mode === "recording"}
            onClick={() =>
              changeMode(mode === "recording" ? "paused" : "recording")
            }
          >
            <span className="pr-well">
              {mode === "recording" ? (
                <Pause weight="fill" />
              ) : (
                <Circle weight="fill" />
              )}
            </span>
          </button>
          <button
            type="button"
            className="pr-key pr-stop"
            aria-label="Stop"
            title="Stop"
            data-stopped={mode === "stopped"}
            onClick={() => changeMode("stopped")}
          >
            <span className="pr-well">
              <Square weight="fill" />
            </span>
          </button>
          <button
            type="button"
            className="pr-key pr-connect"
            aria-label={connected ? "Disconnect signal" : "Connect signal"}
            title={connected ? "Disconnect signal" : "Connect signal"}
            aria-pressed={connected}
            onClick={() => {
              void playButtonSound();
              setConnected((value) => !value);
            }}
          >
            <span className="pr-well">
              {connected ? <WifiHigh /> : <WifiSlash />}
            </span>
          </button>
          <button
            type="button"
            className="pr-key pr-reset"
            aria-label="Reset timer"
            title="Reset timer"
            onClick={reset}
          >
            <span className="pr-well">
              <ArrowClockwise />
            </span>
          </button>
        </div>
      </section>
      <style>{`
        .pr-scene { width:100%; min-width:0; display:flex; align-items:center; justify-content:center; padding:58px 30px 100px; background:transparent; color:#d5d5d5; isolation:isolate; font-family:"Helvetica Neue",Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
        .pr-device { position:relative; width:390px; max-width:100%; padding:8px 8px 9px; border:1px solid #fff; border-radius:22px; background:linear-gradient(165deg,#fff 0%,#ededed 34%,#d8d8d8 100%); box-shadow:0 1px 0 1px #fff inset,0 -2px 1px #fff inset,0 13px 0 -1px #999,0 16px 2px -3px #999,0 32px 28px -12px #0005,0 72px 52px -30px #0006; }
        .pr-wheel-control { position:absolute; top:15%; right:-27px; width:44px; height:64px; z-index:2; }
        .pr-wheel { position:absolute; top:8px; left:17px; width:10px; height:48px; border-radius:0 3px 3px 0; background:repeating-linear-gradient(0deg,#999 0px,#e9e9e9 1px,#aaa 2px); box-shadow:inset 3px 0 3px #777,inset -1px 0 1px #fff9,1px 0 0 #eee,2px 2px 3px #0002; pointer-events:none; }
        .pr-volume-input { position:absolute; inset:0; width:44px; height:64px; margin:0; opacity:0; writing-mode:vertical-lr; direction:rtl; cursor:ns-resize; touch-action:none; }
        .pr-wheel-control:has(:focus-visible) .pr-wheel { outline:2px solid #777; outline-offset:3px; }
        .pr-volume-hud { position:absolute; top:17%; right:6%; z-index:1; display:flex; align-items:center; gap:9px; height:44px; padding:0 10px; border:1px solid #111; border-radius:7px; background:linear-gradient(#262626,#191919); box-shadow:inset 0 1px .5px #ffffff26,inset 0 2px 2px #ffffff0d,0 8px 8px -6px #000b,0 14px 18px -10px #0009,0 0 3px #0008; opacity:0; transform:translateX(6px) scale(.97); transform-origin:right center; pointer-events:none; transition:opacity 150ms ease,transform 220ms cubic-bezier(.22,1,.36,1); }
        .pr-volume-hud[data-visible="true"] { opacity:1; transform:translateX(0) scale(1); }
        .pr-volume-hud svg { width:17px; height:17px; }
        .pr-volume-value { display:grid; place-items:center; flex:none; width:30px; height:24px; font-size:11px; line-height:16px; font-variant-numeric:tabular-nums; color:#e0e2d9; border-radius:3px; background:#101010; box-shadow:inset 0 2px 3px #0009,0 .5px 0 #ffffff30; text-shadow:0 0 3px #ffffff16; }
        .pr-volume-meter { display:flex; align-items:center; gap:2px; height:24px; padding:0 6px; border-radius:3px; background:#0d0d0d; box-shadow:inset 0 2px 5px #0009,0 .5px 0 #ffffff30; }
        .pr-volume-meter i { width:3px; height:12px; border-radius:1px; background:#ffffff16; }
        .pr-volume-meter i[data-lit="true"] { background:#dcded8; box-shadow:0 0 3px #ffffff16; }
        .pr-display { position:relative; aspect-ratio:640/692; overflow:hidden; border:2px solid #181818; border-radius:15px; background:repeating-linear-gradient(0deg,#ffffff04 0px,#ffffff04 1px,#00000012 2px,#00000012 3px),linear-gradient(125deg,#272827,#0a0b0a 83%); box-shadow:0 0 0 1px #8b8b8b,0 1px 0 2px #fff,inset 0 0 0 2px #000,inset 0 3px 2px 3px #ffffff20,inset 0 -12px 30px #0007; }
        .pr-status { position:absolute; top:3.7%; left:5%; right:4%; display:flex; align-items:center; gap:12px; height:28px; font-size:10px; font-weight:400; white-space:nowrap; text-shadow:0 1px 1px #000; }
        .pr-clock { font-variant-numeric:tabular-nums; }
        .pr-state { display:flex; align-items:center; gap:6px; color:#b5b5b5; flex:1; }
        .pr-state i { width:5px; height:5px; border-radius:50%; background:#e54435; box-shadow:0 0 4px #f4433633; }
        .pr-state i[data-recording="true"] { animation:pr-led 1.6s ease-in-out infinite; }
        .pr-transport { display:grid; place-items:center; position:relative; padding:0; width:16px; height:28px; border:0; color:#c7c7c7; background:none; cursor:pointer; }
        .pr-transport::before { content:""; position:absolute; width:44px; height:44px; }
        .pr-transport svg { width:12px; height:12px; }
        .pr-signal { display:grid; place-items:center; }
        .pr-signal svg { width:16px; height:16px; }
        .pr-waveform { position:absolute; left:5%; right:5%; top:35%; height:28%; }
        .pr-ticks { position:absolute; top:calc(50% - 2px); left:0; right:0; height:4px; clip-path:inset(0 0 0 100%); overflow:hidden; opacity:.65; }
        .pr-ticks svg { display:block; width:100%; height:100%; stroke:#a4a4a4; stroke-width:1; fill:none; }
        .pr-wave-window { position:absolute; inset:0; overflow:hidden; clip-path:inset(0); }
        .pr-wave-window svg { width:100%; height:100%; overflow:visible; }
        .pr-wave-track { stroke:#e1e1e1; stroke-width:1.65; fill:none; }
        .pr-playhead { position:absolute; inset:0; transform:translateX(100%); pointer-events:none; }
        .pr-playhead::before { content:""; position:absolute; top:0; bottom:0; left:0; width:1.5px; background:#ed4437; box-shadow:0 0 3px #ff3b3025; }
        .pr-playhead i { position:absolute; top:0; left:.75px; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:#ed4437; }
        .pr-timer { position:absolute; left:5%; bottom:3%; font-size:56px; line-height:1.1; font-weight:200; letter-spacing:0; font-variant-numeric:tabular-nums; color:#dededb; text-shadow:0 1px 2px #000; }
        .pr-speaker-row { display:flex; align-items:center; gap:11px; height:61px; }
        .pr-battery { display:flex; align-items:center; justify-content:center; gap:3px; flex:none; width:58px; height:26px; border-radius:7px; background:#080808; box-shadow:0 1px 0 #fff,inset 0 1px 2px #000; color:#e7e7e7; font-size:10px; }
        .pr-battery svg { width:11px; height:11px; transform:rotate(-90deg); }
        .pr-grille { flex:1; height:25px; background:radial-gradient(circle at 2px 2px,#242424 0 1px,#888 1.2px,transparent 1.8px) 0 0/5px 5px; filter:drop-shadow(0 1px 0 #fff); }
        .pr-controls { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; height:134px; padding:2px; border-radius:14px; background:#343434; box-shadow:0 1px 0 1px #fff,0 -1px 1px #999,inset 0 1px 2px #000; overflow:hidden; }
        .pr-key { display:grid; place-items:center; min-width:0; min-height:44px; padding:0; border:0; color:#808080; background:linear-gradient(165deg,#dedede,#d8d8d8); box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #bcbcbc; cursor:pointer; transition:transform 150ms cubic-bezier(.25,.46,.45,.94),background-color 150ms ease; }
        .pr-record { grid-row:1/3; border-radius:11px 3px 3px 11px; color:#be6c6b; }
        .pr-stop { grid-row:1/3; border-radius:3px; }
        .pr-stop[data-stopped="true"] { color:#343434; background:linear-gradient(165deg,#d0d0d0,#d8d8d8); box-shadow:inset 0 2px 5px #0002,inset 0 -1px 0 #ffffff80; }
        .pr-stop[data-stopped="true"] .pr-well { box-shadow:inset 0 3px 6px #0003,0 1px 0 #ffffff80; }
        .pr-connect { grid-column:3; grid-row:1; border-radius:3px 11px 3px 3px; }
        .pr-reset { grid-column:3; grid-row:2; border-radius:3px 3px 11px 3px; }
        .pr-well { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(165deg,#bcbaba 0%,#d1cece 35%,#eeeeed 85%); box-shadow:inset 0 2px 4px #00000009,0 1px 1px #ffffff25; transition:transform 150ms cubic-bezier(.25,.46,.45,.94); }
        .pr-well svg { width:20px; height:20px; }
        .pr-connect .pr-well,.pr-reset .pr-well { width:39px; height:39px; }
        .pr-connect svg,.pr-reset svg { width:16px; height:16px; }
        .pr-connect .pr-well,.pr-reset .pr-well { position:relative; transform:none; transition:none; }
        .pr-connect .pr-well::after,.pr-reset .pr-well::after { content:""; position:absolute; inset:0; border-radius:inherit; background:#ffffff25; opacity:0; pointer-events:none; transition:opacity 150ms ease; }
        .pr-key:active .pr-well { transform:scale(.96) translateY(1px); }
        .pr-key:active { box-shadow:inset 0 2px 5px #0002; }
        .pr-record[aria-pressed="true"] { color:#d64b43; }
        .pr-key:focus-visible,.pr-transport:focus-visible { outline:2px solid #888; outline-offset:-4px; }
        @media (hover:hover) and (pointer:fine) { .pr-key:hover .pr-well { transform:scale(1.025); } .pr-key:active .pr-well { transform:scale(.96) translateY(1px); } .pr-transport:hover { color:white; } }
        .pr-connect:is(:hover,:active) .pr-well,.pr-reset:is(:hover,:active) .pr-well { transform:none; }
        @media (hover:hover) and (pointer:fine) { .pr-connect:hover .pr-well::after,.pr-reset:hover .pr-well::after { opacity:1; } }
        @keyframes pr-led { 50% { opacity:.4; } }
        @media (max-width:480px) { .pr-scene { padding:38px 18px 70px; } .pr-status { gap:7px; font-size:8px; } .pr-timer { font-size:42px; } .pr-controls { height:112px; } .pr-speaker-row { height:49px; } .pr-well { width:48px; height:48px; } }
        @media (prefers-reduced-motion:reduce) { .pr-wave-track,.pr-state i[data-recording="true"] { animation:none; } .pr-key,.pr-well { transition:none; } }
        @media (prefers-reduced-motion:reduce) { .pr-volume-hud,.pr-connect .pr-well::after,.pr-reset .pr-well::after { transition:none; } }
        @media (prefers-reduced-motion:reduce) { .pr-volume-hud { transform:none; } }
      `}</style>
    </div>
  );
}
Pocket Recorder
