import { memo, useState, useEffect } from 'react';
import { Button } from '../ui/button';
import { Slider } from '../ui/slider';
import { Input } from '../ui/input';
import { cn } from '@/shared/utils/cn';
import type { TimelineClip } from './types';
import { formatTimecodeMs, MS_PER_SECOND } from '@/shared/utils';
import { MIN_CLIP_DURATION } from './constants';
import styles from '@/components/Timeline/Timeline.module.less';

interface ClipPropertiesPanelProps {
  clip: TimelineClip;
  onUpdate: (clipId: string, data: Partial<TimelineClip>) => void;
  onClose: () => void;
  onDelete: (clipId: string) => void;
}

export const ClipPropertiesPanel = memo<ClipPropertiesPanelProps>(({ clip, onUpdate, onClose, onDelete }) => {
  const [startSec, setStartSec] = useState(clip.startMs / MS_PER_SECOND);
  const [endSec, setEndSec] = useState(clip.endMs / MS_PER_SECOND);
  const [volume, setVolume] = useState(100);

  useEffect(() => {
    setStartSec(clip.startMs / MS_PER_SECOND);
    setEndSec(clip.endMs / MS_PER_SECOND);
  }, [clip]);

  const handleApply = () => {
    const newStartMs = startSec * MS_PER_SECOND;
    const newEndMs = endSec * MS_PER_SECOND;
    if (newEndMs > newStartMs + MIN_CLIP_DURATION) {
      onUpdate(clip.id, { startMs: newStartMs, endMs: newEndMs });
    }
    onClose();
  };

  return (
    <div className={styles.propertiesPanel}>
      <div className={styles.propertiesHeader}>
        <span>片段属性</span>
        <Button size="sm" variant="ghost" onClick={onClose}>×</Button>
      </div>
      <div className={styles.propertiesBody}>
        <div className={styles.propRow}>
          <label>名称</label>
          <span className={styles.propValue}>{clip.name}</span>
        </div>
        <div className={styles.propRow}>
          <label>开始 (s)</label>
          <Input type="number" value={startSec} onChange={(e) => setStartSec(parseFloat(e.target.value) || 0)} step={0.1} min={0} className="w-20" />
          <label>结束 (s)</label>
          <Input type="number" value={endSec} onChange={(e) => setEndSec(parseFloat(e.target.value) || 1)} step={0.1} min={0} className="w-20" />
        </div>
        <div className={styles.propRow}>
          <label>音量</label>
          <Slider min={0} max={200} defaultValue={[volume]} onValueChange={(v) => setVolume(Array.isArray(v) ? v[0] : v)} className="w-24" />
        </div>
        <div className={styles.propRow}>
          <label>时长</label>
          <span className={styles.propTime}>{formatTimecodeMs(clip.endMs - clip.startMs)}</span>
          <label>源</label>
          <span className={styles.propTime}>{formatTimecodeMs(clip.sourceEndMs - clip.sourceStartMs)}</span>
        </div>
      </div>
      <div className={cn(styles.propertiesFooter, 'flex items-center justify-end gap-2')}>
        <Button size="sm" variant="destructive" onClick={() => { onDelete(clip.id); onClose(); }}>
          删除片段
        </Button>
        <div className="flex items-center gap-2">
          <Button size="sm" onClick={onClose}>取消</Button>
          <Button size="sm" className="bg-[--accent-primary] hover:bg-[--accent-primary-hover] text-white" onClick={handleApply}>应用</Button>
        </div>
      </div>
    </div>
  );
});
ClipPropertiesPanel.displayName = 'ClipPropertiesPanel';
