"use client";

import { useEffect, useState } from "react";

/**
 * Styling lives in the file rather than in a stylesheet, so it still works
 * when it is copied out on its own.
 *
 * The body is moulded plastic, not glass: an opaque putty shell grained with
 * noise, a bezel cut inside its own edge, and keys that sit proud in a sunken
 * bay and bounce back like rubber. The emitter behind the notch is dead until
 * a key goes down, then fires a beam across the page.
 */
const CSS = `
.hr-remote{position:absolute;top:50%;isolation:isolate;display:flex;flex-direction:column;transform:translateY(-50%);border:1px solid rgb(var(--hr-line,180 180 173));background-color:rgb(var(--hr-body,233 233 229));background-image:linear-gradient(165deg,rgb(255 255 255/.55),rgb(255 255 255/0) 55%,rgb(0 0 0/.1)),radial-gradient(130% 70% at 15% 0%,rgb(255 255 255/.16),transparent 62%);transition:transform 500ms cubic-bezier(.32,.72,0,1);box-shadow:inset 0 1px 0 rgb(255 255 255/.85),inset 0 -3px 3px rgb(0 0 0/.16),0 1px 0 rgb(0 0 0/.06),0 12px 24px -8px rgb(0 0 0/.32),0 28px 48px -12px rgb(0 0 0/.22)}
/* Grain, not scanlines. Multiply against the shell only — the isolate above
   keeps it off the stage behind. */
.hr-remote::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* The second edge inside the edge — what reads as wall thickness. */
.hr-remote::after{content:"";position:absolute;inset:calc(var(--hr-pad)*.4);pointer-events:none;border:1px solid rgb(255 255 255/.55);box-shadow:inset 0 0 0 1px rgb(0 0 0/.1)}
.hr-remote[data-edge="right"]{right:0;border-right:0;border-top-left-radius:var(--hr-cap);border-bottom-left-radius:var(--hr-cap)}
.hr-remote[data-edge="left"]{left:0;border-left:0;border-top-right-radius:var(--hr-cap);border-bottom-right-radius:var(--hr-cap)}
.hr-remote[data-edge="right"]::after{border-top-left-radius:calc(var(--hr-cap) - var(--hr-pad)*.4);border-bottom-left-radius:calc(var(--hr-cap) - var(--hr-pad)*.4)}
.hr-remote[data-edge="left"]::after{border-top-right-radius:calc(var(--hr-cap) - var(--hr-pad)*.4);border-bottom-right-radius:calc(var(--hr-cap) - var(--hr-pad)*.4)}
.hr-remote[data-tucked="true"][data-edge="right"]{transform:translateY(-50%) translateX(calc(100% - var(--hr-peek)))}
.hr-remote[data-tucked="true"][data-edge="left"]{transform:translateY(-50%) translateX(calc(-100% + var(--hr-peek)))}
/* Last, and equally specific, so it wins the tuck without !important. */
.hr-remote[data-tucked="true"]:hover,.hr-remote[data-tucked="true"]:focus-within{transform:translateY(-50%)}
.hr-bay{position:relative;z-index:1;display:flex;flex-direction:column;background-image:linear-gradient(#2a2a28,#1c1c1a);box-shadow:inset 0 3px 8px rgb(0 0 0/.55),inset 0 -1px 0 rgb(255 255 255/.06),0 1px 0 rgb(255 255 255/.6)}
.hr-key{display:flex;align-items:center;justify-content:center;border-radius:9999px;border:1px solid #a9a9a2;color:#55554f;background-color:#efefea;background-image:linear-gradient(#fdfdfb,#e2e2dd);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgb(0 0 0/.35),0 1px 1px rgb(0 0 0/.2);transition:transform 260ms cubic-bezier(.34,1.56,.64,1),box-shadow 200ms,background-color 200ms,color 200ms}
.hr-key:hover{color:rgb(var(--hr-ink,9 9 11))}
.hr-key:focus-visible{outline:2px solid rgb(var(--hr-beam,16 185 129));outline-offset:3px}
/* Down is fast, up is the overshoot in the transition above. That asymmetry is
   the whole of what makes it read as rubber. */
.hr-key:active{transition-duration:80ms;transform:translateY(1px) scale(.95);box-shadow:inset 0 2px 3px rgb(0 0 0/.35),0 0 0 rgb(0 0 0/0)}
.hr-key[aria-pressed="true"]{background-image:linear-gradient(rgb(var(--hr-beam,16 185 129)/.18),rgb(var(--hr-beam,16 185 129)/.18)),linear-gradient(#fdfdfb,#e2e2dd);color:rgb(var(--hr-beam,16 185 129));box-shadow:inset 0 2px 3px rgb(0 0 0/.25)}
.hr-lens{position:absolute;top:50%;z-index:1;border-radius:9999px;transform:translateY(-50%);background:#141412;box-shadow:inset 0 1px 3px rgb(0 0 0/.8),0 1px 0 rgb(255 255 255/.5)}
.hr-bulb{position:absolute;top:50%;z-index:2;width:3px;border-radius:9999px;transform:translateY(-50%);background:rgb(var(--hr-dim,163 163 163)/.55);transition:background 220ms,box-shadow 220ms}
.hr-remote[data-firing="1"] .hr-bulb{background:rgb(var(--hr-beam,16 185 129));box-shadow:0 0 8px 2px rgb(var(--hr-beam,16 185 129)/.95),0 0 22px 7px rgb(var(--hr-beam,16 185 129)/.55)}
.hr-beam{position:absolute;top:50%;z-index:1;pointer-events:none;opacity:0;filter:blur(7px);background:radial-gradient(ellipse 100% 62% at var(--hr-origin) 50%,rgb(var(--hr-beam,16 185 129)/.6),rgb(var(--hr-beam,16 185 129)/.24) 38%,transparent 74%)}
@media (prefers-reduced-motion:no-preference){
.hr-beam{animation:hr-fire 760ms cubic-bezier(.2,.7,.2,1) both}
@keyframes hr-fire{0%{opacity:0;transform:translateY(-50%) scaleX(.12)}16%{opacity:1}100%{opacity:0;transform:translateY(-50%) scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){.hr-remote,.hr-key{transition:none}}
`;

