"use client";

import React, { useState } from "react";

type ClientWorkspaceChatFeatureProps = {
  app: string;
};

type ContactItem = {
  id: string;
  name: string;
  preview: string;
  time: string;
  unreadCount?: number;
  isNew?: boolean;
  avatarClassName: string;
};

type ChatMessage = {
  id: string;
  text: string;
  time: string;
  side: "left" | "right";
};

type ConversationUser = {
  id: string;
  name: string;
  activity: string;
  time: string;
  avatarClassName: string;
};

const CONTACTS: ContactItem[] = [
  {
    id: "c-1",
    name: "Jane Doe",
    preview: "Hi, i want make enquiries about yo...",
    time: "12:55 am",
    unreadCount: 2,
    isNew: true,
    avatarClassName: "bg-gradient-to-br from-sky-300 to-sky-700",
  },
  {
    id: "c-2",
    name: "Janet Adebayo",
    preview: "Hi, i want make enquiries about yo...",
    time: "12:55 am",
    isNew: true,
    avatarClassName: "bg-gradient-to-br from-amber-200 to-orange-600",
  },
  {
    id: "c-3",
    name: "Kunle Adekunle",
    preview: "Hi, i want make enquiries about yo...",
    time: "12:55 am",
    isNew: true,
    avatarClassName: "bg-gradient-to-br from-slate-400 to-slate-700",
  },
  {
    id: "c-4",
    name: "Jane Doe",
    preview: "Hi, i want make enquiries about yo...",
    time: "12:55 am",
    unreadCount: 2,
    avatarClassName: "bg-gradient-to-br from-yellow-200 to-yellow-700",
  },
  {
    id: "c-5",
    name: "Janet Adebayo",
    preview: "Hi, i want make enquiries about yo...",
    time: "12:55 am",
    avatarClassName: "bg-gradient-to-br from-zinc-100 to-zinc-500",
  },
  {
    id: "c-6",
    name: "Kunle Adekunle",
    preview: "Hi, i want make enquiries about yo...",
    time: "12:55 am",
    avatarClassName: "bg-gradient-to-br from-lime-300 to-lime-700",
  },
  {
    id: "c-7",
    name: "Jane Doe",
    preview: "Hi, i want make enquiries about yo...",
    time: "12:55 am",
    avatarClassName: "bg-gradient-to-br from-slate-200 to-slate-700",
  },
  {
    id: "c-8",
    name: "Janet Adebayo",
    preview: "Hi, i want make enquiries about yo...",
    time: "12:55 am",
    avatarClassName: "bg-gradient-to-br from-orange-200 to-orange-700",
  },
];

const CHAT_MESSAGES: ChatMessage[] = [
  {
    id: "m-1",
    text: "Hello, I want to make enquiries about your product",
    time: "12:55 am",
    side: "left",
  },
  {
    id: "m-2",
    text: "Hello Janet, thank you for reaching out",
    time: "12:57 am",
    side: "right",
  },
  {
    id: "m-3",
    text: "What do you need to know?",
    time: "12:57 am",
    side: "right",
  },
  {
    id: "m-4",
    text: "I want to know if the price is negotiable, i need about 2 Units",
    time: "12:55 am",
    side: "left",
  },
];

const NEW_CONVERSATION_USERS: ConversationUser[] = [
  { id: "u-1", name: "Jane Doe", activity: "Last Activity", time: "12 Aug 2022 - 12:55 am", avatarClassName: "bg-gradient-to-br from-sky-300 to-sky-700" },
  { id: "u-2", name: "Mick Dirg", activity: "Last Activity", time: "12 Aug 2022 - 12:55 am", avatarClassName: "bg-gradient-to-br from-yellow-200 to-orange-600" },
  { id: "u-3", name: "Nick John", activity: "Last Activity", time: "12 Aug 2022 - 12:55 am", avatarClassName: "bg-gradient-to-br from-stone-300 to-stone-700" },
  { id: "u-4", name: "Jane Doe", activity: "Last Activity", time: "12 Aug 2022 - 12:55 am", avatarClassName: "bg-gradient-to-br from-cyan-300 to-cyan-700" },
  { id: "u-5", name: "Macewem", activity: "Last Activity", time: "12 Aug 2022 - 12:55 am", avatarClassName: "bg-gradient-to-br from-red-300 to-red-700" },
  { id: "u-6", name: "Jane John", activity: "Last Activity", time: "12 Aug 2022 - 12:55 am", avatarClassName: "bg-gradient-to-br from-amber-100 to-amber-700" },
  { id: "u-7", name: "Michael Dave", activity: "Last Activity", time: "12 Aug 2022 - 12:55 am", avatarClassName: "bg-gradient-to-br from-slate-300 to-slate-700" },
  { id: "u-8", name: "John Saen", activity: "Last Activity", time: "12 Aug 2022 - 12:55 am", avatarClassName: "bg-gradient-to-br from-zinc-300 to-zinc-800" },
];

