import React, { useState, useCallback, useRef, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { Waveform } from '../components/Waveform'; // Import Waveform
import { useRecording, RecordingStatus } from '../hooks/useRecording'; // Import the hook and type
import '@/styles/globals.css';

const NUM_WAVEFORM_BARS = 8; // Fewer bars for a smaller button
const DEBOUNCE_DELAY = 100; // milliseconds

const FloatingButtonApp: React.FC = () => {
  const [isHovered, setIsHovered] = useState(false);
  const fabRef = useRef<HTMLButtonElement>(null);
  const leaveTimeoutRef = useRef<NodeJS.Timeout | null>(null); // Ref for debounce timeout

  const handleAudioChunk = useCallback(async (audioChunk: ArrayBuffer, isFinalChunk: boolean) => {
    try {
      // Send the audio chunk regardless of whether it's final or not
      await window.electronAPI.sendAudioChunk(audioChunk, isFinalChunk);
      console.log(`FAB: Sent audio chunk. isFinalChunk: ${isFinalChunk}`);

      if (isFinalChunk) {
        console.log(
          'FAB: This was the final chunk. Informing main process to finalize transcription.'
        );
        // You might want to add a specific IPC call here if the main process needs an explicit signal
        // to finalize transcription, e.g., window.electronAPI.finalizeTranscription();
        // For now, we assume sendAudioChunk is enough and the main process handles the stream end.
      }
    } catch (error) {
      console.error('FAB: Error sending audio chunk:', error);
    }
  }, []);

  const { recordingStatus, startRecording, stopRecording, voiceDetected } = useRecording({
    onAudioChunk: handleAudioChunk,
    onRecordingStartCallback: async () => await window.electronAPI.onRecordingStarting(),
    onRecordingStopCallback: async () => await window.electronAPI.onRecordingStopping(),
    // Optionally, set chunkDurationMs here if needed, e.g., chunkDurationMs: 250
  });
  const isRecording = recordingStatus === 'recording' || recordingStatus === 'starting';
  const isAwaitingFinalChunk = recordingStatus === 'stopping';
  console.log('FAB: recordingStatus:', recordingStatus);

  useEffect(() => {
    const cleanup = window.electronAPI.onRecordingStateChanged((newState: boolean) => {
      console.log('FAB: Received new recording state:', newState);
      if (newState) {
        startRecording();
      } else {
        stopRecording();
      }
    });
    return cleanup; // Cleanup the listener when the component unmounts
  }, [startRecording, stopRecording]);

  // This handler is for the button click.
  // It now uses the toggleRecording from the hook.
  const handleButtonClickToggleRecording = () => {
    console.log('FAB: Invoking toggleRecording from hook.');
    // The hook internally manages starting/stopping MediaRecorder and VAD.
    // The hook also listens for global state changes from the main process.
  };

  // Function to send the FAB's size to Electron
  const updateWindowSizeToFab = () => {
    if (isHovered || isRecording) {
      //window.electronAPI.resizeWindow(96, 32);
    } else {
      //window.electronAPI.resizeWindow(48, 16);
    }
  };

  // Update window size when recording or hover state changes
  useEffect(() => {
    console.log('is hovered', isHovered);
    updateWindowSizeToFab();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isRecording, isHovered]);

  // Debounced mouse leave handler
  const handleMouseLeave = () => {
    if (leaveTimeoutRef.current) {
      clearTimeout(leaveTimeoutRef.current);
    }
    leaveTimeoutRef.current = setTimeout(() => {
      setIsHovered(false);
    }, DEBOUNCE_DELAY);
  };

  // Mouse enter handler - clears any pending leave timeout
  const handleMouseEnter = () => {
    if (leaveTimeoutRef.current) {
      clearTimeout(leaveTimeoutRef.current);
      leaveTimeoutRef.current = null;
    }
    setIsHovered(true);
  };

  // Clear timeout on unmount
  useEffect(() => {
    return () => {
      if (leaveTimeoutRef.current) {
        clearTimeout(leaveTimeoutRef.current);
      }
    };
  }, []);

  const expanded =
    recordingStatus === 'recording' ||
    recordingStatus === 'starting' ||
    recordingStatus === 'stopping' ||
    isHovered;

  return (
    <button
      role="button"
      ref={fabRef}
      // onClick={handleButtonClickToggleRecording} // Removed onClick to disable manual toggle
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className={`
        transition-all duration-200 ease-in-out
        ${expanded ? 'h-[32px] w-[96px]' : 'h-[16px] w-[48px]'}
        rounded-full border-2 border-text-muted bg-black/10 border-muted-foreground
        mb-2
      `}
    >
      {expanded && (
        <div className="flex gap-[2px] items-end h-[40%] justify-center w-full">
          {Array.from({ length: NUM_WAVEFORM_BARS }).map((_, index) => (
            <Waveform
              key={index}
              index={index}
              isRecording={recordingStatus === 'recording' || recordingStatus === 'starting'}
              voiceDetected={voiceDetected} // Use local state for VAD
              baseHeight={100} // Percentage of its container (the 40% height div)
              silentHeight={20} // Percentage
            />
          ))}
        </div>
      )}
    </button>
  );
};

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<FloatingButtonApp />);
} else {
  console.error('FloatingButton: Root element not found in floating-button.html');
}