"use client";

import { useEffect, useState } from "react";
import { Search, X } from "lucide-react";
import { Avatar } from "./Avatar";
import { useEscapeKey } from "@/lib/use-escape-key";
import type { User } from "@/lib/types";

/** Pick someone to start a conversation with. */
export function NewMessageModal({
  onClose,
  onPicked,
}: {
  onClose: () => void;
  onPicked: (user: User) => void;
}) {
  const [q, setQ] = useState("");
  const [people, setPeople] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);

  // With no query, show suggestions so the list is never empty.
  useEffect(() => {
    const term = q.trim();
    setLoading(true);
    const t = setTimeout(async () => {
      const url = term.length >= 1 ? `/api/search?q=${encodeURIComponent(term)}` : "/api/users/suggested";
      const r = await fetch(url).catch(() => null);
      if (r && r.ok) {
        const d = await r.json();
        setPeople(Array.isArray(d) ? d : (d.users ?? []));
      }
      setLoading(false);
    }, 220);
    return () => clearTimeout(t);
  }, [q]);

  useEscapeKey(onClose);

  return (
    <div className="nm-back" onClick={onClose}>
      <div className="nm-card" onClick={(e) => e.stopPropagation()}>
        <div className="nm-head">
          <button onClick={onClose} className="nm-x" title="Close">
            <X size={18} />
          </button>
          <span className="nm-title">New Message</span>
          <span className="w-8" />
        </div>

        <div className="nm-search">
          <Search size={16} className="text-neutral-400 shrink-0" />
          <input
            autoFocus
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search people..."
            className="flex-1 bg-transparent outline-none text-sm min-w-0"
          />
        </div>

        <div className="nm-list">
          {people.map((u) => (
            <button key={u.id} onClick={() => onPicked(u)} className="nm-row">
              <Avatar user={u} size={44} />
              <span className="min-w-0 text-left">
                <span className="block text-[15px] font-bold truncate">{u.name}</span>
                {u.bio && (
                  <span className="block text-xs text-neutral-400 truncate">{u.bio}</span>
                )}
              </span>
            </button>
          ))}
          {!loading && people.length === 0 && (
            <p className="text-sm text-neutral-400 text-center py-10">No one matched that.</p>
          )}
        </div>
      </div>
    </div>
  );
}