"use client";

import { BlobCapButton } from "./index";

export interface DemoProps {
  label?: string;
  accent?: string;
  spread?: number;
  blur?: number;
  growth?: number;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Remix", accent = "#FF4D8D", spread = 40, blur = 10, growth = 1.3 }: DemoProps) {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6 p-8">
      <BlobCapButton label={label} accent={accent} spread={spread} blur={blur} growth={growth} />
      <BlobCapButton label="Shuffle" accent="#38BDF8" spread={spread} blur={blur} growth={growth} />
    </div>
  );
}

1d:T182e, 1e:T17786,

<script setup lang="ts">
import { computed, ref } from "vue";

const props = withDefaults(
  defineProps<{
    label?: string;
    accent?: string;
    spread?: number;
    blur?: number;
    growth?: number;
  }>(),
  { label: "Remix", accent: "#FF4D8D", spread: 40, blur: 10, growth: 1.3 },
);

function hexToHsl(hex: string): [number, number, number] {
  const clean = /^#[0-9a-fA-F]{6}$/.test(hex) ? hex : "#ff4d8d";
  const r = parseInt(clean.slice(1, 3), 16) / 255;
  const g = parseInt(clean.slice(3, 5), 16) / 255;
  const b = parseInt(clean.slice(5, 7), 16) / 255;
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const l = (max + min) / 2;
  let h = 0;
  let s = 0;
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      default:
        h = (r - g) / d + 4;
    }
    h *= 60;
  }
  return [h, s * 100, l * 100];
}

function clampL(value: number): number {
  return Math.min(90, Math.max(10, value));
}

function blobShades(accent: string): [string, string] {
  const [h, s, l] = hexToHsl(accent);
  return [
    `hsl(${h.toFixed(1)} ${s.toFixed(0)}% ${l.toFixed(0)}%)`,
    `hsl(${h.toFixed(1)} ${Math.min(100, s + 6).toFixed(0)}% ${clampL(l - 22).toFixed(0)}%)`,
  ];
}

function blobRadius(softness: number): string {
  const a = Math.min(72, Math.max(48, 48 + softness));
  const b = Math.max(28, Math.min(52, 52 - softness / 2));
  return `${a}% ${100 - a}% ${b}% ${100 - b}% / ${100 - b}% ${b}% ${100 - a}% ${a}%`;
}

function relLuminance(hex: string): number {
  const clean = /^#[0-9a-fA-F]{6}$/.test(hex) ? hex : "#ff4d8d";
  const parts = [0, 2, 4].map((i) => {
    const c = parseInt(clean.slice(1 + i, 3 + i), 16) / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * parts[0] + 0.7152 * parts[1] + 0.0722 * parts[2];
}

const active = ref(false);
const pressed = ref(false);
const focused = ref(false);

const shades = computed(() => blobShades(props.accent));
const mainColor = computed(() => shades.value[0]);
const deepColor = computed(() => shades.value[1]);
const mainRadius = computed(() => blobRadius(props.blur));
const deepRadius = computed(() => blobRadius(Math.max(2, 24 - props.blur)));
const offset = computed(() => Math.min(1.5, Math.max(0.15, props.spread / 45)));
const squish = computed(() => (pressed.value ? 0.92 : 1));
const labelDark = computed(() => active.value && relLuminance(props.accent) > 0.42);

const mainStyle = computed(() => ({
  left: active.value ? `calc(50% + ${offset.value}em)` : "18%",
  top: active.value ? "50%" : "44%",
  background: mainColor.value,
  borderRadius: mainRadius.value,
  transform: `translate(-50%, -50%) rotate(${active.value ? 4 : 12}deg) scale(${(active.value ? props.growth : 0.46) * squish.value})`,
}));
const deepStyle = computed(() => ({
  left: active.value ? `calc(50% - ${offset.value}em)` : "26%",
  top: active.value ? "50%" : "60%",
  background: deepColor.value,
  borderRadius: deepRadius.value,
  transform: `translate(-50%, -50%) rotate(${active.value ? -6 : -16}deg) scale(${(active.value ? props.growth * 0.9 : 0.4) * squish.value})`,
}));

function onEnter() {
  active.value = true;
}
function onLeave() {
  active.value = false;
  pressed.value = false;
}
function onDown() {
  pressed.value = true;
}
function onUp() {
  pressed.value = false;
}
function onFocus() {
  active.value = true;
  focused.value = true;
}
function onBlur() {
  active.value = false;
  focused.value = false;
  pressed.value = false;
}
function onKeydown(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = true;
}
function onKeyup(event: KeyboardEvent) {
  if (event.key === "Enter" || event.key === " ") pressed.value = false;
}
</script>

<template>
  <button
    type="button"
    class="blob-cap-btn"
    :class="{ 'blob-cap-btn--focused': focused, 'blob-cap-btn--label-dark': labelDark }"
    @pointerenter="onEnter"
    @pointerleave="onLeave"
    @pointerdown="onDown"
    @pointerup="onUp"
    @focus="onFocus"
    @blur="onBlur"
    @keydown="onKeydown"
    @keyup="onKeyup"
  >
    <span class="blob-field" aria-hidden="true">
      <span class="blob blob--deep" :style="deepStyle" />
      <span class="blob blob--main" :style="mainStyle" />
    </span>
    <span class="label">{{ label }}</span>
  </button>
</template>

<style scoped>
.blob-cap-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8em;
  height: 3em;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.15);
  background: #0b0d10;
  outline: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 160ms cubic-bezier(0.22, 0.8, 0.24, 1), border-color 160ms cubic-bezier(0.22, 0.8, 0.24, 1);
}
.blob-cap-btn--focused {
  border-color: rgb(255 255 255 / 0.6);
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.16);
}
.blob-cap-btn:active {
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.92);
}
.blob-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.blob {
  position: absolute;
  width: 5.6em;
  height: 3em;
  transition: left 460ms cubic-bezier(0.22, 0.8, 0.24, 1), top 460ms cubic-bezier(0.22, 0.8, 0.24, 1),
    transform 460ms cubic-bezier(0.22, 0.8, 0.24, 1), border-radius 460ms cubic-bezier(0.22, 0.8, 0.24, 1),
    background-color 320ms cubic-bezier(0.22, 0.8, 0.24, 1);
}
.blob--deep {
  width: 5.2em;
  height: 3.2em;
}
.label {
  position: relative;
  z-index: 1;
  padding: 0 0.75em;
  font: 500 18px/1 system-ui, sans-serif;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms cubic-bezier(0.22, 0.8, 0.24, 1);
}
.blob-cap-btn--label-dark .label {
  color: #0b0d10;
}
@media (prefers-reduced-motion: reduce) {
  .blob {
    transition: background-color 220ms cubic-bezier(0.22, 0.8, 0.24, 1);
  }
}
</style>

Nearby