kit-ui/components/animate/KeyframeProperties.tsx

'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Slider } from '@/components/ui/slider';
import { Button } from '@/components/ui/button';
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">
        <Label className="text-[10px] text-muted-foreground">{label}</Label>
        <Slider
          min={min}
          max={max}
          step={step}
          value={[value]}
          onValueChange={([v]) => onChange(v)}
        />
      </div>
      <div className="flex items-center gap-0.5 pt-4">
        <Input
          type="number"
          min={min}
          max={max}
          step={step}
          value={value}
          onChange={(e) => onChange(Number(e.target.value))}
          className="w-16 text-xs px-1.5 h-7"
        />
        {unit && <span className="text-[10px] text-muted-foreground">{unit}</span>}
      </div>
    </div>
  );
}

export function KeyframeProperties({ keyframe, onChange }: Props) {
  if (!keyframe) {
    return (
      <Card className="h-full">
        <CardHeader>
          <CardTitle>Properties</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col items-center justify-center py-12 text-center">
          <MousePointerClick className="h-8 w-8 mx-auto mb-3 opacity-20" />
          <p className="text-xs text-muted-foreground">Select a keyframe on the timeline to edit its properties</p>
        </CardContent>
      </Card>
    );
  }

  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 (
    <Card className="h-full overflow-auto">
      <CardHeader>
        <CardTitle>
          Properties
          <span className="text-muted-foreground font-normal text-sm ml-2">{keyframe.offset}%</span>
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-5">

        {/* Transform */}
        <div className="space-y-3">
          <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">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-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Visual</p>

          <SliderRow
            label="Opacity"
            value={props.opacity ?? 1}
            min={0} max={1} step={0.01}
            onChange={(v) => setProp('opacity', v)}
          />

          {/* Background color */}
          <div className="space-y-1.5">
            <Label className="text-[10px] text-muted-foreground">Background Color</Label>
            <div className="flex items-center gap-2">
              <Input
                type="color"
                value={hasBg ? props.backgroundColor! : '#8b5cf6'}
                onChange={(e) => setProp('backgroundColor', e.target.value)}
                disabled={!hasBg}
                className={cn('w-9 h-9 p-1 shrink-0 cursor-pointer', !hasBg && 'opacity-30')}
              />
              <Input
                type="text"
                value={hasBg ? props.backgroundColor! : ''}
                onChange={(e) => setProp('backgroundColor', e.target.value)}
                disabled={!hasBg}
                placeholder="none"
                className="font-mono text-xs flex-1"
              />
              <Button
                size="xs"
                variant={hasBg ? 'default' : 'outline'}
                onClick={() => setProp('backgroundColor', hasBg ? 'none' : '#8b5cf6')}
                className="shrink-0"
              >
                {hasBg ? 'On' : 'Off'}
              </Button>
            </div>
          </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-[11px] font-semibold uppercase tracking-wider text-muted-foreground">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>

      </CardContent>
    </Card>
  );
}