"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useState } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import { Search } from "lucide-react";

const messages = [
  { name: "Miles Esther", initials: "ME", time: "06.00" },
  { name: "Flores Juanita", initials: "FJ", time: "06.00" },
  { name: "Henry Arthur", initials: "HA", time: "06.00" },
  { name: "Polres Jakarta Selatan", initials: "PJ", time: "06.00" },
];

const WebChatPage = () => {
  const [selectedChat, setSelectedChat] = useState<any>(null);
  return (
    <div>
      <SiteBreadcrumb />
      <div className="space-y-4">
        {!selectedChat ? (
          // Tampilan daftar pesan
          <>
            <div className="flex justify-between py-3 border rounded-md px-3">
              <p className="text-lg font-semibold">Web Chat</p>
            </div>
            <div className="flex flex-row justify-start rounded-lg ">
              <div className="flex flex-row items-center">
                <Input placeholder="Cari..." className=" w-[200px] mr-3" />
                <Dialog>
                  <DialogTrigger asChild>
                    <Button variant="default" size="md" color="primary">
                      Add
                    </Button>
                  </DialogTrigger>
                  <DialogContent className="max-w-[350px] bg-black text-white rounded-lg p-4">
                    <DialogHeader>
                      <DialogTitle className="text-lg font-bold text-white">
                        New Chat
                      </DialogTitle>
                    </DialogHeader>
                    <div className="relative">
                      <Search
                        className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                        size={16}
                      />
                      <Input
                        placeholder="Search here..."
                        className="w-full pl-10  text-white placeholder-gray-400 border-none rounded-md focus:ring-0"
                      />
                    </div>
                    <div className="mt-4">
                      <p className="text-sm font-semibold">+ Group Chat</p>
                    </div>
                    <div className="mt-4">
                      <p className="text-sm text-gray-400">
                        Frequently contacted
                      </p>
                      <div className="mt-2 space-y-2">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 flex items-center justify-center bg-white text-black font-bold rounded-full">
                            ME
                          </div>
                          <span className="text-sm font-medium">
                            Miles Esther
                          </span>
                        </div>
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 flex items-center justify-center bg-white text-black font-bold rounded-full">
                            HA
                          </div>
                          <span className="text-sm font-medium">
                            Henry Arthur
                          </span>
                        </div>
                      </div>
                    </div>
                  </DialogContent>
                </Dialog>
              </div>
            </div>
            <Card>
              <CardContent className="p-4 bg-gray-100 rounded-lg">
                <div className="space-y-4">
                  {messages.map((msg: any, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between p-4 bg-white rounded-lg shadow cursor-pointer hover:bg-gray-200"
                      onClick={() => setSelectedChat(msg)}
                    >
                      <div className="flex items-center gap-4">
                        <div className="w-12 h-12 flex items-center justify-center bg-black text-white rounded-full text-lg font-bold">
                          {msg.initials}
                        </div>
                        <div>
                          <p className="font-bold text-lg">{msg.name}</p>
                          <p className="text-gray-600 text-sm">
                            ✅ Hallo, untuk patroli hari ini sudah bisa di akses
                            di daily tasks, silahkan anda periksa
                          </p>
                        </div>
                      </div>
                      <p className="text-gray-500 text-sm">{msg.time}</p>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </>
        ) : (
          // Tampilan chat
          <div>
            <div className="flex justify-between py-3 border rounded-md px-3 my-3">
              <p className="text-lg font-semibold">Web Chat</p>
            </div>
            <Card className="h-[100vh]">
              <CardContent className="p-0 flex flex-col h-full">
                {/* Header Chat */}
                <div className="flex items-center bg-black text-white p-4">
                  <button
                    className="mr-4 text-white text-xl"
                    onClick={() => setSelectedChat(null)}
                  >
                    ←
                  </button>
                  <div className="flex items-center gap-4">
                    <div className="w-10 h-10 flex items-center justify-center bg-white text-black rounded-full text-lg font-bold">
                      {selectedChat.initials}
                    </div>
                    <p className="font-bold text-lg">{selectedChat.name}</p>
                  </div>
                </div>

                {/* Body Chat */}
                <div className="flex-1 bg-gray-300 p-4 flex flex-col justify-end">
                  <p className="text-center text-gray-500 mb-4">Today</p>

                  {/* Pesan masuk */}
                  <div className="flex items-start mb-4">
                    <div className="bg-white p-3 rounded-lg shadow max-w-xs">
                      Hallo, untuk patroli hari ini sudah bisa di akses di daily
                      tasks, silahkan anda periksa
                    </div>
                    <p className="text-gray-500 text-xs ml-2">06.00</p>
                  </div>

                  {/* Pesan keluar */}
                  <div className="flex items-end justify-end mb-4">
                    <p className="text-gray-500 text-xs mr-2">06.00</p>
                    <div className="bg-blue-500 text-white p-3 rounded-lg shadow max-w-xs">
                      Hallo, bisakah mengirimkan rute patroli untuk hari ini?
                    </div>
                  </div>

                  {/* Pesan keluar lainnya */}
                  <div className="flex items-end justify-end mb-4">
                    <p className="text-gray-500 text-xs mr-2">06.00</p>
                    <div className="bg-blue-500 text-white p-3 rounded-lg shadow max-w-xs">
                      Terima kasih banyak
                    </div>
                  </div>
                </div>

                {/* Input Chat */}
                <div className="flex items-center p-4 bg-black">
                  <Button className="bg-white text-black p-2 rounded-full mr-2">
                    +
                  </Button>
                  <Input
                    placeholder="Tulis pesan..."
                    className="flex-1 rounded-lg"
                  />
                  <Button className="ml-2 bg-white text-black p-2 rounded-full">
                    🎤
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        )}
      </div>
    </div>
  );
};

export default WebChatPage;