audio-ui/components/markers/MarkerDialog.tsx

'use client';

import * as React from 'react';
import { Modal } from '@/components/ui/Modal';
import { Button } from '@/components/ui/Button';
import type { Marker, MarkerType } from '@/types/marker';

export interface MarkerDialogProps {
  open: boolean;
  onClose: () => void;
  onSave: (marker: Partial<Marker>) => void;
  marker?: Marker; // If editing existing marker
  defaultTime?: number; // Default time for new markers
  defaultType?: MarkerType;
}

const MARKER_COLORS = [
  '#ef4444', // red
  '#f97316', // orange
  '#eab308', // yellow
  '#22c55e', // green
  '#3b82f6', // blue
  '#a855f7', // purple
  '#ec4899', // pink
];

export function MarkerDialog({
  open,
  onClose,
  onSave,
  marker,
  defaultTime = 0,
  defaultType = 'point',
}: MarkerDialogProps) {
  const [name, setName] = React.useState(marker?.name || '');
  const [type, setType] = React.useState<MarkerType>(marker?.type || defaultType);
  const [time, setTime] = React.useState(marker?.time || defaultTime);
  const [endTime, setEndTime] = React.useState(marker?.endTime || defaultTime + 1);
  const [color, setColor] = React.useState(marker?.color || MARKER_COLORS[0]);
  const [description, setDescription] = React.useState(marker?.description || '');

  // Reset form when marker changes or dialog opens
  React.useEffect(() => {
    if (open) {
      setName(marker?.name || '');
      setType(marker?.type || defaultType);
      setTime(marker?.time || defaultTime);
      setEndTime(marker?.endTime || defaultTime + 1);
      setColor(marker?.color || MARKER_COLORS[0]);
      setDescription(marker?.description || '');
    }
  }, [open, marker, defaultTime, defaultType]);

  const handleSave = () => {
    const markerData: Partial<Marker> = {
      ...(marker?.id && { id: marker.id }),
      name: name || 'Untitled Marker',
      type,
      time,
      ...(type === 'region' && { endTime }),
      color,
      description,
    };
    onSave(markerData);
    onClose();
  };

  return (
    <Modal
      open={open}
      onClose={onClose}
      title={marker ? 'Edit Marker' : 'Add Marker'}
      description={marker ? 'Edit marker properties' : 'Add a new marker or region to the timeline'}
      size="md"
      footer={
        <>
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button onClick={handleSave}>{marker ? 'Save' : 'Add'}</Button>
        </>
      }
    >
      <div className="space-y-4">
        {/* Name */}
        <div className="space-y-2">
          <label htmlFor="name" className="text-sm font-medium text-foreground">
            Name
          </label>
          <input
            id="name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Marker name"
            className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
          />
        </div>

        {/* Type */}
        <div className="space-y-2">
          <label htmlFor="type" className="text-sm font-medium text-foreground">
            Type
          </label>
          <select
            id="type"
            value={type}
            onChange={(e) => setType(e.target.value as MarkerType)}
            className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
          >
            <option value="point">Point Marker</option>
            <option value="region">Region</option>
          </select>
        </div>

        {/* Time */}
        <div className="space-y-2">
          <label htmlFor="time" className="text-sm font-medium text-foreground">
            {type === 'region' ? 'Start Time' : 'Time'} (seconds)
          </label>
          <input
            id="time"
            type="number"
            step="0.1"
            min="0"
            value={time}
            onChange={(e) => setTime(parseFloat(e.target.value))}
            className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
          />
        </div>

        {/* End Time (for regions) */}
        {type === 'region' && (
          <div className="space-y-2">
            <label htmlFor="endTime" className="text-sm font-medium text-foreground">
              End Time (seconds)
            </label>
            <input
              id="endTime"
              type="number"
              step="0.1"
              min={time}
              value={endTime}
              onChange={(e) => setEndTime(parseFloat(e.target.value))}
              className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
            />
          </div>
        )}

        {/* Color */}
        <div className="space-y-2">
          <label className="text-sm font-medium text-foreground">
            Color
          </label>
          <div className="flex gap-2">
            {MARKER_COLORS.map((c) => (
              <button
                key={c}
                type="button"
                className="w-8 h-8 rounded border-2 transition-all hover:scale-110"
                style={{
                  backgroundColor: c,
                  borderColor: color === c ? 'white' : 'transparent',
                }}
                onClick={() => setColor(c)}
              />
            ))}
          </div>
        </div>

        {/* Description */}
        <div className="space-y-2">
          <label htmlFor="description" className="text-sm font-medium text-foreground">
            Description (optional)
          </label>
          <input
            id="description"
            type="text"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Optional description"
            className="flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background"
          />
        </div>
      </div>
    </Modal>
  );
}