'use client';

import React, { useState } from 'react';
import {
  Fab,
  Tooltip,
  Snackbar,
  Alert,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Box,
  Typography,
  CircularProgress,
  Chip,
  IconButton,
} from '@mui/material';
import MicIcon from '@mui/icons-material/Mic';
import MicOffIcon from '@mui/icons-material/MicOff';
import { useRouter } from 'next/navigation';
import { useVoiceInput } from '@/hooks/useVoiceInput';

/**
 * Floating voice input button
 *
 * Always visible floating action button for quick voice commands.
 * Positioned in bottom-right corner for easy thumb access.
 */
export function VoiceFloatingButton() {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [isProcessing, setIsProcessing] = useState(false);
  const [classificationResult, setClassificationResult] = useState<any>(null);
  const [snackbar, setSnackbar] = useState<{
    open: boolean;
    message: string;
    severity: 'success' | 'info' | 'warning' | 'error';
  }>({
    open: false,
    message: '',
    severity: 'info',
  });

  const { isListening, isSupported, transcript, error, startListening, stopListening, reset } =
    useVoiceInput();

  // Auto-classify when we get a final transcript
  React.useEffect(() => {
    if (transcript && !isListening && !isProcessing && open) {
      classifyTranscript(transcript);
    }
  }, [transcript, isListening, isProcessing, open]);

  const handleOpen = () => {
    if (!isSupported) {
      setSnackbar({
        open: true,
        message: 'Voice input not supported in this browser. Please use Chrome, Edge, or Safari.',
        severity: 'error',
      });
      return;
    }
    setOpen(true);
    reset();
    setClassificationResult(null);
  };

  const handleClose = () => {
    if (isListening) {
      stopListening();
    }
    setOpen(false);
    reset();
    setClassificationResult(null);
  };

  const handleStartListening = () => {
    reset();
    setClassificationResult(null);
    startListening();
  };

  const handleStopListening = () => {
    stopListening();
  };

  const classifyTranscript = async (text: string) => {
    setIsProcessing(true);
    try {
      const response = await fetch('/api/voice/transcribe', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ text }),
      });

      const data = await response.json();

      if (response.ok && data.success) {
        setClassificationResult(data.classification);
        handleClassifiedIntent(data.classification);
      } else {
        setClassificationResult({
          error: true,
          message: data.message || 'Could not understand command',
        });
      }
    } catch (error) {
      console.error('[Voice] Classification error:', error);
      setClassificationResult({
        error: true,
        message: 'Failed to process command',
      });
    } finally {
      setIsProcessing(false);
    }
  };

  const handleClassifiedIntent = (result: any) => {
    if (result.error) {
      setSnackbar({
        open: true,
        message: result.message,
        severity: 'error',
      });
      return;
    }

    // Show success message
    setSnackbar({
      open: true,
      message: `Understood: ${result.intent} command`,
      severity: 'success',
    });

    // Auto-close dialog and navigate
    setTimeout(() => {
      handleClose();
      if (result.intent === 'feeding') {
        router.push('/track/feeding');
      } else if (result.intent === 'sleep') {
        router.push('/track/sleep');
      } else if (result.intent === 'diaper') {
        router.push('/track/diaper');
      }
    }, 1500);
  };

  const handleCloseSnackbar = () => {
    setSnackbar(prev => ({ ...prev, open: false }));
  };

  return (
    <>
      {/* Floating button positioned in bottom-right */}
      <Tooltip title="Voice Command (Beta)" placement="left">
        <Fab
          color="primary"
          aria-label="voice input"
          onClick={handleOpen}
          disabled={!isSupported}
          sx={{
            position: 'fixed',
            bottom: 24,
            right: 24,
            zIndex: 1000,
          }}
        >
          <MicIcon />
        </Fab>
      </Tooltip>

      {/* Voice input dialog */}
      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
        <DialogTitle>
          Voice Command
          {classificationResult && !classificationResult.error && (
            <Chip
              label={`${classificationResult.intent} (${classificationResult.confidenceLevel})`}
              color="success"
              size="small"
              sx={{ ml: 2 }}
            />
          )}
        </DialogTitle>

        <DialogContent>
          <Box sx={{ textAlign: 'center', py: 3 }}>
            {/* Microphone animation */}
            <Box sx={{ position: 'relative', display: 'inline-block', mb: 3 }}>
              <IconButton
                color={isListening ? 'error' : 'primary'}
                onClick={isListening ? handleStopListening : handleStartListening}
                sx={{
                  width: 80,
                  height: 80,
                  bgcolor: isListening ? 'error.light' : 'primary.light',
                  '&:hover': {
                    bgcolor: isListening ? 'error.main' : 'primary.main',
                  },
                  animation: isListening ? 'pulse 1.5s infinite' : 'none',
                  '@keyframes pulse': {
                    '0%': { transform: 'scale(1)', opacity: 1 },
                    '50%': { transform: 'scale(1.1)', opacity: 0.8 },
                    '100%': { transform: 'scale(1)', opacity: 1 },
                  },
                }}
              >
                {isListening ? <MicIcon sx={{ fontSize: 48 }} /> : <MicOffIcon sx={{ fontSize: 48 }} />}
              </IconButton>
            </Box>

            {/* Status text */}
            <Typography variant="body1" color="text.secondary" gutterBottom>
              {isListening ? 'Listening... Speak now' : 'Click the microphone to start'}
            </Typography>

            {/* Transcript */}
            {transcript && (
              <Box sx={{ mt: 3, p: 2, bgcolor: 'grey.100', borderRadius: 1 }}>
                <Typography variant="body2" color="text.secondary" gutterBottom>
                  Transcript:
                </Typography>
                <Typography variant="body1">{transcript}</Typography>
              </Box>
            )}

            {/* Processing indicator */}
            {isProcessing && (
              <Box sx={{ mt: 2, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <CircularProgress size={20} sx={{ mr: 1 }} />
                <Typography variant="body2" color="text.secondary">
                  Processing command...
                </Typography>
              </Box>
            )}

            {/* Classification result */}
            {classificationResult && !classificationResult.error && (
              <Alert severity="success" sx={{ mt: 2 }}>
                <Typography variant="body2" gutterBottom>
                  <strong>Understood:</strong> {classificationResult.intent}
                </Typography>
              </Alert>
            )}

            {/* Error messages */}
            {(error || (classificationResult && classificationResult.error)) && (
              <Alert severity="error" sx={{ mt: 2 }}>
                {error || classificationResult.message}
              </Alert>
            )}

            {/* Examples */}
            {!transcript && !isListening && (
              <Box sx={{ mt: 3, textAlign: 'left' }}>
                <Typography variant="caption" color="text.secondary" gutterBottom display="block">
                  Example commands:
                </Typography>
                <Typography variant="caption" color="text.secondary" component="div">
                  • "Fed baby 120 ml"
                  <br />
                  • "Nursed on left breast for 15 minutes"
                  <br />
                  • "Changed wet diaper"
                  <br />
                  • "Baby napped for 45 minutes"
                </Typography>
              </Box>
            )}
          </Box>
        </DialogContent>

        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
        </DialogActions>
      </Dialog>

      {/* Snackbar for feedback */}
      <Snackbar
        open={snackbar.open}
        autoHideDuration={3000}
        onClose={handleCloseSnackbar}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
      >
        <Alert onClose={handleCloseSnackbar} severity={snackbar.severity} sx={{ width: '100%' }}>
          {snackbar.message}
        </Alert>
      </Snackbar>
    </>
  );
}