app/components/AudioInput.tsx

'use client';

// AudioInput.tsx
import React, { useRef, useState } from "react";
import { readAudio } from './audioUtils'; // Import the updated utility

interface AudioInputProps {
  input: Blob | null;
  setInput: (v: Blob | null) => void;
  classify: (input: Float32Array) => void; // Still needs Float32Array
  ready: boolean | null;
}

export const AudioInput = ({ input, setInput, classify, ready }: AudioInputProps) => {
  const [recording, setRecording] = useState(false);
  const [audioUrl, setAudioUrl] = useState<string | null>(null);
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const chunks = useRef<Blob[]>([]);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleDrop = async (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    if (e.dataTransfer.files.length > 0) {
      const file = e.dataTransfer.files[0];
      if (file.type.startsWith("audio/")) {
        setInput(file);
        // Revoke previous URL to free memory
        if (audioUrl) URL.revokeObjectURL(audioUrl);
        setAudioUrl(URL.createObjectURL(file));
        try {
            const audioData = await readAudio(file); // Now decodes AND resamples to Float32Array PCM
            classify(audioData);
        } catch (error) {
             console.error("Error reading or processing audio file:", error);
             // Handle error, e.g., show a message to the user
        }
      }
    }
  };

  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      const file = e.target.files[0];
      if (file.type.startsWith("audio/")) {
        setInput(file);
         // Revoke previous URL to free memory
        if (audioUrl) URL.revokeObjectURL(audioUrl);
        setAudioUrl(URL.createObjectURL(file));
        try {
            const audioData = await readAudio(file); // Now decodes AND resamples to Float32Array PCM
            classify(audioData);
        } catch (error) {
            console.error("Error reading or processing audio file:", error);
            // Handle error
        }
      }
    }
  };

  const startRecording = async () => {
    try {
        setRecording(true);
        chunks.current = [];
        // Ensure audioUrl is cleared for new recording
         if (audioUrl) URL.revokeObjectURL(audioUrl);
         setAudioUrl(null);
         setInput(null); // Clear previous input blob

        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        const mediaRecorder = new window.MediaRecorder(stream);
        mediaRecorderRef.current = mediaRecorder;

        mediaRecorder.ondataavailable = (e) => {
          if (e.data.size > 0) {
            chunks.current.push(e.data);
          }
        };

        mediaRecorder.onstop = async () => {
          const blob = new Blob(chunks.current, { type: "audio/webm" }); // MediaRecorder outputs a Blob
          setInput(blob); // Set the Blob input if needed elsewhere
           // Revoke previous URL
          if (audioUrl) URL.revokeObjectURL(audioUrl);
          setAudioUrl(URL.createObjectURL(blob)); // Create URL for playback

          try {
            const audioData = await readAudio(blob); // Decode AND resample Blob to Float32Array PCM
            classify(audioData); // Pass the Float32Array PCM data
          } catch (error) {
             console.error("Error reading or processing recorded audio:", error);
             // Handle error
          } finally {
             // Always stop tracks after recording stops
             stream.getTracks().forEach(track => track.stop());
          }
        };

        mediaRecorder.start();
    } catch (error) {
        console.error("Error starting recording:", error);
        setRecording(false); // Ensure recording state is reset on error
        // Handle error, e.g., show a message to the user that mic access failed
    }
  };

  const stopRecording = async () => {
     if (!mediaRecorderRef.current) return;
     // The actual classification and setting of input/audioUrl happens in mediaRecorder.onstop
     mediaRecorderRef.current.stop();
     setRecording(false); // Set recording state to false immediately
  };

  // Added error handling and URL cleanup
  React.useEffect(() => {
      // Cleanup object URLs when component unmounts or audioUrl changes
      return () => {
          if (audioUrl) URL.revokeObjectURL(audioUrl);
      };
  }, [audioUrl]);


  return (
    <div className="flex flex-col gap-4 h-full">

      <label className="block text-gray-600 mb-2 text-sm font-medium">Upload or record audio</label>

      <div

        className={`flex-1 flex flex-col items-center justify-center border-2 border-dashed rounded-lg p-6 bg-gray-50 transition

          ${ready === false ? 'border-gray-200 text-gray-400 cursor-not-allowed' : 'border-gray-300 cursor-pointer hover:border-blue-400'}

        `}

        onDrop={handleDrop}

        onDragOver={e => e.preventDefault()}

        onClick={() => ready !== false && fileInputRef.current?.click()} // Prevent click if not ready

        style={{ minHeight: 120 }}

      >

        <input

          ref={fileInputRef}

          type="file"

          accept="audio/*"

          style={{ display: "none" }}

          onChange={handleFileChange}

          disabled={ready === false}

        />

        <span className="text-gray-500 text-center">

           { ready === false ? "Loading models..." : "Drag & drop audio file here or click to select" }

        </span>

      </div>

      <div className="flex items-center gap-4">

        {!recording ? (

          <button

            className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed"

            onClick={startRecording}

            disabled={ready === false} // Disable record button if not ready

          >

            Record

          </button>

        ) : (

          <button

            className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"

            onClick={stopRecording}

          >

            Stop

          </button>

        )}

        {/* Only show audio player if not recording and audioUrl exists */}

        {!recording && audioUrl && (

          <audio controls src={audioUrl} className="ml-4 flex-1">

            Your browser does not support the audio element.

          </audio>

        )}

         {ready === false && <span className="text-gray-600 ml-auto">Loading...</span>} {/* Optional loading indicator */}

      </div>

    </div>
  );
};