"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { Send, Plus, Users, Search, ArrowLeft } from "lucide-react";
import { createBrowserClient } from "@supabase/ssr";
import {
  fetchConversations,
  fetchMessages,
  sendMessage,
  createOrFindConversation,
  fetchOrgMembers,
  type ConversationSummary,
  type Message,
} from "@/lib/supabase/comms-actions";
import PageSkeleton from "./PageSkeleton";

const supabase = createBrowserClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

function formatTime(dateStr: string): string {
  const d = new Date(dateStr);
  const now = new Date();
  const diff = now.getTime() - d.getTime();
  if (diff < 86400000) return d.toLocaleTimeString("en-AU", { hour: "2-digit", minute: "2-digit" });
  return d.toLocaleDateString("en-AU", { day: "numeric", month: "short" });
}

function getInitials(name: string): string {
  return name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
}

export default function CommsPage() {
  const [conversations, setConversations] = useState<ConversationSummary[]>([]);
  const [activeConvo, setActiveConvo] = useState<string | null>(null);
  const [messages, setMessages] = useState<Message[]>([]);
  const [newMessage, setNewMessage] = useState("");
  const [showPeoplePicker, setShowPeoplePicker] = useState(false);
  const [members, setMembers] = useState<{ id: string; name: string; email: string; role: string }[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchMember, setSearchMember] = useState("");
  const [userId, setUserId] = useState<string>("");
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    let cancelled = false;

    // Get Clerk user ID
    fetch("/api/me")
      .then((r) => r.json())
      .then((d) => { if (d.userId) setUserId(d.userId); })
      .catch(() => {});

    fetchConversations()
      .then((convos) => { if (!cancelled) setConversations(convos); })
      .catch(() => {})
      .finally(() => { if (!cancelled) setLoading(false); });

    return () => { cancelled = true; };
  }, []);

  // Real-time subscription for new messages
  useEffect(() => {
    if (!activeConvo) return;

    const channel = supabase
      .channel(`messages:${activeConvo}`)
      .on(
        "postgres_changes",
        { event: "INSERT", schema: "public", table: "messages", filter: `conversation_id=eq.${activeConvo}` },
        (payload) => {
          const newMsg = payload.new as any;
          setMessages((prev) => [...prev, {
            id: newMsg.id,
            conversation_id: newMsg.conversation_id,
            sender_id: newMsg.sender_id,
            sender_name: "",
            sender_role: null,
            body: newMsg.body,
            created_at: newMsg.created_at,
            read_at: null,
          }]);
        }
      )
      .subscribe();

    return () => { supabase.removeChannel(channel); };
  }, [activeConvo]);

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

  const openConversation = useCallback(async (convoId: string) => {
    setActiveConvo(convoId);
    try {
      const msgs = await fetchMessages(convoId);
      setMessages(msgs);
    } catch {}
  }, []);

  const handleSendMessage = async () => {
    if (!activeConvo || !newMessage.trim()) return;
    const body = newMessage.trim();
    setNewMessage("");
    try {
      await sendMessage(activeConvo, body);
    } catch {}
  };

  const handleStartConversation = async (participantId: string) => {
    try {
      const result = await createOrFindConversation(participantId);
      if (result.conversationId) {
        setShowPeoplePicker(false);
        await openConversation(result.conversationId);
        // Refresh conversation list
        const convos = await fetchConversations();
        setConversations(convos);
      }
    } catch {}
  };

  const openPeoplePicker = async () => {
    setShowPeoplePicker(true);
    try {
      const m = await fetchOrgMembers();
      setMembers(m);
    } catch {}
  };

  const filteredMembers = members.filter((m) =>
    m.name.toLowerCase().includes(searchMember.toLowerCase()) ||
    m.email.toLowerCase().includes(searchMember.toLowerCase())
  );

  if (loading) return <PageSkeleton name="Comms" />;

  return (
    <div className="p-6 lg:p-8 h-[calc(100vh-4rem)]">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">Comms</h1>
          <p className="text-gray-500 mt-1">Direct messaging for your team</p>
        </div>
        <button
          onClick={openPeoplePicker}
          className="flex items-center gap-2 px-4 py-2 bg-[#1D9E75] text-white text-sm font-medium rounded-lg hover:bg-[#1a8b66] transition-colors cursor-pointer"
        >
          <Plus className="w-4 h-4" />
          New message
        </button>
      </div>

      <div className="flex gap-4 h-[calc(100%-6rem)]">
        {/* Conversation List */}
        <div className="w-72 bg-white border border-gray-200 rounded-xl overflow-hidden flex flex-col flex-shrink-0">
          <div className="p-3 border-b border-gray-100">
            <h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Messages</h2>
          </div>
          <div className="flex-1 overflow-y-auto">
            {conversations.length === 0 ? (
              <div className="flex flex-col items-center justify-center py-12 text-center px-4">
                <Users className="w-8 h-8 text-gray-200 mb-2" />
                <p className="text-xs text-gray-400">No conversations yet</p>
              </div>
            ) : (
              conversations.map((c) => (
                <button
                  key={c.id}
                  onClick={() => openConversation(c.id)}
                  className={`w-full text-left px-4 py-3 border-b border-gray-50 hover:bg-gray-50 transition-colors cursor-pointer ${
                    activeConvo === c.id ? "bg-teal-50" : ""
                  }`}
                >
                  <div className="flex items-center gap-2.5">
                    <div className="w-8 h-8 rounded-full bg-[#1D9E75] flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
                      {getInitials(c.participant_name)}
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-gray-900 truncate">{c.participant_name}</p>
                      {c.last_message && (
                        <p className="text-xs text-gray-400 truncate">{c.last_message}</p>
                      )}
                    </div>
                    {c.last_message_at && (
                      <span className="text-[10px] text-gray-400 flex-shrink-0">{formatTime(c.last_message_at)}</span>
                    )}
                  </div>
                </button>
              ))
            )}
          </div>
        </div>

        {/* Message Area */}
        <div className="flex-1 bg-white border border-gray-200 rounded-xl flex flex-col overflow-hidden">
          {activeConvo ? (
            <>
              {/* Messages */}
              <div className="flex-1 overflow-y-auto p-4 space-y-3">
                {messages.map((m) => {
                  const isMine = m.sender_id === userId;
                  return (
                    <div key={m.id} className={`flex ${isMine ? "justify-end" : "justify-start"}`}>
                      <div className={`max-w-[70%] rounded-2xl px-4 py-2.5 ${
                        isMine
                          ? "bg-[#1D9E75] text-white rounded-br-md"
                          : "bg-gray-100 text-gray-900 rounded-bl-md"
                      }`}>
                        {!isMine && (
                          <div className="flex items-center gap-1.5 mb-0.5">
                            <p className="text-[10px] font-medium text-gray-500">{m.sender_name}</p>
                            {m.sender_role && (
                              <span className="text-[9px] bg-teal-100 text-teal-700 px-1.5 py-0.5 rounded-full font-medium">
                                {m.sender_role}
                              </span>
                            )}
                          </div>
                        )}
                        <p className="text-sm leading-relaxed">{m.body}</p>
                        <p className={`text-[10px] mt-1 ${isMine ? "text-white/60" : "text-gray-400"}`}>
                          {formatTime(m.created_at)}
                        </p>
                      </div>
                    </div>
                  );
                })}
                <div ref={messagesEndRef} />
              </div>

              {/* Message Input */}
              <div className="border-t border-gray-100 p-3 flex items-center gap-2">
                <input
                  value={newMessage}
                  onChange={(e) => setNewMessage(e.target.value)}
                  onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }}
                  placeholder="Type a message..."
                  className="flex-1 border border-gray-200 rounded-full px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                />
                <button
                  onClick={handleSendMessage}
                  disabled={!newMessage.trim()}
                  className="p-2.5 bg-[#1D9E75] text-white rounded-full hover:bg-[#1a8b66] disabled:opacity-50 disabled:cursor-not-allowed transition-colors cursor-pointer"
                >
                  <Send className="w-4 h-4" />
                </button>
              </div>
            </>
          ) : (
            <div className="flex-1 flex items-center justify-center text-center">
              <div>
                <Users className="w-12 h-12 text-gray-200 mx-auto mb-3" />
                <p className="text-sm text-gray-400 font-medium">Select a conversation</p>
                <p className="text-xs text-gray-300 mt-1">Or start a new one</p>
              </div>
            </div>
          )}
        </div>
      </div>

      {/* People Picker Modal */}
      {showPeoplePicker && (
        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50" onClick={() => setShowPeoplePicker(false)}>
          <div className="bg-white rounded-xl shadow-xl w-full max-w-sm p-5" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-sm font-semibold text-gray-900">New message</h3>
              <button onClick={() => setShowPeoplePicker(false)} className="p-1 hover:bg-gray-100 rounded cursor-pointer">
                <ArrowLeft className="w-4 h-4 text-gray-400" />
              </button>
            </div>
            <div className="relative mb-3">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
              <input
                value={searchMember}
                onChange={(e) => setSearchMember(e.target.value)}
                placeholder="Search people..."
                className="w-full pl-10 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
              />
            </div>
            <div className="max-h-60 overflow-y-auto space-y-1">
              {filteredMembers.map((m) => (
                <button
                  key={m.id}
                  onClick={() => handleStartConversation(m.id)}
                  className="w-full text-left px-3 py-2.5 hover:bg-gray-50 rounded-lg transition-colors cursor-pointer flex items-center gap-3 group"
                >
                  <div className="w-8 h-8 rounded-full bg-[#1D9E75] flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">
                    {getInitials(m.name)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between">
                      <p className="text-sm font-medium text-gray-900 truncate">{m.name}</p>
                      <span className="text-[9px] bg-teal-100 text-teal-700 px-1.5 py-0.5 rounded-full font-medium uppercase tracking-wider">
                        {m.role.replace("_", " ")}
                      </span>
                    </div>
                    <p className="text-xs text-gray-400 truncate">{m.email}</p>
                  </div>
                </button>
              ))}
              {filteredMembers.length === 0 && (
                <p className="text-xs text-gray-400 text-center py-4">No one found</p>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
}