"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Send, Paperclip, X, Loader2, FileText, Tag, ShoppingBag, ExternalLink, Phone, Sparkles, Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea, Select, Input, Label } from "@/components/ui/input";
import { initials, timeAgo, cn } from "@/lib/utils";

type Any = any;

export function InboxClient({
  initialConversations,
  members,
  whatsappConfigured,
  templates = [],
  products = [],
  allTags = [],
}: {
  initialConversations: Any[];
  members: Any[];
  whatsappConfigured: boolean;
  templates?: Any[];
  products?: Any[];
  allTags?: Any[];
}) {
  const router = useRouter();
  const [conversations, setConversations] = useState(initialConversations);
  const [statusFilter, setStatusFilter] = useState<string>("OPEN");
  const [searchQuery, setSearchQuery] = useState("");
  const [selected, setSelected] = useState<string | null>(initialConversations[0]?.id ?? null);
  const [messages, setMessages] = useState<Any[]>([]);
  const [contactInfo, setContactInfo] = useState<Any | null>(null);
  const [text, setText] = useState("");
  const [sending, setSending] = useState(false);
  const [uploading, setUploading] = useState(false);
  const [zoomedImage, setZoomedImage] = useState<string | null>(null);
  const [templateModalOpen, setTemplateModalOpen] = useState(false);
  const [selectedTemplate, setSelectedTemplate] = useState<Any | null>(null);
  const [templateVars, setTemplateVars] = useState<Record<string, string>>({});
  const [headerMediaUrl, setHeaderMediaUrl] = useState("");
  
  const [productModalOpen, setProductModalOpen] = useState(false);
  const [attachment, setAttachment] = useState<{ url: string; type: "image" | "video" | "document" | "audio"; name: string } | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const bottomRef = useRef<HTMLDivElement>(null);
  const [isDrafting, setIsDrafting] = useState(false);
  const [isBlocking, setIsBlocking] = useState(false);
  const [isAiAutoReplyOn, setIsAiAutoReplyOn] = useState(false);

  const [isEditingContact, setIsEditingContact] = useState(false);
  const [editForm, setEditForm] = useState({ email: "", company: "", notes: "", tagIds: [] as string[] });
  const [availableTags, setAvailableTags] = useState<Any[]>(allTags || []);
  const [newTagName, setNewTagName] = useState("");
  const [creatingTag, setCreatingTag] = useState(false);
  const [chatWindowTime, setChatWindowTime] = useState<string>("");

  useEffect(() => {
    setAvailableTags(allTags || []);
  }, [allTags]);

  useEffect(() => {
    const lastInbound = [...messages].reverse().find(m => m.direction === "INBOUND");
    if (!lastInbound) {
      setChatWindowTime("");
      return;
    }
    
    const updateTime = () => {
      const msPassed = Date.now() - new Date(lastInbound.createdAt).getTime();
      const msRemaining = (24 * 60 * 60 * 1000) - msPassed;
      
      if (msRemaining <= 0) {
        setChatWindowTime("CLOSED");
        return;
      }
      
      const hours = Math.floor(msRemaining / (1000 * 60 * 60));
      const mins = Math.floor((msRemaining % (1000 * 60 * 60)) / (1000 * 60));
      setChatWindowTime(`${hours}h ${mins}m`);
    };
    
    updateTime();
    const interval = setInterval(updateTime, 60000);
    return () => clearInterval(interval);
  }, [messages]);

  async function toggleAiAutoReply() {
    if (!selected) return;
    const newState = !isAiAutoReplyOn;
    setIsAiAutoReplyOn(newState);
    // Update locally immediately for responsiveness
    setConversations((prev: any[]) => prev.map((c) => c.id === selected ? { ...c, aiAutoReply: newState } : c));
    try {
      const res = await fetch(`/api/inbox/${selected}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ aiAutoReply: newState }),
      });
      if (!res.ok) throw new Error("Failed to update");
    } catch (err) {
      toast.error("Failed to update AI auto-reply setting.");
      setIsAiAutoReplyOn(!newState);
      setConversations((prev: any[]) => prev.map((c) => c.id === selected ? { ...c, aiAutoReply: !newState } : c));
    }
  }

  async function handleCreateTag(e: React.FormEvent) {
    e.preventDefault();
    if (!newTagName.trim()) return;
    setCreatingTag(true);
    try {
      const res = await fetch("/api/tags", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name: newTagName.trim() })
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || "Failed to create tag");
      setAvailableTags([...availableTags, data.tag]);
      setEditForm({ ...editForm, tagIds: [...editForm.tagIds, data.tag.id] });
      setNewTagName("");
    } catch (err: any) {
      toast.error(err.message || "Failed to create tag");
    } finally {
      setCreatingTag(false);
    }
  }

  async function saveContactDetails() {
    if (!contactInfo?.id) return;
    try {
      const res = await fetch(`/api/contacts/${contactInfo.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(editForm),
      });
      if (!res.ok) throw new Error("Failed to save contact details");
      toast.success("Contact updated");
      setIsEditingContact(false);
      await loadConversation(selected!);
      await refreshList();
    } catch (err: any) {
      toast.error(err.message || "Failed to save");
    }
  }

  async function generateDraft() {
    if (!selected) return;
    setIsDrafting(true);
    try {
      const res = await fetch(`/api/inbox/${selected}/ai-draft`, { method: "POST" });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) throw new Error(data.error ?? "Failed to generate AI draft");
      setText(data.reply);
      if (data.knowledgeUsed) {
        toast.success("Generated using Knowledge Base");
      } else {
        toast.success("Draft generated");
      }
    } catch (err: any) {
      toast.error(err.message || "Failed to generate AI draft");
    } finally {
      setIsDrafting(false);
    }
  }

  async function sendSpecial(type: "template" | "product", idStr: string) {
    if (!selected) return;
    setSending(true);
    const payload: any = { conversationId: selected, mediaType: type };
    if (type === "template") {
      payload.templateName = idStr;
      payload.templateVariables = {
        header: headerMediaUrl || undefined,
        body: Object.keys(templateVars).length > 0 ? Object.values(templateVars) : undefined,
      };
    }
    if (type === "product") payload.productSku = idStr;

    const res = await fetch("/api/inbox", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    setSending(false);
    if (!res.ok) {
      const j = await res.json().catch(() => ({}));
      toast.error(j.error ?? `Failed to send ${type}.`);
      return;
    }
    toast.success(`Sent ${type}`);
    if (type === "template") {
      setTemplateModalOpen(false);
      setSelectedTemplate(null);
      setTemplateVars({});
      setHeaderMediaUrl("");
    }
    if (type === "product") setProductModalOpen(false);
    await loadConversation(selected);
    await refreshList();
  }

  const loadConversation = useCallback(async (id: string) => {
    try {
      const res = await fetch(`/api/inbox/${id}`);
      const json = await res.json().catch(() => ({}));
      if (res.ok) {
        setMessages(json.conversation?.messages ?? []);
        setContactInfo(json.conversation?.contact ?? null);
      }
    } catch (err) {
      console.error("Failed to load conversation:", err);
    }
  }, []);

  async function toggleBlockContact() {
    if (!contactInfo?.id) return;
    setIsBlocking(true);
    const newStatus = contactInfo.status === "BLOCKED" ? "ACTIVE" : "BLOCKED";
    try {
      const res = await fetch(`/api/contacts/${contactInfo.id}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: newStatus }),
      });
      if (!res.ok) throw new Error("Failed to update status");
      
      setContactInfo({ ...contactInfo, status: newStatus });
      toast.success(`Contact ${newStatus === "BLOCKED" ? "blocked" : "unblocked"}`);
      
      if (newStatus === "BLOCKED") {
        router.refresh();
      }
    } catch (err) {
      toast.error("Could not update contact status");
    } finally {
      setIsBlocking(false);
    }
  }

  useEffect(() => {
    if (selected) loadConversation(selected);
  }, [selected, loadConversation]);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages.length]);

  useEffect(() => {
    const t = setInterval(async () => {
      try {
        const res = await fetch("/api/inbox");
        if (res.ok) setConversations((await res.json()).conversations);
      } catch (err) {
        console.error("Inbox poll failed:", err);
      }
      if (selected) loadConversation(selected);
    }, 8000);
    return () => clearInterval(t);
  }, [selected, loadConversation]);

  async function refreshList() {
    try {
      const res = await fetch("/api/inbox");
      if (res.ok) setConversations((await res.json()).conversations);
    } catch (err) {
      console.error("Refresh list failed:", err);
    }
  }

  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;
    setUploading(true);
    const form = new FormData();
    form.append("file", file);
    form.append("kind", "CHAT");
    const res = await fetch("/api/upload", { method: "POST", body: form });
    const json = await res.json().catch(() => ({}));
    setUploading(false);
    if (!res.ok) return toast.error(json.error ?? "Failed to upload file.");
    
    let type: "image" | "video" | "document" | "audio" = "document";
    if (file.type.startsWith("image/")) type = "image";
    else if (file.type.startsWith("video/")) type = "video";
    else if (file.type.startsWith("audio/")) type = "audio";

    setAttachment({ url: json.url, type, name: file.name });
    if (fileInputRef.current) fileInputRef.current.value = "";
  }

  async function send(e?: React.FormEvent) {
    e?.preventDefault();
    if ((!text.trim() && !attachment) || !selected) return;
    setSending(true);
    const payload: any = { conversationId: selected };
    if (text.trim()) payload.body = text.trim();
    if (attachment) {
      payload.mediaUrl = attachment.url;
      payload.mediaType = attachment.type;
    }
    const res = await fetch("/api/inbox", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });
    setSending(false);
    if (!res.ok) {
      const j = await res.json().catch(() => ({}));
      toast.error(j.error ?? "Failed to send. Is WhatsApp connected?");
      return;
    }
    setText("");
    setAttachment(null);
    await loadConversation(selected);
    await refreshList();
  }

  async function updateConversation(data: Record<string, unknown>) {
    if (!selected) return;
    const res = await fetch(`/api/inbox/${selected}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(data),
    });
    if (!res.ok) return toast.error("Update failed.");
    router.refresh();
  }

  const selectedConv = conversations.find((c) => c.id === selected);
  const convMessages = selectedConv?.messages || [];
  const lastMessage = convMessages.length > 0 ? convMessages[convMessages.length - 1] : null;
  const isWaitingForAi = isAiAutoReplyOn && lastMessage?.direction === "INBOUND";

  return (
    <div className="flex h-[calc(100vh-3rem)] gap-4">
      {/* Conversation list */}
      <div className="flex w-72 shrink-0 flex-col rounded-xl border border-border bg-card">
        <div className="flex items-center justify-between border-b border-border px-4 py-3">
          <div className="relative flex-1 mr-2">
            <Search className="absolute left-2.5 top-2 h-4 w-4 text-muted-foreground" />
            <Input
              type="text"
              placeholder="Search phone or name..."
              className="h-8 w-full pl-8 text-xs"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
          <Select
            className="h-8 w-24 text-xs"
            value={statusFilter}
            onChange={(e) => setStatusFilter(e.target.value)}
          >
            <option value="ALL">All</option>
            <option value="OPEN">Open</option>
            <option value="PENDING">Pending</option>
            <option value="CLOSED">Closed</option>
          </Select>
        </div>
        <div className="flex-1 overflow-y-auto">
          {conversations.filter(c => (statusFilter === "ALL" || c.status === statusFilter) && (!searchQuery || c.contact.phone?.includes(searchQuery) || c.contact.name?.toLowerCase().includes(searchQuery.toLowerCase()))).length === 0 && (
            <div className="p-4 text-sm text-muted-foreground">
              {whatsappConfigured
                ? "No conversations yet. Incoming WhatsApp messages will appear here."
                : "Connect your WhatsApp number in Settings → WhatsApp to get started."}
            </div>
          )}
          {conversations
            .filter((c) => (statusFilter === "ALL" || c.status === statusFilter) && (!searchQuery || c.contact.phone?.includes(searchQuery) || c.contact.name?.toLowerCase().includes(searchQuery.toLowerCase())))
            .map((c) => {
            const last = c.messages[0];
            return (
              <button
                key={c.id}
                onClick={() => setSelected(c.id)}
                className={cn(
                  "flex w-full items-start gap-3 border-b border-zinc-50 px-4 py-3 text-left hover:bg-muted",
                  selected === c.id && "bg-indigo-50/60 hover:bg-indigo-50"
                )}
              >
                <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-700">
                  {initials(c.contact.name)}
                </span>
                <span className="min-w-0 flex-1">
                  <span className="flex items-center justify-between">
                    <span className="truncate text-sm font-medium text-foreground">{c.contact.name}</span>
                    <span className="shrink-0 text-[10px] text-muted-foreground" suppressHydrationWarning>{timeAgo(c.lastMessageAt)}</span>
                  </span>
                  <span className="flex items-center gap-1">
                    {c.status !== "CLOSED" && <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500" />}
                    <span className="truncate text-xs text-muted-foreground">
                      {last ? (() => {
                        let text = last.body;
                        if (last.messageType === "interactive" && text?.startsWith("Product: ")) {
                          const sku = text.replace("Product: ", "").trim();
                          const p = products?.find(pr => pr.sku === sku || pr.id === sku);
                          if (p) text = `Product: ${p.name}`;
                        }
                        return `${last.direction === "INBOUND" ? "←" : "→"} ${text}`;
                      })() : "No messages"}
                    </span>
                  </span>
                </span>
              </button>
            );
          })}
        </div>
      </div>

      {/* Thread */}
      <div className="flex min-w-0 flex-1 flex-col rounded-xl border border-border bg-card">
        {!selected ? (
          <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
            Select a conversation
          </div>
        ) : (
          <>
            <div className="flex items-center gap-3 border-b border-border px-4 py-3">
              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 text-sm font-semibold text-indigo-700">
                {initials(contactInfo?.name ?? "?")}
              </div>
              <div className="min-w-0">
                <p className="truncate text-sm font-semibold text-foreground">{contactInfo?.name ?? "Unknown"}</p>
                <p className="truncate text-xs text-muted-foreground">{contactInfo?.phone}</p>
              </div>
              
              <div className="mx-4 flex flex-1 items-center justify-center">
                {chatWindowTime === "CLOSED" ? (
                  <span className="rounded-md bg-red-50 px-2.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">
                    Chat Window Closed
                  </span>
                ) : chatWindowTime ? (
                  <span className="flex items-center gap-1.5 rounded-md bg-emerald-50 px-2.5 py-1 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-600/20">
                    <span className="relative flex h-2 w-2">
                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                      <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                    </span>
                    {chatWindowTime}
                  </span>
                ) : null}
              </div>

              <div className="ml-auto flex items-center gap-2">
                <Select
                  className="h-8 w-40 text-xs"
                  defaultValue={selectedConv?.assigneeId ?? ""}
                  onChange={(e) => updateConversation({ assigneeId: e.target.value || null })}
                >
                  <option value="">Assign to…</option>
                  {members.map((m) => (
                    <option key={m.user.id} value={m.user.id}>
                      {m.user.name}
                    </option>
                  ))}
                </Select>
              </div>
            </div>

            <div className="flex-1 space-y-3 overflow-y-auto px-5 py-4">
              {messages.length === 0 && (
                <p className="pt-10 text-center text-sm text-muted-foreground">No messages yet.</p>
              )}
              {messages.map((m) => (
                <div key={m.id} className={cn("flex", m.direction === "OUTBOUND" ? "justify-end" : "justify-start")}>
                  <div
                    className={cn(
                      "max-w-[70%] rounded-2xl px-4 py-2 text-sm shadow-sm",
                      m.direction === "OUTBOUND"
                        ? "rounded-br-sm bg-[#d9fdd3] text-[#111b21] dark:bg-[#005c4b] dark:text-[#e9edef]"
                        : "rounded-bl-sm border border-border bg-card text-foreground"
                    )}
                  >
                    {m.mediaUrl && (m.messageType === "image" || m.messageType === "video" || m.messageType === "template") && (
                      // eslint-disable-next-line @next/next/no-img-element
                      <img
                        src={m.mediaUrl}
                        alt="media"
                        className="mb-2 max-h-64 cursor-zoom-in rounded-lg hover:opacity-90 transition-opacity"
                        onClick={() => setZoomedImage(m.mediaUrl)}
                      />
                    )}
                    {!["text", "image", "video", "template", "interactive"].includes(m.messageType) && (
                      <p className="mb-1 text-xs opacity-70">
                        [{m.messageType}]
                        {m.mediaUrl ? (
                          <>
                            {" · "}
                            <a href={m.mediaUrl} target="_blank" rel="noopener noreferrer" className="underline hover:opacity-100">
                              {m.mediaUrl.split("/").pop()}
                            </a>
                          </>
                        ) : ""}
                      </p>
                    )}
                    {m.messageType === "interactive" && m.body?.startsWith("Product: ") ? (() => {
                      const sku = m.body.replace("Product: ", "").trim();
                      const product = products?.find(p => p.sku === sku || p.id === sku);
                      
                      if (product) {
                        return (
                          <div className={cn("flex flex-col mt-1 w-64 rounded-xl overflow-hidden border shadow-sm", m.direction === "OUTBOUND" ? "border-black/10 bg-black/5 dark:border-white/10 dark:bg-white/5" : "border-border bg-card")}>
                            {product.imageUrl ? (
                              <img src={product.imageUrl} alt={product.name} className="w-full h-48 object-cover" />
                            ) : (
                              <div className="flex h-48 w-full items-center justify-center bg-muted text-muted-foreground"><ShoppingBag className="h-8 w-8" /></div>
                            )}
                            <div className="p-3 pb-2">
                              <h4 className={cn("truncate text-base font-medium", m.direction === "OUTBOUND" ? "text-current" : "text-foreground")}>{product.name}</h4>
                              <p className={cn("mt-0.5 text-sm", m.direction === "OUTBOUND" ? "text-current opacity-80" : "text-muted-foreground")}>₹{product.price}</p>
                            </div>
                            <div className={cn("border-t py-2.5 text-center text-sm font-medium transition-colors", m.direction === "OUTBOUND" ? "border-black/10 text-current hover:bg-black/5 dark:border-white/10 dark:hover:bg-white/5" : "border-border text-primary hover:bg-muted")}>
                              View
                            </div>
                          </div>
                        );
                      }
                      
                      return (
                        <>
                          <p className="mb-1 text-xs opacity-70">[{m.messageType}]</p>
                          <p className="whitespace-pre-wrap break-words">{m.body}</p>
                        </>
                      );
                    })() : (
                      <p className="whitespace-pre-wrap break-words">{m.body}</p>
                    )}
                    <p className={cn("mt-1 text-right text-[10px]", m.direction === "OUTBOUND" ? "text-black/60 dark:text-white/60" : "text-muted-foreground")}>
                      {new Date(m.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                      {m.direction === "OUTBOUND" && m.status && m.status !== "SENT" ? ` · ${m.status}` : ""}
                    </p>
                    {m.buttons && Array.isArray(m.buttons) && (
                      <div className="mt-3 space-y-1.5 border-t border-black/10 pt-2 dark:border-white/10">
                        {m.buttons.map((btn: any, i: number) => (
                          <div
                            key={i}
                            className={cn(
                              "flex w-full cursor-pointer items-center justify-center gap-2 rounded-lg border py-2 text-xs font-semibold transition-colors",
                              m.direction === "OUTBOUND"
                                ? "border-black/20 text-current hover:bg-black/5 dark:border-white/20 dark:hover:bg-white/5"
                                : "border-border text-foreground hover:bg-muted"
                            )}
                          >
                            <span>{btn.text}</span>
                            {btn.type === "URL" && <ExternalLink className="h-3 w-3 opacity-70" />}
                            {btn.type === "PHONE_NUMBER" && <Phone className="h-3 w-3 opacity-70" />}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
              ))}
              <div ref={bottomRef} />
            </div>

            <form onSubmit={send} className="flex flex-col border-t border-border p-3">
              {attachment && (
                <div className="mb-2 flex items-center justify-between rounded-md border border-border bg-muted px-3 py-2 text-sm">
                  <span className="truncate text-foreground">
                    {attachment.type === "image" ? "📷 " : "📄 "}
                    {attachment.name}
                  </span>
                  <button
                    type="button"
                    onClick={() => setAttachment(null)}
                    className="ml-2 text-muted-foreground hover:text-red-500"
                  >
                    <X className="h-4 w-4" />
                  </button>
                </div>
              )}
              <div className="flex items-center justify-between mb-2">
                <div className="flex items-center gap-2">
                  <input
                    type="file"
                    className="hidden"
                    ref={fileInputRef}
                    onChange={handleUpload}
                  />
                  <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    className="h-10 w-10 shrink-0 bg-slate-500/10 text-slate-500 hover:bg-slate-500/20 border-slate-500/20"
                    disabled={uploading}
                    onClick={() => fileInputRef.current?.click()}
                  >
                    {uploading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Paperclip className="h-4 w-4" />}
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    className="h-10 w-10 shrink-0 bg-emerald-500/10 text-emerald-500 hover:bg-emerald-500/20 border-emerald-500/20"
                    onClick={() => setProductModalOpen(true)}
                    title="Share Product"
                  >
                    <ShoppingBag className="h-4 w-4" />
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    className="h-10 w-10 shrink-0 bg-amber-500/10 text-amber-500 hover:bg-amber-500/20 border-amber-500/20"
                    onClick={() => setTemplateModalOpen(true)}
                    title="Share Template"
                  >
                    <FileText className="h-4 w-4" />
                  </Button>
                  <Button
                    type="button"
                    variant="outline"
                    size="icon"
                    className="h-10 w-10 shrink-0 bg-fuchsia-500/10 text-fuchsia-500 hover:bg-fuchsia-500/20 border-fuchsia-500/20"
                    onClick={generateDraft}
                    disabled={isDrafting}
                  >
                    {isDrafting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
                  </Button>
                </div>
                <div className="flex items-center justify-end px-1 gap-3">
                  <div className="flex items-center gap-2 border-l border-border/50 pl-3">
                    <span className={cn(
                      "text-[11px] font-bold px-2.5 py-1.5 rounded-md transition-colors border",
                      (isDrafting || isWaitingForAi)
                        ? "bg-amber-500/10 text-amber-500 border-amber-500/20" 
                        : isAiAutoReplyOn 
                          ? "bg-emerald-500/10 text-emerald-500 border-emerald-500/20"
                          : "bg-pink-500/10 text-pink-500 border-pink-500/20"
                    )}>
                      {(isDrafting || isWaitingForAi) ? "AI Agent is replying" : isAiAutoReplyOn ? "AI Agent will reply" : "AI Agent will not reply"}
                    </span>
                    <button 
                      type="button" 
                      onClick={toggleAiAutoReply}
                      className={cn(
                        "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2",
                        isAiAutoReplyOn ? 'bg-emerald-600' : 'bg-slate-700'
                      )}
                    >
                      <span className={cn(
                        "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform",
                        isAiAutoReplyOn ? 'translate-x-6' : 'translate-x-1.5'
                      )} />
                    </button>
                  </div>
                </div>
              </div>
              <div className="flex items-end gap-2">
                <Textarea
                  value={text}
                  onChange={(e) => setText(e.target.value)}
                  rows={2}
                  placeholder="Type a message or caption…"
                  onKeyDown={(e) => {
                    if (e.key === "Enter" && !e.shiftKey) {
                      e.preventDefault();
                      send();
                    }
                  }}
                />
                <Button type="submit" loading={sending || uploading} disabled={!text.trim() && !attachment} size="icon" className="h-10 w-10 shrink-0">
                  <Send className="h-4 w-4" />
                </Button>
              </div>
            </form>
          </>
        )}
      </div>

      {/* Contact Details Sidebar */}
      {selected && (
        <div className="flex w-72 shrink-0 flex-col rounded-xl border border-border bg-card overflow-y-auto">
          <div className="border-b border-border px-4 py-3">
            <h2 className="text-sm font-semibold text-foreground">Contact Details</h2>
          </div>
          {contactInfo ? (
            <div className="flex flex-col p-4 space-y-6">
              {/* Profile */}
              <div className="flex flex-col items-center justify-center space-y-2">
                <div className="flex h-16 w-16 items-center justify-center rounded-full bg-indigo-100 text-xl font-semibold text-indigo-700">
                  {initials(contactInfo.name ?? "?")}
                </div>
                <div className="text-center relative w-full flex flex-col items-center">
                  <h3 className="font-semibold text-foreground flex items-center gap-2">
                    {contactInfo.name}
                    {!isEditingContact && (
                      <button
                        onClick={() => {
                          setEditForm({
                            email: contactInfo.email || "",
                            company: contactInfo.company || "",
                            notes: contactInfo.notesList || "",
                            tagIds: contactInfo.tags?.map((t: any) => t.tagId) || [],
                          });
                          setIsEditingContact(true);
                        }}
                        className="text-[10px] text-indigo-500 hover:underline"
                      >
                        Edit
                      </button>
                    )}
                  </h3>
                  {contactInfo.status === "BLOCKED" && (
                    <span className="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10 mt-1">
                      Blocked
                    </span>
                  )}
                </div>
              </div>

              {/* Info */}
              <div className="space-y-3 text-sm">
                <div>
                  <p className="text-xs font-medium text-muted-foreground mb-1">Phone Number</p>
                  <p className="text-foreground">{contactInfo.phone || "—"}</p>
                </div>
                {isEditingContact ? (
                  <>
                    <div>
                      <Label>Email</Label>
                      <Input
                        value={editForm.email}
                        onChange={(e) => setEditForm({ ...editForm, email: e.target.value })}
                        placeholder="Email address"
                        className="h-8 text-xs"
                      />
                    </div>
                    <div>
                      <Label>Company</Label>
                      <Input
                        value={editForm.company}
                        onChange={(e) => setEditForm({ ...editForm, company: e.target.value })}
                        placeholder="Company name"
                        className="h-8 text-xs"
                      />
                    </div>
                    <div>
                      <Label>Tags</Label>
                      <div className="flex flex-wrap gap-2 mt-1">
                        {availableTags?.map((tag: any) => {
                          const isSelected = editForm.tagIds.includes(tag.id);
                          return (
                            <button
                              key={tag.id}
                              onClick={() => {
                                setEditForm({
                                  ...editForm,
                                  tagIds: isSelected 
                                    ? editForm.tagIds.filter(id => id !== tag.id)
                                    : [...editForm.tagIds, tag.id]
                                });
                              }}
                              className={cn(
                                "inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium ring-1 ring-inset transition-colors",
                                isSelected ? "opacity-100" : "opacity-50 hover:opacity-100"
                              )}
                              style={{
                                backgroundColor: isSelected ? `${tag.color}15` : "transparent",
                                color: isSelected ? tag.color : "currentColor",
                                boxShadow: isSelected ? `inset 0 0 0 1px ${tag.color}30` : "inset 0 0 0 1px var(--border)",
                              }}
                            >
                              {tag.name}
                            </button>
                          );
                        })}
                      </div>
                      <form onSubmit={handleCreateTag} className="mt-2 flex gap-2">
                        <Input 
                          placeholder="New tag..." 
                          value={newTagName} 
                          onChange={e => setNewTagName(e.target.value)}
                          className="h-7 text-xs flex-1"
                        />
                        <Button type="submit" size="sm" variant="secondary" className="h-7 px-2" disabled={creatingTag || !newTagName.trim()}>
                          {creatingTag ? <Loader2 className="h-3 w-3 animate-spin" /> : "Add"}
                        </Button>
                      </form>
                    </div>
                    <div>
                      <Label>Notes</Label>
                      <Textarea
                        value={editForm.notes}
                        onChange={(e) => setEditForm({ ...editForm, notes: e.target.value })}
                        placeholder="Add notes..."
                        rows={3}
                        className="text-xs"
                      />
                    </div>
                    <div className="flex gap-2 pt-2">
                      <Button size="sm" onClick={saveContactDetails} className="w-full">Save</Button>
                      <Button size="sm" variant="outline" onClick={() => setIsEditingContact(false)} className="w-full">Cancel</Button>
                    </div>
                  </>
                ) : (
                  <>
                    <div>
                      <p className="text-xs font-medium text-muted-foreground mb-1">Email</p>
                      <p className="text-foreground">{contactInfo.email || "—"}</p>
                    </div>
                    <div>
                      <p className="text-xs font-medium text-muted-foreground mb-1">Company</p>
                      <p className="text-foreground">{contactInfo.company || "—"}</p>
                    </div>
                    <div>
                      <p className="text-xs font-medium text-muted-foreground mb-1">Tags</p>
                      {contactInfo.tags && contactInfo.tags.length > 0 ? (
                        <div className="flex flex-wrap gap-1.5 mt-1">
                          {contactInfo.tags.map((t: any) => (
                            <span
                              key={t.tagId}
                              className="inline-flex items-center rounded-md px-2 py-1 text-[10px] font-medium ring-1 ring-inset"
                              style={{
                                backgroundColor: `${t.tag?.color}15`,
                                color: t.tag?.color,
                                boxShadow: `inset 0 0 0 1px ${t.tag?.color}30`
                              }}
                            >
                              {t.tag?.name}
                            </span>
                          ))}
                        </div>
                      ) : (
                        <p className="text-muted-foreground text-xs">No tags</p>
                      )}
                    </div>
                    <div>
                      <p className="text-xs font-medium text-muted-foreground mb-1">Notes</p>
                      <div className="rounded-md bg-muted p-2 text-xs text-foreground min-h-[4rem] whitespace-pre-wrap">
                        {contactInfo.notesList || <span className="text-muted-foreground italic">No notes available.</span>}
                      </div>
                    </div>
                  </>
                )}
              </div>

              {/* Actions */}
              <div className="pt-4 border-t border-border">
                <Button
                  variant={contactInfo.status === "BLOCKED" ? "outline" : "danger"}
                  className="w-full"
                  onClick={toggleBlockContact}
                  disabled={isBlocking}
                >
                  {isBlocking && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                  {contactInfo.status === "BLOCKED" ? "Unblock Contact" : "Block Contact"}
                </Button>
                <p className="text-[10px] text-muted-foreground text-center mt-2">
                  {contactInfo.status === "BLOCKED" 
                    ? "Unblocking will restore normal functionality." 
                    : "Blocked contacts are moved to Invalid & Blocked."}
                </p>
              </div>
            </div>
          ) : (
            <div className="flex h-full items-center justify-center">
              <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
            </div>
          )}
        </div>
      )}

      {/* Image Zoom Modal */}
      {zoomedImage && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
          onClick={() => setZoomedImage(null)}
        >
          <button 
            className="absolute right-4 top-4 rounded-full bg-card/10 p-2 text-white hover:bg-card/20 transition-colors"
            onClick={(e) => { e.stopPropagation(); setZoomedImage(null); }}
          >
            <X className="h-6 w-6" />
          </button>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img 
            src={zoomedImage} 
            alt="Zoomed media" 
            className="max-h-[90vh] max-w-[90vw] rounded-md object-contain shadow-2xl"
            onClick={(e) => e.stopPropagation()}
          />
        </div>
      )}

      {templateModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-md rounded-xl bg-card p-5 shadow-xl">
            <div className="mb-4 flex items-center justify-between">
              <h3 className="text-lg font-semibold text-foreground">
                {selectedTemplate ? `Configure: ${selectedTemplate.name}` : "Send Template"}
              </h3>
              <button 
                onClick={() => {
                  setTemplateModalOpen(false);
                  setSelectedTemplate(null);
                  setTemplateVars({});
                  setHeaderMediaUrl("");
                }} 
                className="text-muted-foreground hover:text-foreground"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            
            {!selectedTemplate ? (
              <div className="max-h-96 space-y-2 overflow-y-auto">
                {templates?.length === 0 ? <p className="text-sm text-muted-foreground">No approved templates.</p> : null}
                {templates?.map((t) => (
                  <button
                    key={t.id}
                    onClick={() => {
                      const needsConfig = t.headerType !== "TEXT" && t.headerType !== "NONE" || 
                        (t.metaJson?.components?.find((c: any) => c.type === "BODY")?.example?.body_text?.[0]?.length > 0);
                      
                      if (needsConfig) {
                        setSelectedTemplate(t);
                      } else {
                        sendSpecial("template", t.name);
                      }
                    }}
                    disabled={sending}
                    className="flex w-full flex-col items-start rounded-lg border border-border p-3 text-left hover:bg-muted disabled:opacity-50"
                  >
                    <span className="font-medium text-foreground">{t.name}</span>
                    <span className="mt-1 line-clamp-2 text-xs text-muted-foreground">{t.body}</span>
                  </button>
                ))}
              </div>
            ) : (
              <div className="space-y-4">
                {(selectedTemplate.headerType === "IMAGE" || selectedTemplate.headerType === "VIDEO" || selectedTemplate.headerType === "DOCUMENT") && (
                  <div>
                    <label className="mb-1 block text-sm font-medium text-foreground">
                      Header {selectedTemplate.headerType.toLowerCase()} URL
                    </label>
                    <input
                      type="url"
                      required
                      placeholder="https://..."
                      value={headerMediaUrl}
                      onChange={(e) => setHeaderMediaUrl(e.target.value)}
                      className="w-full rounded-md border border-zinc-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                    />
                  </div>
                )}
                
                {selectedTemplate.metaJson?.components?.find((c: any) => c.type === "BODY")?.example?.body_text?.[0]?.map((exampleVal: string, i: number) => (
                  <div key={i}>
                    <label className="mb-1 block text-sm font-medium text-foreground">
                      Variable {`{{${i + 1}}}`} (e.g., {exampleVal})
                    </label>
                    <input
                      type="text"
                      required
                      value={templateVars[i] || ""}
                      onChange={(e) => setTemplateVars(v => ({ ...v, [i]: e.target.value }))}
                      className="w-full rounded-md border border-zinc-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
                    />
                  </div>
                ))}

                <div className="mt-6 flex justify-end gap-2">
                  <Button variant="outline" onClick={() => setSelectedTemplate(null)}>Back</Button>
                  <Button 
                    onClick={() => sendSpecial("template", selectedTemplate.name)}
                    disabled={sending || 
                      ((selectedTemplate.headerType === "IMAGE" || selectedTemplate.headerType === "VIDEO" || selectedTemplate.headerType === "DOCUMENT") && !headerMediaUrl)
                    }
                  >
                    {sending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
                    Send
                  </Button>
                </div>
              </div>
            )}
          </div>
        </div>
      )}

      {productModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-md rounded-xl bg-card p-5 shadow-xl">
            <div className="mb-4 flex items-center justify-between">
              <h3 className="text-lg font-semibold text-foreground">Send Product</h3>
              <button onClick={() => setProductModalOpen(false)} className="text-muted-foreground hover:text-foreground"><X className="h-5 w-5" /></button>
            </div>
            <div className="max-h-96 space-y-2 overflow-y-auto">
              {products?.length === 0 ? <p className="text-sm text-muted-foreground">No products available.</p> : null}
              {products?.map((p) => (
                <button
                  key={p.id}
                  onClick={() => sendSpecial("product", p.sku || p.id)}
                  disabled={sending}
                  className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left hover:bg-muted disabled:opacity-50"
                >
                  {p.imageUrl ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={p.imageUrl} alt={p.name} className="h-10 w-10 shrink-0 rounded-md object-cover" />
                  ) : (
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground"><Tag className="h-4 w-4" /></div>
                  )}
                  <div className="min-w-0 flex-1">
                    <p className="truncate font-medium text-foreground">{p.name}</p>
                    <p className="text-xs text-muted-foreground">${p.price}</p>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}