import React, { useState } from 'react';
import { secondsToTimecode } from '../utils/timecode';

interface Props {
  currentTime: number;
  onAdd: (type: 'subtitle' | 'memo', text: string, timeStart: number, timeEnd: number) => void;
  onClose: () => void;
}

export default function AddAnnotationModal({ currentTime, onAdd, onClose }: Props) {
  const [type, setType] = useState<'subtitle' | 'memo'>('memo');
  const [text, setText] = useState('');
  const [duration, setDuration] = useState(3);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!text.trim()) return;
    onAdd(type, text.trim(), currentTime, currentTime + duration);
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
      <div className="bg-gray-900 rounded-lg p-6 w-96 shadow-xl">
        <h2 className="text-lg font-semibold mb-4">주석 추가</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm text-gray-400 mb-1">시작 시간</label>
            <div className="text-white font-mono">{secondsToTimecode(currentTime)}</div>
          </div>
          <div>
            <label className="block text-sm text-gray-400 mb-1">유형</label>
            <select
              value={type}
              onChange={(e) => setType(e.target.value as 'subtitle' | 'memo')}
              className="w-full bg-gray-800 text-white rounded px-3 py-2"
            >
              <option value="subtitle">자막</option>
              <option value="memo">메모</option>
            </select>
          </div>
          <div>
            <label className="block text-sm text-gray-400 mb-1">내용</label>
            <textarea
              value={text}
              onChange={(e) => setText(e.target.value)}
              rows={3}
              className="w-full bg-gray-800 text-white rounded px-3 py-2 resize-none"
              placeholder="주석 내용을 입력하세요"
              autoFocus
            />
          </div>
          <div>
            <label className="block text-sm text-gray-400 mb-1">표시 시간 (초)</label>
            <input
              type="number"
              value={duration}
              onChange={(e) => setDuration(Number(e.target.value))}
              min={1}
              max={300}
              className="w-full bg-gray-800 text-white rounded px-3 py-2"
            />
          </div>
          <div className="flex gap-2 justify-end">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-gray-400 hover:text-white"
            >
              취소
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white"
            >
              추가
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
