"use client";

import { useEffect, useState, useCallback } from "react";
import { getDMMessages, sendDMMessage, DMConversation, Message } from "@/lib/api";
import { Send, ArrowLeft, Users, Loader2, MessageSquare } from "lucide-react";

interface DMViewProps {
  dm: DMConversation;
  onBack?: () => void;
}

function getDisplayName(msg: Message): string {
  return (
    msg.user?.name ||
    msg.user?.display_name ||
    msg.user?.displayName ||
    msg.user?.email ||
    "Unknown"
  );
}

function getMessageText(msg: Message): string {
  return msg.text || msg.content || "";
}

function formatTime(iso: string | undefined): string {
  if (!iso) return "";
  try {
    return new Date(iso).toLocaleTimeString("en-US", {
      hour: "2-digit",
      minute: "2-digit",
    });
  } catch {
    return "";
  }
}

export function DMView({ dm, onBack }: DMViewProps) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [inputText, setInputText] = useState("");
  const [sending, setSending] = useState(false);

  const loadMessages = useCallback(() => {
    setLoading(true);
    setError("");
    getDMMessages(dm.id)
      .then((data) => setMessages(data.messages || []))
      .catch((err) => {
        console.error("Failed to load DM messages:", err);
        setError("Failed to load messages");
      })
      .finally(() => setLoading(false));
  }, [dm.id]);

  useEffect(() => {
    loadMessages();
  }, [loadMessages]);

  const handleSend = () => {
    if (!inputText.trim() || sending) return;
    setSending(true);
    sendDMMessage(dm.id, inputText.trim())
      .then((newMsg) => {
        setMessages((prev) => [...prev, newMsg]);
        setInputText("");
      })
      .catch((err) => {
        console.error("Failed to send DM:", err);
        setError("Failed to send message");
      })
      .finally(() => setSending(false));
  };

  const dmName =
    dm.is_group && dm.name
      ? dm.name
      : (dm.members || [])
          .map((m) => m.display_name || m.name || m.email)
          .join(", ") || "Direct Message";

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center gap-3 px-4 py-3 border-b border-white/10">
        {onBack && (
          <button
            onClick={onBack}
            className="text-white/60 hover:text-white transition-colors"
          >
            <ArrowLeft size={18} />
          </button>
        )}
        <div className="w-8 h-8 rounded-full bg-slack-lightpurple text-white flex items-center justify-center text-xs font-bold">
          {dm.is_group ? <Users size={14} /> : (dmName[0] || "D").toUpperCase()}
        </div>
        <div className="flex-1 min-w-0">
          <h2 className="text-sm font-semibold text-white truncate">{dmName}</h2>
          {dm.is_group && dm.members && (
            <p className="text-xs text-white/50">
              {dm.members.length} members
            </p>
          )}
        </div>
      </div>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-3">
        {loading ? (
          <div className="flex items-center justify-center text-white/40 py-12">
            <Loader2 size={20} className="animate-pulse" />
          </div>
        ) : error ? (
          <div className="flex items-center justify-center text-slack-red py-12 text-sm">
            {error}
          </div>
        ) : messages.length === 0 ? (
          <div className="flex flex-col items-center justify-center text-white/40 py-12">
            <MessageSquare size={32} className="mb-3 opacity-50" />
            <p className="text-sm">No messages yet. Start the conversation!</p>
          </div>
        ) : (
          messages.map((msg) => {
            const text = getMessageText(msg);
            const name = getDisplayName(msg);
            const ts = msg.created_at || msg.createdAt || msg.ts;
            return (
              <div key={msg.id} className="flex gap-2">
                <div className="w-7 h-7 rounded-full bg-slack-purple text-white flex items-center justify-center text-[10px] font-bold flex-shrink-0">
                  {name[0]?.toUpperCase() || "U"}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-baseline gap-2">
                    <span className="text-sm font-semibold text-white">
                      {name}
                    </span>
                    {ts && (
                      <span className="text-xs text-white/40">
                        {formatTime(ts)}
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-gray-200 break-words whitespace-pre-wrap mt-0.5">
                    {text}
                  </p>
                </div>
              </div>
            );
          })
        )}
      </div>

      {/* Input */}
      <div className="border-t border-white/10 p-3">
        <div className="flex items-center gap-2">
          <input
            type="text"
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey) {
                e.preventDefault();
                handleSend();
              }
            }}
            placeholder="Type a message..."
            disabled={sending}
            className="flex-1 px-3 py-2 rounded-md bg-white/10 text-white placeholder-white/40 text-sm focus:outline-none focus:ring-2 focus:ring-slack-lightpurple disabled:opacity-50"
          />
          <button
            onClick={handleSend}
            disabled={sending || !inputText.trim()}
            className="p-2 rounded-md bg-slack-purple text-white hover:bg-slack-darkpurple transition-colors disabled:opacity-50"
          >
            <Send size={16} />
          </button>
        </div>
      </div>
    </div>
  );
}

export default DMView;