"use client";

import { useEffect, useState, useCallback } from "react";
import { getDMs, DMConversation } from "@/lib/api";
import { MessageSquare, Plus, Users, RefreshCw } from "lucide-react";

interface DMListProps {
  onSelect?: (dm: DMConversation) => void;
  selectedId?: string;
}

function getDMName(dm: DMConversation): string {
  if (dm.is_group && dm.name) return dm.name;
  const otherMembers = (dm.members || []).filter((m) => m);
  if (otherMembers.length > 0) {
    return otherMembers.map((m) => m.display_name || m.name || m.email).join(", ");
  }
  return dm.name || "Direct Message";
}

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

function formatTime(iso: string | undefined): string {
  if (!iso) return "";
  try {
    const d = new Date(iso);
    const now = new Date();
    const diff = Math.floor((now.getTime() - d.getTime()) / 1000);
    if (diff < 60) return "now";
    if (diff < 3600) return `${Math.floor(diff / 60)}m`;
    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
    return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
  } catch {
    return "";
  }
}

export function DMList({ onSelect, selectedId }: DMListProps) {
  const [dms, setDMs] = useState<DMConversation[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  const loadDMs = useCallback(() => {
    setLoading(true);
    setError("");
    getDMs()
      .then((data) => setDMs(Array.isArray(data) ? data : []))
      .catch((err) => {
        console.error("Failed to load DMs:", err);
        setError("Failed to load direct messages");
      })
      .finally(() => setLoading(false));
  }, []);

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

  if (loading) {
    return (
      <div className="py-2">
        <div className="px-3 py-1 text-xs font-semibold text-white/50 uppercase tracking-wide flex items-center justify-between">
          <span>Direct Messages</span>
          <RefreshCw size={12} className="opacity-50 animate-pulse" />
        </div>
        <div className="px-4 py-3 text-sm text-white/40 animate-pulse">
          Loading conversations...
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="py-2">
        <div className="px-3 py-1 text-xs font-semibold text-white/50 uppercase tracking-wide">
          Direct Messages
        </div>
        <div className="px-4 py-3 text-sm text-slack-red">
          {error}
          <button
            onClick={loadDMs}
            className="ml-2 text-white/50 hover:text-white underline"
          >
            Retry
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="py-2">
      <div className="px-3 py-1 text-xs font-semibold text-white/50 uppercase tracking-wide flex items-center justify-between">
        <span>Direct Messages</span>
        <button
          onClick={loadDMs}
          className="text-white/40 hover:text-white transition-colors"
          title="Refresh"
        >
          <RefreshCw size={12} />
        </button>
      </div>
      {dms.length === 0 ? (
        <div className="px-4 py-3 text-sm text-white/40">
          <p>No direct messages yet.</p>
          <button
            className="mt-2 flex items-center gap-1 text-white/60 hover:text-white text-xs"
          >
            <Plus size={12} />
            Start a conversation
          </button>
        </div>
      ) : (
        <ul>
          {dms.map((dm) => {
            const isActive = dm.id === selectedId;
            const displayName = getDMName(dm);
            const initials = getInitials(displayName || "DM");
            return (
              <li key={dm.id}>
                <button
                  onClick={() => onSelect?.(dm)}
                  className={`w-full flex items-center gap-2 px-3 py-1.5 text-sm text-left transition-colors ${
                    isActive
                      ? "bg-white/15 text-white font-medium"
                      : "text-white/70 hover:bg-white/5 hover:text-white"
                  }`}
                >
                  {/* Avatar */}
                  <div className="relative flex-shrink-0">
                    <div className="w-5 h-5 rounded-full bg-slack-lightpurple text-white flex items-center justify-center text-[10px] font-bold">
                      {dm.is_group ? (
                        <Users size={10} />
                      ) : (
                        initials
                      )}
                    </div>
                  </div>
                  <div className="flex-1 min-w-0">
                    <span className="truncate block flex items-center justify-between">
                      <span className="truncate">{displayName}</span>
                      {dm.unread_count && dm.unread_count > 0 ? (
                        <span className="ml-1.5 inline-flex items-center justify-center w-4 h-4 rounded-full bg-slack-red text-white text-[9px] font-bold flex-shrink-0">
                          {dm.unread_count}
                        </span>
                      ) : null}
                    </span>
                    {dm.last_message?.text ? (
                      <span className="block truncate text-xs text-white/40">
                        {dm.last_message.text}
                      </span>
                    ) : null}
                  </div>
                  {dm.last_message?.created_at && (
                    <span className="text-[10px] text-white/30 flex-shrink-0">
                      {formatTime(dm.last_message.created_at)}
                    </span>
                  )}
                </button>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}

export default DMList;