export default function ClientWorkspaceChatFeature({ app }: ClientWorkspaceChatFeatureProps) {
  const selectedContact = CONTACTS[0];
  const [isNewMessageModalOpen, setIsNewMessageModalOpen] = useState(false);

  return (
    <div className="min-h-0 bg-[#f3f4f6]">
      <div className="mb-4 flex items-center justify-between">
        <h2 className="text-xl font-semibold text-[#1f2937]">Conversations with Customers</h2>
        <button
          type="button"
          onClick={() => setIsNewMessageModalOpen(true)}
          className="rounded-md bg-[#0c4778] px-5 py-2 text-xs font-semibold text-white transition hover:bg-[#0a3b65]"
        >
          new message
        </button>
      </div>

      <div className="grid min-h-[600px] grid-cols-1 gap-4 lg:grid-cols-[300px_1fr]">
        <aside className="overflow-hidden rounded-xl border border-[#e5e7eb] bg-[#f9fafb]">
          <div className="flex items-center justify-between px-4 pb-3 pt-4">
            <h3 className="text-lg font-semibold text-[#111827]">Contacts</h3>
            <span className="text-lg font-semibold text-[#6b7280]">34</span>
          </div>

          <div className="px-4 pb-3 bg-white">
            <label className="flex h-9 items-center gap-2 rounded-md border border-[#d1d5db] bg-white px-3">
              <SearchIcon />
              <input
                type="text"
                placeholder="Search"
                className="w-full bg-transparent text-sm text-[#6b7280] outline-none placeholder:text-[#9ca3af]"
              />
            </label>
          </div>

          <ul className="h-[calc(100vh-330px)] overflow-y-auto border-t border-[#e5e7eb] bg-white">
            {CONTACTS.map((contact) => (
              <li
                key={contact.id}
                className={`flex items-center gap-3 border-b border-[#e5e7eb] px-4 py-3 ${
                  contact.id === selectedContact.id ? "bg-[#f3f4f8] border-r-2 border-r-[#0c4778]" : ""
                }`}
              >
                <span className={`h-10 w-10 shrink-0 rounded-full ${contact.avatarClassName}`} />
                <div className="min-w-0 flex-1">
                  <div className="mb-0.5 flex items-center justify-between gap-2">
                    <p className="truncate text-sm font-semibold text-[#1f2937]">{contact.name}</p>
                    {contact.isNew ? (
                      <span className="rounded-full bg-[#fff7ed] px-2 py-0.5 text-[10px] font-semibold uppercase text-[#9a3412]">
                        New
                      </span>
                    ) : null}
                    {contact.unreadCount ? (
                      <span className="ml-auto inline-flex h-5 min-w-[20px] items-center justify-center rounded-full bg-[#0c4778] px-1.5 text-[11px] font-semibold text-white">
                        {contact.unreadCount}
                      </span>
                    ) : null}
                  </div>
                  <div className="flex items-center justify-between gap-2">
                    <p className="truncate text-xs text-[#6b7280]">{contact.preview}</p>
                    <span className="shrink-0 text-[11px] text-[#9ca3af]">{contact.time}</span>
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </aside>

        <section className="flex min-h-[600px] flex-col overflow-hidden rounded-xl border border-[#e5e7eb] bg-white">
          <header className="flex items-start justify-between border-b border-[#e5e7eb] px-4 py-3">
            <div className="flex items-center gap-3">
              <span className={`h-10 w-10 rounded-full ${selectedContact.avatarClassName}`} />
              <div>
                <p className="text-sm font-semibold text-[#1f2937]">{selectedContact.name}</p>
                <p className="text-xs text-[#9ca3af]">
                  <span className="mr-1 inline-block h-1.5 w-1.5 rounded-full bg-[#3b82f6]" />
                  Online
                  <span className="ml-2">{selectedContact.time}</span>
                </p>
              </div>
            </div>
            <div className="text-right">
              <div className="mb-2 flex items-center gap-2 text-[11px]">
                <span className="rounded-full bg-[#f3f4f6] px-2 py-1 text-[#6b7280]">New Customer</span>
                <button type="button" className="font-medium text-[#0c4778]">
                  View Profile
                </button>
              </div>
              <p className="text-xs text-[#9ca3af]">0 Orders</p>
            </div>
          </header>

          <div className="flex-1 space-y-5 overflow-y-auto bg-[#f9fafb] px-4 py-4">
            <div className="mx-auto w-max rounded-md bg-[#eef0f3] px-3 py-1 text-[11px] text-[#6b7280]">
              12 August 2022
            </div>

            <div className="max-w-[260px]">
              <div className="mb-2 flex items-center gap-2">
                <span className="h-8 w-8 rounded-md bg-[#facc15]" />
                <div>
                  <p className="text-xs text-[#374151]">Joy Stick</p>
                  <p className="text-sm font-semibold text-[#111827]">$ 200.00</p>
                </div>
                <span className="ml-auto text-[11px] text-[#6b7280]">12 In Stock</span>
              </div>
            </div>

            {CHAT_MESSAGES.map((message) => (
              <div key={message.id} className={message.side === "right" ? "ml-auto w-full max-w-[340px]" : "max-w-[340px]"}>
                <div
                  className={`rounded-2xl px-4 py-3 text-sm ${
                    message.side === "right"
                      ? "rounded-br-md bg-[#e5eaef] text-[#1f2937]"
                      : "rounded-bl-md bg-[#0c4778] text-white"
                  }`}
                >
                  {message.text}
                </div>
                <p className={`mt-1 text-xs text-[#9ca3af] ${message.side === "right" ? "text-right" : ""}`}>
                  {message.time}
                </p>
              </div>
            ))}

            <div className="mx-auto w-max rounded-md bg-[#eef0f3] px-3 py-1 text-[11px] text-[#6b7280]">Today</div>
          </div>

          <footer className="border-t border-[#e5e7eb] bg-white p-3">
            <div className="flex items-center gap-2 rounded-lg border border-[#dbe0e6] bg-[#f9fafb] px-2 py-1.5">
              <button
                type="button"
                className="flex h-7 w-7 items-center justify-center rounded-md bg-[#e5e7eb] text-lg text-[#374151]"
              >
                +
              </button>
              <input
                type="text"
                value=""
                readOnly
                placeholder="Your message"
                className="h-7 flex-1 bg-transparent text-sm text-[#6b7280] outline-none placeholder:text-[#9ca3af]"
              />
              <button type="button" className="text-lg text-[#0c4778]">
                ☺
              </button>
              <button
                type="button"
                className="rounded-md bg-[#0c4778] px-4 py-1.5 text-sm font-medium text-white hover:bg-[#0a3b65]"
              >
                Send
              </button>
            </div>
            <p className="mt-1 text-right text-[10px] text-[#c1c7d0]">{app.toUpperCase()} workspace</p>
          </footer>
        </section>
      </div>

      {isNewMessageModalOpen ? (
        <div
          className="fixed inset-0 z-50 flex items-center justify-center bg-[#0f172a]/35 backdrop-blur-[2px] px-4"
          onClick={() => setIsNewMessageModalOpen(false)}
        >
          <div
            className="w-full max-w-[370px] rounded-xl bg-white p-4 shadow-2xl"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="mb-3 flex items-center justify-between">
              <h3 className="text-sm font-semibold text-[#111827]">New Message</h3>
              <button
                type="button"
                aria-label="Close modal"
                onClick={() => setIsNewMessageModalOpen(false)}
                className="grid h-6 w-6 place-items-center rounded text-[#6b7280] hover:bg-[#f3f4f6]"
              >
                x
              </button>
            </div>

            <p className="mb-2 text-[11px] text-[#9ca3af]">Search A Customer to Start A Conversation</p>

            <label className="mb-3 flex h-9 items-center gap-2 rounded-md border border-[#d1d5db] px-3">
              <SearchIcon />
              <input
                type="text"
                placeholder="Search customer name"
                className="w-full bg-transparent text-xs text-[#6b7280] outline-none placeholder:text-[#c0c6cf]"
              />
            </label>

            <ul className="max-h-[340px] divide-y divide-[#edf0f4] overflow-y-auto">
              {NEW_CONVERSATION_USERS.map((user) => (
                <li key={user.id} className="flex items-center gap-2 py-2">
                  <span className={`h-8 w-8 shrink-0 rounded-full ${user.avatarClassName}`} />
                  <div className="min-w-0 flex-1">
                    <p className="truncate text-xs font-semibold text-[#1f2937]">{user.name}</p>
                    <p className="text-[10px] text-[#a1a7b2]">{user.activity}</p>
                  </div>
                  <span className="shrink-0 text-[9px] text-[#b0b7c3]">{user.time}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function SearchIcon() {
  return (
    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="text-[#6b7280]">
      <circle cx="11" cy="11" r="7" stroke="currentColor" strokeWidth="1.8" />
      <path d="M20 20L16.65 16.65" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}