import { useEffect, useState } from 'react';
import { Send, Users } from 'lucide-react';
import { api } from '../lib/api.js';

function cx(...args) {
  return args.filter(Boolean).join(' ');
}

export default function CustomersManager() {
  const [customers, setCustomers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [selectedId, setSelectedId] = useState(null);
  const [thread, setThread] = useState([]);
  const [threadLoading, setThreadLoading] = useState(false);
  const [reply, setReply] = useState('');
  const [sending, setSending] = useState(false);

  async function loadCustomers() {
    setLoading(true);
    setCustomers(await api.adminGetCustomers());
    setLoading(false);
  }

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

  async function openCustomer(id) {
    setSelectedId(id);
    setThreadLoading(true);
    setThread(await api.adminGetCustomerMessages(id));
    setThreadLoading(false);
  }

  async function sendReply(e) {
    e.preventDefault();
    const text = reply.trim();
    if (!text || sending || !selectedId) return;
    setSending(true);
    try {
      const msg = await api.adminSendCustomerMessage(selectedId, text);
      setThread((t) => [...t, msg]);
      setReply('');
      loadCustomers();
    } finally {
      setSending(false);
    }
  }

  const selected = customers.find((c) => c.id === selectedId);

  if (loading) return <p className="text-sm text-slate-400">Загружаем клиентов...</p>;

  return (
    <div>
      <h1 className="font-bold mb-1 font-display text-lg flex items-center gap-2">
        <Users className="h-5 w-5 text-emerald-500" /> Клиенты
      </h1>
      <p className="text-xs text-slate-400 dark:text-slate-500 mb-5">
        Переписка из личных кабинетов зарегистрированных клиентов.
      </p>

      <div className="grid md:grid-cols-[260px_1fr] gap-5">
        <div className="space-y-2">
          {customers.length === 0 && <p className="text-sm text-slate-400">Пока нет зарегистрированных клиентов.</p>}
          {customers.map((c) => (
            <button
              key={c.id}
              onClick={() => openCustomer(c.id)}
              className={cx(
                'w-full text-left rounded-lg border p-3 transition-colors bg-white dark:bg-slate-900',
                selectedId === c.id
                  ? 'border-emerald-500'
                  : 'border-slate-200 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'
              )}
            >
              <div className="flex items-center justify-between gap-2">
                <span className="text-sm font-medium truncate">{c.name}</span>
                {c.last_message_sender === 'customer' && (
                  <span className="text-xs px-1.5 py-0.5 rounded-full bg-amber-500 text-white flex-shrink-0">ждёт ответа</span>
                )}
              </div>
              <div className="text-xs text-slate-400 dark:text-slate-500 truncate">{c.email}</div>
              {c.last_message_body && (
                <div className="text-xs text-slate-500 dark:text-slate-400 truncate mt-1">{c.last_message_body}</div>
              )}
            </button>
          ))}
        </div>

        <div>
          {!selectedId && <p className="text-sm text-slate-400">Выберите клиента слева, чтобы увидеть переписку.</p>}
          {selectedId && (
            <div className="flex flex-col h-[70vh]">
              <h2 className="text-sm font-medium mb-3">
                {selected?.name} <span className="text-slate-400 font-normal">· {selected?.email}</span>
              </h2>
              <div className="flex-1 overflow-y-auto rounded-lg border p-4 space-y-3 bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-800 mb-3">
                {threadLoading && <p className="text-sm text-slate-400">Загружаем переписку...</p>}
                {!threadLoading && thread.length === 0 && <p className="text-sm text-slate-400">Сообщений пока нет.</p>}
                {thread.map((m) => (
                  <div
                    key={m.id}
                    className={cx(
                      'max-w-[85%] rounded-lg px-3 py-2 text-sm whitespace-pre-wrap',
                      m.sender === 'staff' ? 'ml-auto bg-emerald-500 text-white' : 'bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-100'
                    )}
                  >
                    {m.body}
                  </div>
                ))}
              </div>
              <form onSubmit={sendReply} className="flex gap-2">
                <input
                  value={reply}
                  onChange={(e) => setReply(e.target.value)}
                  placeholder="Ответить клиенту..."
                  className="flex-1 rounded-md border px-3 py-2 text-sm bg-transparent border-slate-300 dark:border-slate-700"
                />
                <button
                  type="submit"
                  disabled={sending}
                  className="px-4 py-2 rounded-md bg-emerald-500 text-white text-sm font-medium hover:bg-emerald-600 disabled:opacity-50 inline-flex items-center gap-1"
                >
                  <Send className="h-4 w-4" />
                </button>
              </form>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}