"use client";

import { useState } from "react";

import Button from "@/components/ui/Button";
import { cn } from "@/lib/utils";

interface Conversation {
  id: string;
  sender: string;
  avatarText?: string;
  avatarColor?: string;
  preview: string;
  time: string;
}

interface Message {
  id: string;
  sender: string;
  text: string;
  time?: string;
}

interface MessageCenterProps {
  conversations?: Conversation[];
  messages?: Message[];
  initialConversationId?: string;
  emptyTitle?: string;
  emptyDescription?: string;
  showEmptyState?: boolean;
  className?: string;
}

const defaultConversations: Conversation[] = [
  {
    id: "rdb",
    sender: "RDB Diriya",
    avatarText: "Diriya",
    avatarColor: "#ef476f",
    preview: "Get prepared for some big discounts... It's SuperDeals! Up to 47%",
    time: "3:24 PM",
  },
  {
    id: "cozy",
    sender: "Cozy",
    avatarText: "coz",
    avatarColor: "#ad5a17",
    preview: "Get prepared for some big discounts... It's SuperDeals! Up to 47%",
    time: "3:24 PM",
  },
  {
    id: "tiki",
    sender: "Tiki",
    avatarText: "Tiki",
    avatarColor: "#123d3a",
    preview: "Get prepared for some big discounts... It's SuperDeals! Up to 47%",
    time: "3:24 PM",
  },
  {
    id: "caju",
    sender: "Caju",
    avatarText: "Caju",
    avatarColor: "#1f2a12",
    preview: "Get prepared for some big discounts... It's SuperDeals! Up to 47%",
    time: "3:24 PM",
  },
];

const defaultMessages: Message[] = [
  {
    id: "1",
    sender: "Cozy",
    text: "Get prepared for some big discounts... It's SuperDeals! Up to 47.76% off, jump in and grab a huge saving while stocks last.",
    time: "3:24 PM",
  },
];

