'use client';

import React, { useRef, useState } from 'react';

interface SimpleVideoAudioUploaderProps {
  onAudioExtracted: (audioFile: File, originalVideoFile: File) => void;
  onFileSelected?: () => void;
}

const ACCEPTED_TYPES = [
  'video/mp4',
  'video/quicktime', // .mov
  'audio/mp4',
  'audio/m4a',
  'audio/mp3',
];

export default function SimpleVideoAudioUploader({
  onAudioExtracted,
  onFileSelected,
  fileSelected = false,
}: SimpleVideoAudioUploaderProps & { fileSelected?: boolean }) {
  const [status, setStatus] = useState<string>('');
  const [loading, setLoading] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  console.log(status, loading);

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (onFileSelected) onFileSelected();
    if (!ACCEPTED_TYPES.includes(file.type)) {
      setStatus('Unsupported file type. Please upload mp4, mov, or m4a.');
      return;
    }
    setStatus('Extracting audio...');
    setLoading(true);
    try {
      if (file.type.startsWith('audio/')) {
        setStatus('Audio file detected.');
        setLoading(false);
        onAudioExtracted(file, file);
        return;
      }
      const videoURL = URL.createObjectURL(file);
      const audio = document.createElement('audio');
      audio.src = videoURL;
      try {
        await audio.play();
        audio.pause();
      } catch {}
      const audioWithCapture = audio as any;
      if (typeof audioWithCapture.captureStream === 'function') {
        const stream = audioWithCapture.captureStream();
        const recorder = new MediaRecorder(stream);
        const chunks: Blob[] = [];
        recorder.ondataavailable = (event) => {
          if (event.data.size > 0) {
            chunks.push(event.data);
          }
        };
        recorder.onstop = () => {
          const audioBlob = new Blob(chunks, { type: 'audio/mp3' });
          const audioFile = new File(
            [audioBlob],
            file.name.replace(/\.[^.]+$/, '.mp3'),
            {
              type: 'audio/mp3',
            }
          );
          setStatus('Audio extracted!');
          setLoading(false);
          onAudioExtracted(audioFile, file);
        };
        recorder.start();
        audio.currentTime = 0;
        audio.play();
        setTimeout(
          () => {
            recorder.stop();
            audio.pause();
            URL.revokeObjectURL(videoURL);
          },
          Math.min(10000, file.size / 1000)
        );
        return;
      } else {
        setStatus(
          'Audio extraction from video is not supported in this browser.'
        );
        setLoading(false);
        return;
      }
    } catch (err) {
      setStatus('Failed to extract audio.');
      setLoading(false);
    }
  };

  return (
    <div className='flex w-full flex-col items-center gap-4'>
      <input
        ref={fileInputRef}
        type='file'
        accept='.mp4,.mov,.m4a,video/mp4,video/quicktime,audio/mp4,audio/m4a,audio/mp3'
        onChange={handleFileChange}
        className='hidden'
      />
      {!fileSelected && (
        <button
          onClick={() => fileInputRef.current?.click()}
          className='rounded-full border border-primary bg-transparent px-6 py-3 font-medium text-primary hover:bg-primary hover:text-black'
        >
          Choose file
        </button>
      )}
    </div>
  );
}