src/pages/Inbox.tsx

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "../lib/apiClient";
import { 
  Inbox as InboxIcon, 
  Search, 
  Send, 
  Sparkles, 
  CheckCircle2, 
  AlertCircle, 
  Clock, 
  Mail, 
  Calendar, 
  User, 
  Building, 
  ChevronRight, 
  Paperclip,
  Smile,
  RefreshCw
} from "lucide-react";
import { useState } from "react";
import DOMPurify from "dompurify";
import StatusBadge from "../components/StatusBadge";
import RichTextEditor from "../components/RichTextEditor";
import toast from "react-hot-toast";

const CATEGORIES = [
  { key: "ALL", label: "All Messages" },
  { key: "INTERESTED", label: "Interested" },
  { key: "MEETING_BOOKED", label: "Meeting Booked" },
  { key: "REPLIED", label: "Replied" },
  { key: "NOT_INTERESTED", label: "Not Interested" },
];

export default function Inbox() {
  const queryClient = useQueryClient();
  const [selectedCategory, setSelectedCategory] = useState("ALL");
  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
  const [replyBody, setReplyBody] = useState("");

  const { data: messages = [], isLoading, isError, refetch } = useQuery({
    queryKey: ["inbox-messages", selectedCategory],
    queryFn: async () => {
      const res = await apiClient.get("/inbox", {
        params: selectedCategory !== "ALL" ? { category: selectedCategory } : {},
      });
      return res.data;
    },
  });

  const selectedMessage = (Array.isArray(messages) ? messages : []).find((m: any) => m.id === selectedMessageId) || (Array.isArray(messages) ? messages[0] : null);

  const updateCategoryMutation = useMutation({
    mutationFn: async ({ messageId, category }: { messageId: string; category: string }) => {
      const res = await apiClient.post("/inbox/categorize", { thread_id: messageId, category });
      return res.data;
    },
    onSuccess: () => {
      toast.success("Lead categorization updated");
      queryClient.invalidateQueries({ queryKey: ["inbox-messages"] });
    },
    onError: () => {
      toast.error("Failed to update lead category");
    },
  });

  const sendReplyMutation = useMutation({
    mutationFn: async ({ campaignId, messageId, body }: { campaignId: string; messageId: string; body: string }) => {
      const res = await apiClient.post(`/campaigns/${campaignId}/reply-email-thread`, { thread_id: messageId, reply_body: body });
      return res.data;
    },
    onSuccess: () => {
      toast.success("Reply dispatched to lead");
      setReplyBody("");
      queryClient.invalidateQueries({ queryKey: ["inbox-messages"] });
    },
    onError: () => {
      toast.error("Failed to send reply");
    }
  });

  return (
    <div className="h-[calc(100vh-4rem)] flex flex-col overflow-hidden">
      {/* Top Controls */}
      <div className="h-14 border-b border-zinc-800 bg-zinc-950 px-6 flex items-center justify-between shrink-0">
        <div className="flex items-center gap-3">
          <div className="p-1.5 bg-indigo-500/10 text-indigo-400 rounded-lg">
            <InboxIcon className="w-5 h-5" />
          </div>
          <div>
            <h1 className="text-base font-bold text-zinc-100 flex items-center gap-2">
              Unified Master Inbox
              <span className="text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full">
                AI Sentiment Active
              </span>
            </h1>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <button
            onClick={() => refetch()}
            className="p-1.5 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900 rounded-lg transition-colors"
            title="Refresh Inboxes"
          >
            <RefreshCw className="w-4 h-4" />
          </button>
        </div>
      </div>

      {/* 2-Pane Inbox Workspace */}
      <div className="flex-1 flex overflow-hidden">
        {/* Left Pane: Message List */}
        <div className="w-80 md:w-96 border-r border-zinc-800 flex flex-col bg-zinc-950/60 shrink-0">
          {/* Categories Filter Tabs */}
          <div className="p-3 border-b border-zinc-800 flex gap-1 overflow-x-auto">
            {CATEGORIES.map((cat) => (
              <button
                key={cat.key}
                onClick={() => setSelectedCategory(cat.key)}
                className={`px-2.5 py-1 rounded-md text-xs font-medium whitespace-nowrap transition-colors ${
                  selectedCategory === cat.key
                    ? "bg-indigo-600 text-white"
                    : "bg-zinc-900 text-zinc-400 hover:text-zinc-200"
                }`}
              >
                {cat.label}
              </button>
            ))}
          </div>

          {/* Messages Scroll Area */}
          <div className="flex-1 overflow-y-auto divide-y divide-zinc-800/60">
            {isLoading && (
              <div className="p-8 text-center text-xs text-zinc-400" role="status">Loading message threads…</div>
            )}

            {isError && (
              <div className="p-8 text-center text-xs text-rose-300" role="alert">Unable to load message threads.</div>
            )}

            {!isLoading && !isError && messages.map((msg: any) => {
              const isSelected = msg.id === selectedMessage?.id;
              return (
                <div
                  key={msg.id}
                  onClick={() => setSelectedMessageId(msg.id)}
                  onKeyDown={(event) => {
                    if (event.key === "Enter" || event.key === " ") setSelectedMessageId(msg.id);
                  }}
                  role="button"
                  tabIndex={0}
                  aria-pressed={isSelected}
                  className={`p-4 transition-colors cursor-pointer ${
                    isSelected ? "bg-indigo-950/30 border-l-2 border-indigo-500" : "hover:bg-zinc-900/40"
                  }`}
                >
                  <div className="flex items-start justify-between gap-2">
                    <span className="font-semibold text-xs text-zinc-100 truncate">
                      {msg.lead_name || msg.lead_email}
                    </span>
                    <span className="text-[10px] text-zinc-500 shrink-0">
                      {new Date(msg.received_at || Date.now()).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
                    </span>
                  </div>

                  <h4 className="text-xs font-medium text-zinc-300 mt-1 truncate">
                    {msg.subject}
                  </h4>

                  <p className="text-[11px] text-zinc-500 mt-1 line-clamp-2 leading-relaxed">
                    {msg.messages?.at(-1)?.body_html?.replace(/<[^>]*>?/gm, "") || "No message preview available"}
                  </p>

                  <div className="mt-2.5 flex items-center justify-between">
                    <StatusBadge status={msg.category || "REPLIED"} size="sm" />
                    <span className="text-[10px] text-zinc-400 font-mono">
                      {msg.company_name}
                    </span>
                  </div>
                </div>
              );
            })}

            {messages.length === 0 && (
              <div className="p-8 text-center text-xs text-zinc-500">
                No replies found for this category filter.
              </div>
            )}
          </div>
        </div>

        {/* Right Pane: Thread View & Response Composer */}
        {selectedMessage ? (
          <div className="flex-1 flex flex-col bg-zinc-950 overflow-hidden">
            {/* Thread Header */}
            <div className="p-5 border-b border-zinc-800 bg-zinc-900/30 flex items-center justify-between shrink-0">
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-full bg-indigo-600/20 text-indigo-400 flex items-center justify-center font-bold text-sm border border-indigo-500/30">
                  {selectedMessage.lead_name ? selectedMessage.lead_name[0] : "L"}
                </div>
                <div>
                  <h3 className="text-sm font-bold text-zinc-100 flex items-center gap-2">
                    {selectedMessage.subject}
                  </h3>
                  <div className="text-xs text-zinc-400 flex items-center gap-2 mt-0.5">
                    <span>{selectedMessage.lead_name} &lt;{selectedMessage.lead_email}&gt;</span>
                    <span>•</span>
                    <span className="font-mono text-zinc-500">{selectedMessage.company_name}</span>
                  </div>
                </div>
              </div>

              {/* Categorization Dropdown */}
              <div className="flex items-center gap-2">
                <span className="text-xs text-zinc-500">AI Intent:</span>
                <select
                  value={selectedMessage.category || "REPLIED"}
                  onChange={(e) =>
                    updateCategoryMutation.mutate({
                      messageId: selectedMessage.id,
                      category: e.target.value,
                    })
                  }
                  className="bg-zinc-900 border border-zinc-800 rounded-lg py-1.5 px-3 text-xs text-zinc-200 focus:outline-none focus:border-indigo-500"
                >
                  <option value="INTERESTED">Interested</option>
                  <option value="MEETING_BOOKED">Meeting Booked</option>
                  <option value="REPLIED">Replied</option>
                  <option value="NOT_INTERESTED">Not Interested</option>
                </select>
              </div>
            </div>

            {/* Conversation Messages */}
            <div className="flex-1 overflow-y-auto p-6 space-y-4">
              {(selectedMessage.messages || []).map((message: any) => {
                const isInbound = message.direction === "INBOUND";
                return (
                  <div key={message.id} className={`max-w-2xl ${isInbound ? "ml-auto bg-indigo-950/40 border-indigo-500/30" : "bg-zinc-900 border-zinc-800"} border rounded-xl p-4 text-xs space-y-2`}>
                    <div className={`flex items-center justify-between ${isInbound ? "text-indigo-300 border-indigo-500/20" : "text-zinc-400 border-zinc-800"} pb-2 border-b`}>
                      <span className="font-semibold">{isInbound ? "Prospect reply" : "Outbound message"}</span>
                      <span className="text-[10px] text-zinc-400">{new Date(message.timestamp).toLocaleString()}</span>
                    </div>
                    <div
                      className="text-zinc-200 leading-relaxed prose prose-invert max-w-none text-xs"
                      dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(message.body_html || "") }}
                    />
                  </div>
                );
              })}
            </div>

            {/* Reply Composer Bottom Section */}
            <div className="p-4 border-t border-zinc-800 bg-zinc-950 shrink-0 space-y-3">
              <RichTextEditor
                content={replyBody}
                onChange={setReplyBody}
                placeholder="Compose your reply or insert calendar meeting booking link..."
              />

              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <button
                    type="button"
                    onClick={() => setReplyBody("<p>Hi, how does Tuesday at 2 PM EST work for a quick 15-min call? Here is my calendar: https://cal.com/alex/15min</p>")}
                    className="px-2.5 py-1 bg-zinc-900 hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 border border-zinc-800 rounded-md text-[11px] transition-colors"
                  >
                    + Insert Booking Link
                  </button>
                  <button
                    type="button"
                    onClick={() => setReplyBody("<p>Thanks for getting back to me! I have attached our case study PDF here.</p>")}
                    className="px-2.5 py-1 bg-zinc-900 hover:bg-zinc-800 text-zinc-400 hover:text-zinc-200 border border-zinc-800 rounded-md text-[11px] transition-colors"
                  >
                    + Insert Case Study
                  </button>
                </div>

                <button
                  type="button"
                  onClick={() => {
                    if (!replyBody) {
                      toast.error("Please write a reply message");
                      return;
                    }
                    sendReplyMutation.mutate({
                      campaignId: selectedMessage.campaign_id,
                      messageId: selectedMessage.id,
                      body: replyBody,
                    });
                  }}
                  className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white font-medium text-xs rounded-lg transition-colors flex items-center gap-2 shadow-md"
                >
                  <Send className="w-3.5 h-3.5" /> Send Reply
                </button>
              </div>
            </div>
          </div>
        ) : (
          <div className="flex-1 flex items-center justify-center text-xs text-zinc-500">
            Select a message thread from the left pane to view conversation.
          </div>
        )}
      </div>
    </div>
  );
}