/* global React */
const { useEffect: usePE, useState: usePS } = React;

function Pill({ state = "idle", border = "rainbow", waveform = "bars", llmDot = "#38BDF8", shortcut = "Win+Alt", timer = null, scale = 1 }) {
  const [tick, setTick] = usePS(0);
  usePE(() => {
    if (state !== "recording") return;
    const i = setInterval(() => setTick(t => t + 1), 83);
    return () => clearInterval(i);
  }, [state]);

  const isRec = state === "recording";
  const isAct = state !== "idle";
  const padX = state === "idle" ? 14 : isRec ? 18 : 16;
  const bgAlpha = isAct ? 0.85 : 0.65;

  const ringColors = { blue: "#38BDF8", green: "#4ADE80", purple: "#A78BFA", orange: "#FB923C", none: "#3C3C3C" };
  const recColor = ringColors[border];

  let ring = "0.5px solid rgba(255,255,255,0.18)";
  let glow = "none";
  if (state === "transcribing") { ring = "1.5px solid rgba(56,189,248,0.6)"; glow = "0 0 14px rgba(56,189,248,0.45)"; }
  if (state === "processing") { ring = "1.5px solid rgba(167,139,250,0.6)"; glow = "0 0 14px rgba(167,139,250,0.45)"; }
  if (state === "done") { ring = "1.5px solid rgba(74,222,128,0.7)"; glow = "0 0 14px rgba(74,222,128,0.5)"; }
  if (state === "error") { ring = "1.5px solid rgba(239,68,68,0.6)"; glow = "0 0 14px rgba(239,68,68,0.5)"; }
  if (isRec) {
    ring = "2px solid transparent";
    glow = border === "rainbow"
      ? "0 0 14px rgba(167,139,250,0.45), 0 0 8px rgba(56,189,248,0.45), 0 0 4px rgba(74,222,128,0.45)"
      : `0 0 14px ${recColor}66, 0 0 8px ${recColor}44`;
  }

  return (
    <div style={{
      transform: `scale(${scale})`,
      position: "relative",
      height: 36,
      padding: `0 ${padX}px`,
      display: "inline-flex",
      alignItems: "center",
      gap: 8,
      background: `rgba(16,16,18,${bgAlpha})`,
      backdropFilter: "blur(40px) saturate(1.5)",
      WebkitBackdropFilter: "blur(40px) saturate(1.5)",
      borderRadius: 9999,
      border: ring,
      boxShadow: glow,
      color: "rgba(255,255,255,0.95)",
      fontSize: 12,
      fontFamily: "var(--font-sans)",
      whiteSpace: "nowrap",
      transition: "padding 200ms cubic-bezier(0.4,0,0.2,1)",
    }}>
      {isRec && border === "rainbow" && (
        <span style={{
          position: "absolute", inset: -2, borderRadius: 9999, padding: 2,
          background: "conic-gradient(from var(--dimmy-angle, 0deg), #FF5C5C, #F59E0B, #FBBF24, #4ADE80, #22D3EE, #38BDF8, #A78BFA, #E879F9, #FF5C5C)",
          WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
          WebkitMaskComposite: "xor", maskComposite: "exclude",
          animation: "dimmy-rotate 3s linear infinite", pointerEvents: "none",
        }}/>
      )}
      {isRec && border !== "rainbow" && border !== "none" && (
        <span style={{
          position: "absolute", inset: -2, borderRadius: 9999,
          border: `2px solid ${recColor}`, animation: "dimmy-pulse 2.5s ease-in-out infinite",
          pointerEvents: "none",
        }}/>
      )}

      {state === "idle" && (
        <>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: llmDot, boxShadow: `0 0 6px ${llmDot}66` }}/>
          <Wave style={waveform} amp={0.35} tick={tick}/>
          <span style={{ marginLeft: 4, color: "rgba(255,255,255,0.55)", fontFamily: "Cascadia Mono, ui-monospace, monospace", fontSize: 10 }}>{shortcut}</span>
        </>
      )}
      {isRec && (
        <>
          <Wave style={waveform} amp={1} tick={tick}/>
          {timer && <span style={{ marginLeft: 2, fontFamily: "Cascadia Mono, ui-monospace, monospace", fontSize: 11, color: "rgba(255,255,255,0.9)" }}>{timer}</span>}
        </>
      )}
      {state === "transcribing" && (<><Spin color="#38BDF8"/><span style={{ color: "#38BDF8" }}>Transcribing…</span></>)}
      {state === "processing" && (<><Spin color="#A78BFA"/><span style={{ color: "#A78BFA" }}>Processing…</span></>)}
      {state === "done" && (<><span style={{ color: "#4ADE80", fontWeight: 700 }}>✓</span><span style={{ color: "#4ADE80" }}>Pasted</span></>)}
      {state === "error" && (<><span style={{ color: "#EF4444", fontWeight: 700 }}>×</span><span style={{ color: "#EF4444" }}>Couldn't transcribe</span></>)}
    </div>
  );
}

function Wave({ style, amp, tick }) {
  const w = [0.3, 0.5, 0.7, 1.0, 0.7, 0.5, 0.3];
  if (style === "dots") {
    return (
      <span style={{ display: "inline-flex", alignItems: "center", gap: 3, height: 16 }}>
        {[0,1,2,3,4].map(i => {
          const base = [0.5,0.75,1,0.75,0.5][i];
          const j = 1 + Math.sin(tick*0.7+i) * 0.2;
          return <i key={i} style={{ width: 5, height: 5, borderRadius: 99, background: "rgba(255,255,255,0.95)", opacity: Math.min(1, base*amp*j) }}/>;
        })}
      </span>
    );
  }
  if (style === "line") {
    const pts = w.map((ww, i) => {
      const j = 1 + Math.sin(tick*0.9+i)*0.2;
      const y = 8 - ww*amp*6*j;
      return `${4 + i*9},${y.toFixed(1)}`;
    }).join(" ");
    return <svg width="64" height="16" style={{ display: "block" }}><polyline points={pts} fill="none" stroke="rgba(255,255,255,0.95)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>;
  }
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 2, height: 16 }}>
      {w.map((ww, i) => {
        const j = 1 + Math.sin(tick*0.9+i*0.7)*0.2;
        const h = Math.max(2, Math.min(16, ww*16*amp*j));
        return <i key={i} style={{ width: 3, height: h, background: "rgba(255,255,255,0.92)", borderRadius: 1.5, display: "block" }}/>;
      })}
    </span>
  );
}

function Spin({ color }) {
  return <span style={{ width: 12, height: 12, borderRadius: 99, border: `1.5px solid ${color}40`, borderTopColor: color, animation: "dimmy-spin 700ms linear infinite", display: "inline-block" }}/>;
}

window.Pill = Pill;