export type RemoteItem = {
  id: string;
  label: string;
  icon: React.ReactNode;
};

export type RemoteProps = {
  items: RemoteItem[];
  value: string;
  onChange: (id: string) => void;
  /** Which wall it is mounted on. */
  edge?: "right" | "left";
  /** Key diameter in px. Every other measurement is a multiple of it. */
  keySize?: number;
  /** Slides away after this many ms, leaving the emitter showing. 0 stays out. */
  tuckAfter?: number;
  /** `r g b` channels, so the beam can be tinted without touching the file. */
  beam?: string;
};

/**
 * A handset docked against one edge of its container. It peeks on arrival so
 * it is seen, then tucks away leaving the emitter lens on screen, and comes
 * back on hover or focus.
 *
 * The parent must be `position: relative` and not clip its overflow, or the
 * beam is cut off at the wall it fires from.
 */
export default function Remote({
  items,
  value,
  onChange,
  edge = "right",
  keySize = 36,
  tuckAfter = 2400,
  beam = "16 185 129",
}: RemoteProps) {
  const [tucked, setTucked] = useState(false);
  // A press counter rather than a flag: the beam element is keyed on it, so a
  // second press restarts the animation instead of joining the one running.
  const [shots, setShots] = useState(0);
  const [firing, setFiring] = useState(false);

  useEffect(() => {
    if (!tuckAfter) return;
    const t = setTimeout(() => setTucked(true), tuckAfter);
    return () => clearTimeout(t);
  }, [tuckAfter]);

  useEffect(() => {
    if (!shots) return;
    setFiring(true);
    const t = setTimeout(() => setFiring(false), 760);
    return () => clearTimeout(t);
  }, [shots]);

  const pad = keySize / 4;
  const gap = keySize / 6;
  // Near edge carries the lens, far edge is the thin one against the wall.
  const padNear = pad * 2;
  const padFar = pad * 0.8;
  const width = keySize + gap + padNear + padFar;
  // `border-radius: 9999px` on a box this tall clamps each corner to half the
  // height and the caps come out as long ellipses. Half the width is the only
  // value that draws true semicircles.
  const cap = `${width / 2}px`;
  const near = edge === "right" ? "left" : "right";
  // The beam's apex is the edge its clip and gradient origin sit on, so it is
  // anchored from the opposite side to the bulb: offset from the far wall,
  // which lands its point on the bulb and fans it into the page.
  const far = edge === "right" ? "right" : "left";

  const press = (id: string) => {
    setShots((n) => n + 1);
    onChange(id);
  };

  return (
    <div
      className="hr-remote"
      data-edge={edge}
      data-tucked={tucked ? "true" : "false"}
      data-firing={firing ? "1" : "0"}
      style={
        {
          "--hr-pad": `${pad}px`,
          "--hr-cap": cap,
          // The lens ends at pad*1.6, so a tuck leaves it whole with a sliver
          // of shell around it.
          "--hr-peek": `${pad * 2}px`,
          "--hr-beam": beam,
          "--hr-origin": edge === "right" ? "100%" : "0%",
          paddingTop: `${padFar}px`,
          paddingBottom: `${padFar}px`,
          [`padding${edge === "right" ? "Left" : "Right"}`]: `${padNear}px`,
          [`padding${edge === "right" ? "Right" : "Left"}`]: `${padFar}px`,
        } as React.CSSProperties
      }
    >
      <style>{CSS}</style>

      {shots > 0 ? (
        <span
          key={shots}
          aria-hidden
          className="hr-beam"
          style={{
            [far]: `calc(100% - ${pad}px)`,
            width: `${keySize * 5.5}px`,
            height: `${keySize * 4.4}px`,
            transform: "translateY(-50%)",
            transformOrigin: `${edge === "right" ? "100%" : "0%"} 50%`,
            clipPath:
              edge === "right"
                ? "polygon(100% 41%, 100% 59%, 0% 97%, 0% 3%)"
                : "polygon(0 41%, 0 59%, 100% 97%, 100% 3%)",
          }}
        />
      ) : null}

      <span
        aria-hidden
        className="hr-lens"
        style={{
          [near]: `${pad * 0.4}px`,
          width: `${pad * 1.2}px`,
          height: `${keySize * 1.3}px`,
        }}
      />
      <span
        aria-hidden
        className="hr-bulb"
        // Centred in the lens: lens inset + half of what the 3px bulb leaves.
        style={{ [near]: `${pad - 1.5}px`, height: `${keySize}px` }}
      />

      <div
        className="hr-bay"
        style={{
          gap: `${gap}px`,
          padding: `${gap / 2}px`,
          borderRadius: `${keySize / 2 + gap / 2}px`,
        }}
      >
        {items.map((item) => (
          <button
            key={item.id}
            type="button"
            onClick={() => press(item.id)}
            aria-label={item.label}
            aria-pressed={value === item.id}
            className="hr-key"
            style={{ height: `${keySize}px`, width: `${keySize}px` }}
          >
            {item.icon}
          </button>
        ))}
      </div>
    </div>
  );
}