function InboxIcon() {
  return (
    <svg className="h-8 w-8" viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <path d="M12 32 28 6l8 5-14 25-10-4Z" fill="#3B82F6" />
      <path d="M9 36h15l-4 7H8l1-7Z" fill="#1E3A8A" />
      <path d="M29 7l7 4 3-5-7-4-3 5Z" fill="#93C5FD" />
      <path d="M15 26l10 4" stroke="white" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function EmptyInboxArt() {
  return (
    <svg className="h-20 w-20" viewBox="0 0 96 96" fill="none" aria-hidden="true">
      <circle cx="48" cy="50" r="22" fill="#A7D8FF" />
      <path d="M32 54c4 12 22 14 31 1 6-9 1-20-10-23-13-4-25 8-21 22Z" fill="#4FA6F7" />
      <path d="M37 57c7 6 18 5 25-2" stroke="white" strokeWidth="4" strokeLinecap="round" />
      <circle cx="42" cy="45" r="3" fill="#0F172A" />
      <circle cx="56" cy="45" r="3" fill="#0F172A" />
      <path d="M64 40l11-5-7 10" fill="#FACC15" />
      <path d="M24 27l-4-6M72 25l5-6M22 72l-7 4M74 72l8 4" stroke="#38BDF8" strokeWidth="3" strokeLinecap="round" />
    </svg>
  );
}

function Avatar({ text, color }: { text?: string; color?: string }) {
  return (
    <div
      className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold text-white"
      style={{ backgroundColor: color ?? "#ad5a17" }}
    >
      {text ?? "coz"}
    </div>
  );
}

export default function MessageCenter({
  conversations = defaultConversations,
  messages = defaultMessages,
  initialConversationId = "cozy",
  emptyTitle = "You don't have any messages yet.",
  emptyDescription = "Start a conversation when you need help.",
  showEmptyState = false,
  className,
}: MessageCenterProps) {
  const [activeId, setActiveId] = useState(initialConversationId);
  const activeConversation = conversations.find((item) => item.id === activeId) ?? conversations[0];

  return (
    <section className={cn("grid min-h-[520px] overflow-hidden rounded-lg bg-white shadow-sm lg:grid-cols-[310px_1fr]", className)}>
      <aside className="border-b border-gray-100 bg-white lg:border-b-0 lg:border-r">
        <div className="flex items-center gap-3 px-6 py-6">
          <InboxIcon />
          <h2 className="text-xl font-medium text-[#1f2440]">Inbox</h2>
        </div>

        <div>
          {conversations.map((conversation) => {
            const active = conversation.id === activeId;

            return (
              <button
                key={conversation.id}
                type="button"
                onClick={() => setActiveId(conversation.id)}
                className={cn(
                  "flex w-full gap-4 px-6 py-4 text-left transition-colors hover:bg-gray-50",
                  active && "bg-gray-50"
                )}
              >
                <Avatar text={conversation.avatarText} color={conversation.avatarColor} />
                <div className="min-w-0 flex-1">
                  <div className="flex items-center justify-between gap-3">
                    <h3 className="truncate text-sm font-medium text-gray-900">{conversation.sender}</h3>
                    <span className="shrink-0 text-[10px] text-gray-400">{conversation.time}</span>
                  </div>
                  <p className="mt-1 truncate text-xs text-gray-500">{conversation.preview}</p>
                </div>
              </button>
            );
          })}
        </div>
      </aside>

      <div className="flex min-h-[520px] flex-col">
        {showEmptyState ? (
          <div className="flex flex-1 flex-col items-center justify-center px-6 text-center">
            <EmptyInboxArt />
            <h3 className="mt-4 text-sm font-semibold text-[#1f2440]">{emptyTitle}</h3>
            <p className="mt-1 text-xs text-gray-500">{emptyDescription}</p>
          </div>
        ) : (
          <>
            <div className="flex items-center justify-between border-b border-gray-100 px-6 py-5">
              <div className="flex items-center gap-3">
                <Avatar text={activeConversation?.avatarText} color={activeConversation?.avatarColor} />
                <h3 className="text-sm font-medium text-gray-900">{activeConversation?.sender}</h3>
              </div>
              <button type="button" className="text-gray-400 transition-colors hover:text-gray-700" aria-label="Close chat">
                <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <div className="flex-1 space-y-4 px-6 py-6">
              {messages.map((message) => (
                <div key={message.id} className="flex gap-3">
                  <Avatar text={activeConversation?.avatarText} color={activeConversation?.avatarColor} />
                  <div className="max-w-[520px]">
                    <p className="text-sm leading-6 text-gray-800">{message.text}</p>
                    {message.time && <p className="mt-2 text-right text-[10px] text-gray-400">{message.time}</p>}
                  </div>
                </div>
              ))}
            </div>

            <div className="border-t border-gray-100 px-5 py-4">
              <div className="mb-4 flex flex-wrap items-center gap-3">
                <Button variant="ghost" className="h-9 rounded-full bg-gray-50 px-5 text-xs text-gray-700">
                  I have a question about my order
                </Button>
                <Button variant="ghost" className="h-9 rounded-full bg-gray-50 px-5 text-xs text-gray-700">
                  I want to request a return or exchange
                </Button>
                <Button variant="icon" aria-label="More quick replies" className="h-9 w-9 border-0 bg-gray-50">
                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="m9 5 7 7-7 7" />
                  </svg>
                </Button>
              </div>

              <div className="flex items-center gap-3 rounded-full border border-gray-100 bg-white px-4 py-3">
                <button type="button" className="text-gray-500" aria-label="Attach file">
                  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="m21.44 11.05-8.49 8.49a5 5 0 0 1-7.07-7.07l8.49-8.49a3 3 0 1 1 4.24 4.24l-8.49 8.49a1 1 0 0 1-1.41-1.41l7.78-7.78" />
                  </svg>
                </button>
                <input className="min-w-0 flex-1 text-sm outline-none placeholder:text-gray-400" placeholder="Type here" />
                <button type="button" className="text-gray-500 transition-colors hover:text-[#00AFC1]" aria-label="Send message">
                  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7Z" />
                  </svg>
                </button>
              </div>
            </div>
          </>
        )}
      </div>
    </section>
  );
}
