kit-ui/components/animate/KeyframeProperties.tsx

'use client';

import { Slider } from '@/components/ui/slider';
import { ColorInput } from '@/components/ui/color-input';
import { MousePointerClick } from 'lucide-react';
import { cn } from '@/lib/utils/cn';
import type { Keyframe, KeyframeProperties, TransformValue } from '@/types/animate';
import { DEFAULT_TRANSFORM } from '@/lib/animate/defaults';

interface Props {
  keyframe: Keyframe | null;
  onChange: (id: string, props: KeyframeProperties) => void;
}

interface SliderRowProps {
  label: string;
  unit?: string;
  value: number;
  min: number;
  max: number;
  step?: number;
  onChange: (v: number) => void;
}

function SliderRow({ label, unit, value, min, max, step = 1, onChange }: SliderRowProps) {
  return (
    <div className="grid grid-cols-[1fr_auto] gap-x-3 items-center">
      <div className="space-y-1.5">
        <label className="text-[9px] text-muted-foreground/50 font-mono">
          {label}{unit && <span className="opacity-50"> ({unit})</span>}
        </label>
        <Slider min={min} max={max} step={step} value={[value]} onValueChange={([v]) => onChange(v)} />
      </div>
      <input
        type="number"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(e) => onChange(Number(e.target.value))}
        className="w-14 bg-transparent border border-border/40 rounded-md px-1.5 py-1 text-[10px] font-mono text-center outline-none focus:border-primary/50 transition-colors text-foreground/80 mt-4"
      />
    </div>
  );
}

export function KeyframeProperties({ keyframe, onChange }: Props) {
  if (!keyframe) {
    return (
      <div className="flex flex-col items-center justify-center py-12 text-center gap-3">
        <MousePointerClick className="w-7 h-7 text-muted-foreground/20" />
        <p className="text-[10px] text-muted-foreground/40 font-mono leading-relaxed max-w-[180px]">
          Select a keyframe on the timeline to edit its properties
        </p>
      </div>
    );
  }

  const props = keyframe.properties;
  const t: TransformValue = { ...DEFAULT_TRANSFORM, ...props.transform };

  const setTransform = (key: keyof TransformValue, value: number) => {
    onChange(keyframe.id, { ...props, transform: { ...t, [key]: value } });
  };

  const setProp = <K extends keyof KeyframeProperties>(key: K, value: KeyframeProperties[K]) => {
    onChange(keyframe.id, { ...props, [key]: value });
  };

  const hasBg = props.backgroundColor && props.backgroundColor !== 'none';

  return (
    <div className="space-y-5">
      <div className="flex items-center gap-2">
        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
          Properties
        </span>
        <span className="text-[9px] text-primary/60 font-mono bg-primary/10 px-1.5 py-0.5 rounded">
          {keyframe.offset}%
        </span>
      </div>

      {/* Transform */}
      <div className="space-y-3">
        <p className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/50">Transform</p>
        <SliderRow label="Translate X" unit="px" value={t.translateX} min={-500} max={500} onChange={(v) => setTransform('translateX', v)} />
        <SliderRow label="Translate Y" unit="px" value={t.translateY} min={-500} max={500} onChange={(v) => setTransform('translateY', v)} />
        <SliderRow label="Rotate" unit="°" value={t.rotate} min={-360} max={360} onChange={(v) => setTransform('rotate', v)} />
        <SliderRow label="Scale X" value={t.scaleX} min={0} max={3} step={0.01} onChange={(v) => setTransform('scaleX', v)} />
        <SliderRow label="Scale Y" value={t.scaleY} min={0} max={3} step={0.01} onChange={(v) => setTransform('scaleY', v)} />
        <SliderRow label="Skew X" unit="°" value={t.skewX} min={-90} max={90} onChange={(v) => setTransform('skewX', v)} />
        <SliderRow label="Skew Y" unit="°" value={t.skewY} min={-90} max={90} onChange={(v) => setTransform('skewY', v)} />
      </div>

      {/* Visual */}
      <div className="space-y-3">
        <p className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/50">Visual</p>
        <SliderRow label="Opacity" value={props.opacity ?? 1} min={0} max={1} step={0.01} onChange={(v) => setProp('opacity', v)} />

        {/* Background color */}
        <div>
          <div className="flex items-center justify-between mb-1.5">
            <label className="text-[9px] text-muted-foreground/50 font-mono">Background Color</label>
            <button
              onClick={() => setProp('backgroundColor', hasBg ? 'none' : '#8b5cf6')}
              className={cn(
                'text-[9px] font-mono px-1.5 py-0.5 rounded border transition-all',
                hasBg
                  ? 'border-primary/40 text-primary bg-primary/10'
                  : 'border-border/30 text-muted-foreground/50 hover:border-primary/30 hover:text-primary'
              )}
            >
              {hasBg ? 'On' : 'Off'}
            </button>
          </div>
          <ColorInput
            value={hasBg ? props.backgroundColor! : '#8b5cf6'}
            onChange={(v) => setProp('backgroundColor', v)}
            disabled={!hasBg}
          />
        </div>

        <SliderRow label="Border Radius" unit="px" value={props.borderRadius ?? 0} min={0} max={200} onChange={(v) => setProp('borderRadius', v)} />
      </div>

      {/* Filters */}
      <div className="space-y-3">
        <p className="text-[9px] font-semibold uppercase tracking-wider text-muted-foreground/50">Filter</p>
        <SliderRow label="Blur" unit="px" value={props.blur ?? 0} min={0} max={50} onChange={(v) => setProp('blur', v)} />
        <SliderRow label="Brightness" value={props.brightness ?? 1} min={0} max={3} step={0.01} onChange={(v) => setProp('brightness', v)} />
      </div>
    </div>
  );
}