import { useState } from 'react';

interface AddNoteFormProps {
  currentTimestamp: number;
  isPaused: boolean;
  onAddNote: (content: string, timestamp: number) => void;
  isSubmitting?: boolean;
}

function formatTimestamp(seconds: number): string {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = Math.floor(seconds % 60);

  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
  return `${minutes}:${secs.toString().padStart(2, '0')}`;
}

export function AddNoteForm({
  currentTimestamp,
  isPaused,
  onAddNote,
  isSubmitting = false,
}: AddNoteFormProps) {
  const [content, setContent] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (content.trim() && isPaused) {
      onAddNote(content.trim(), currentTimestamp);
      setContent('');
    }
  };

  const canSubmit = content.trim() && isPaused && !isSubmitting;

  return (
    <form onSubmit={handleSubmit} className="space-y-3">
      <div>
        <div className="flex items-center justify-between mb-1">
          <label htmlFor="note-content" className="text-sm font-medium text-gray-700">
            Add Note
          </label>
          <span className="text-xs text-gray-500 font-mono">
            @ {formatTimestamp(currentTimestamp)}
          </span>
        </div>
        <textarea
          id="note-content"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder={isPaused ? "Add a note at this timestamp..." : "Pause video to add a note..."}
          className="w-full border border-gray-300 rounded-md p-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none"
          rows={3}
          disabled={!isPaused || isSubmitting}
        />
      </div>

      <div className="flex items-center justify-between">
        {!isPaused && (
          <p className="text-xs text-amber-600 flex items-center">
            <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            Pause video to add note
          </p>
        )}
        {isPaused && <div />}

        <button
          type="submit"
          disabled={!canSubmit}
          className={`
            px-3 py-1.5 text-sm font-medium rounded-md transition-colors
            ${canSubmit
              ? 'bg-indigo-600 text-white hover:bg-indigo-700'
              : 'bg-gray-200 text-gray-400 cursor-not-allowed'
            }
          `}
        >
          {isSubmitting ? (
            <span className="flex items-center">
              <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              Adding...
            </span>
          ) : (
            'Add Note'
          )}
        </button>
      </div>
    </form>
  );
}
