import { useState, useEffect } from "react";

import { CardContent } from "@/components/ui/card";

import { Input } from "@/components/ui/input";

import { Button } from "@/components/ui/button";

import { Send } from "lucide-react";

import { motion } from "framer-motion";

export default function ChatApp() {

  const [messages, setMessages] = useState([]);

  const [input, setInput] = useState("");

  const [name, setName] = useState("");

  const [enteredChat, setEnteredChat] = useState(false);

  const [loading, setLoading] = useState(false);

  const [showLoadingScreen, setShowLoadingScreen] = useState(false);

  const messageSound = new Audio("/message-sound.mp3");

  const sendMessage = () => {

    if (input.trim() !== "") {

      setLoading(true);

      setTimeout(() => {

        const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });

        setMessages([...messages, { text: input, sender: name, time: timestamp }]);

        setInput("");

        setLoading(false);

        messageSound.play();

      }, 500);

    }

  };

  const handleEnterChat = () => {

    setShowLoadingScreen(true);

    setTimeout(() => {

      setShowLoadingScreen(false);

      setEnteredChat(true);

    }, 5000);

  };

  if (showLoadingScreen) {

    return (

      <div className="flex flex-col items-center justify-center h-screen bg-black text-white relative">

        <div className="absolute top-4 left-4 text-white text-2xl font-bold">-3x7</div>

        <div className="grid grid-cols-2 gap-1 animate-spin w-10 h-10 flex items-center justify-center">

          <div className="w-4 h-4 bg-white"></div>

          <div className="w-4 h-4 bg-white"></div>

          <div className="w-4 h-4 bg-white"></div>

          <div className="w-4 h-4 bg-white"></div>

        </div>

      </div>

    );

  }

  if (!enteredChat) {

    return (

      <div className="flex flex-col items-center justify-center h-screen bg-black text-white relative">

        <div className="absolute top-4 left-4 text-white text-2xl font-bold">-3x7</div>

        <h1 className="text-2xl mb-4">Enter Your Name</h1>

        <Input

          value={name}

          onChange={(e) => setName(e.target.value)}

          placeholder="Your Name"

          className="mb-4 p-2 bg-gray-700 text-white border border-red-600"

        />

        <Button onClick={handleEnterChat} className="bg-red-600 text-white">

          Enter Chat

        </Button>

      </div>

    );

  }

  return (

    <div className="relative flex flex-col h-screen bg-black p-4">

      <div className="absolute top-4 left-4 text-white text-2xl font-bold">-3x7</div>

      <CardContent className="flex-1 p-4 flex flex-col space-y-2 overflow-y-auto">

        {messages.map((msg, index) => (

          <motion.div

            key={index}

            initial={{ opacity: 0, y: 10 }}

            animate={{ opacity: 1, y: 0 }}

            transition={{ duration: 0.3 }}

            className={`relative p-3 rounded-lg max-w-xs text-white ${

              msg.sender === name 

                ? "bg-red-600 self-end rounded-br-none" 

                : "bg-gray-500 self-start rounded-bl-none"

            }`}

          >

            <span className="block text-xs text-gray-300 mb-1">{msg.sender}</span>

            <p>{msg.text}</p>

            <span className="block text-xs text-gray-300 mt-1 text-right">{msg.time}</span>

            <span className={`absolute bottom-0 w-0 h-0 border-t-8 ${

              msg.sender === name 

                ? "right-0 border-l-8 border-t-transparent border-l-red-600" 

                : "left-0 border-r-8 border-t-transparent border-r-gray-500"

            }`}></span>

          </motion.div>

        ))}

      </CardContent>

      <div className="p-4 flex items-center space-x-2 border-t border-red-600 bg-gray-700">

        <Input

          value={input}

          onChange={(e) => setInput(e.target.value)}

          placeholder="Type a message..."

          className="flex-1 bg-gray-600 text-white border border-red-600"

        />

        <Button onClick={sendMessage} className="bg-red-600 text-white" disabled={loading}>

          {loading ? "..." : <Send size={18} />}

        </Button>

      </div>

    </div>

  );

}