import React, { useState } from 'react';
import { FaMicrophone, FaPlay, FaPause, FaPaperPlane } from 'react-icons/fa';
import { Card } from './shared/Card';

interface Message {
  id: string;
  text: string;
  sender: 'user' | 'bot';
  audioUrl?: string;
  timestamp: Date;
}

export function UserDemo() {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: '1',
      text: 'Hello! I can help you with your legal questions. What would you like to know?',
      sender: 'bot',
      timestamp: new Date(),
    },
  ]);
  const [input, setInput] = useState('');
  const [isRecording, setIsRecording] = useState(false);
  const [currentAudio, setCurrentAudio] = useState<HTMLAudioElement | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const handleSend = () => {
    if (!input.trim()) return;

    const userMessage: Message = {
      id: Date.now().toString(),
      text: input,
      sender: 'user',
      timestamp: new Date(),
    };

    setMessages((prev) => [...prev, userMessage]);
    setInput('');

    // Simulate bot response
    setTimeout(() => {
      const botMessage: Message = {
        id: (Date.now() + 1).toString(),
        text: 'I understand your concern. Let me help you with that...',
        sender: 'bot',
        timestamp: new Date(),
      };
      setMessages((prev) => [...prev, botMessage]);
    }, 1000);
  };

  const toggleRecording = () => {
    setIsRecording(!isRecording);
    if (!isRecording) {
      // Simulate starting recording
      setTimeout(() => {
        setIsRecording(false);
        const message: Message = {
          id: Date.now().toString(),
          text: 'Voice message recorded',
          sender: 'user',
          audioUrl: 'https://example.com/audio.mp3',
          timestamp: new Date(),
        };
        setMessages((prev) => [...prev, message]);
      }, 3000);
    }
  };

  const toggleAudio = (audioUrl: string) => {
    if (currentAudio) {
      currentAudio.pause();
      setIsPlaying(false);
    }

    if (!isPlaying || currentAudio?.src !== audioUrl) {
      const audio = new Audio(audioUrl);
      audio.addEventListener('ended', () => setIsPlaying(false));
      audio.play();
      setCurrentAudio(audio);
      setIsPlaying(true);
    }
  };

  return (
    <div className="flex h-[600px] flex-col">
      <div className="flex-1 space-y-4 overflow-y-auto p-4">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`flex ${
              message.sender === 'user' ? 'justify-end' : 'justify-start'
            }`}
          >
            <Card
              className={`max-w-[80%] ${
                message.sender === 'user'
                  ? 'bg-blue-500 text-white'
                  : 'bg-gray-100'
              }`}
            >
              <p>{message.text}</p>
              {message.audioUrl && (
                <button
                  onClick={() => toggleAudio(message.audioUrl!)}
                  className="mt-2 flex items-center gap-2 text-sm"
                >
                  {isPlaying && currentAudio?.src === message.audioUrl ? (
                    <FaPause />
                  ) : (
                    <FaPlay />
                  )}
                  {isPlaying && currentAudio?.src === message.audioUrl
                    ? 'Pause Audio'
                    : 'Play Audio'}
                </button>
              )}
              <p className="mt-1 text-xs opacity-75">
                {message.timestamp.toLocaleTimeString()}
              </p>
            </Card>
          </div>
        ))}
      </div>

      <div className="border-t p-4">
        <div className="flex items-center gap-2">
          <button
            onClick={toggleRecording}
            className={`rounded-full p-2 ${
              isRecording
                ? 'animate-pulse bg-red-500 text-white'
                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            <FaMicrophone />
          </button>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="Type your message..."
            className="flex-1 rounded-lg border border-gray-300 px-4 py-2 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-200"
            onKeyPress={(e) => e.key === 'Enter' && handleSend()}
          />
          <button
            onClick={handleSend}
            disabled={!input.trim()}
            className="rounded-lg bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600 disabled:opacity-50"
          >
            <FaPaperPlane />
          </button>
        </div>
      </div>
    </div>
  );
}