'use client';

import { useEffect, useMemo, useRef, useState } from 'react';
import { Download, Headphones, MessageCircle, Package, RefreshCw, Search, Send, Settings, ShieldBan, Trash2, X } from 'lucide-react';
import { api } from '@/lib/api';
import { useAuthStore } from '@/store/authStore';

type InboxKind = 'SUPPORT' | 'ORDER';
type InboxItem = {
  key: string;
  kind: InboxKind;
  title: string;
  subtitle: string;
  preview: string;
  time?: string;
  unread: boolean;
  raw: any;
};

const formatTime = (value?: string) => value ? new Date(value).toLocaleString('vi-VN', { dateStyle: 'short', timeStyle: 'short' }) : '';
const shortOrder = (id?: string) => `#${id?.slice(0, 8).toUpperCase() || ''}`;

export default function ChatCenter() {
  const user = useAuthStore((state) => state.user);
  const [rooms, setRooms] = useState<any[]>([]);
  const [orderRequests, setOrderRequests] = useState<any[]>([]);
  const [active, setActive] = useState<InboxItem | null>(null);
  const [messages, setMessages] = useState<any[]>([]);
  const [text, setText] = useState('');
  const [filter, setFilter] = useState<'ALL' | InboxKind>('ALL');
  const [query, setQuery] = useState('');
  const [notice, setNotice] = useState('');
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [bannedWordsText, setBannedWordsText] = useState('');
  const [allowedDomainsText, setAllowedDomainsText] = useState('shopmmo.com.vn, localhost, 127.0.0.1');
  const [botEnabled, setBotEnabled] = useState(true);
  const [blockExternalLinks, setBlockExternalLinks] = useState(true);
  const [bannedUsers, setBannedUsers] = useState<any[]>([]);
  const scrollRef = useRef<HTMLDivElement | null>(null);

  const loadInbox = async () => {
    const [roomResponse, orderResponse] = await Promise.all([
      api.get('/chat/admin/conversations'),
      api.get('/orders/admin/chat-requests'),
    ]);
    setRooms(roomResponse.data || []);
    setOrderRequests(orderResponse.data || []);
  };

  const loadModeration = async () => {
    const response = await api.get('/chat/admin/moderation');
    setBannedWordsText((response.data.bannedWords || []).join(', '));
    setAllowedDomainsText((response.data.allowedDomains || []).join(', '));
    setBotEnabled(response.data.enabled !== false);
    setBlockExternalLinks(response.data.blockExternalLinks !== false);
  };

  useEffect(() => {
    void loadInbox().catch(() => setNotice('Không thể tải danh sách hội thoại.'));
    void loadModeration().catch(() => undefined);
  }, []);

  const inbox = useMemo<InboxItem[]>(() => {
    const supportItems = rooms.map((room) => {
      const latest = room.messages?.[0];
      const participants = room.participants?.map((item: any) => item.user?.name).filter(Boolean).join(' · ') || 'Chưa xác định thành viên';
      return {
        key: `room:${room.id}`,
        kind: (room.type === 'SUPPORT' ? 'SUPPORT' : 'ORDER') as InboxKind,
        title: room.type === 'SUPPORT' ? 'Hỗ trợ khách hàng' : `Tranh chấp đơn ${shortOrder(room.orderId)}`,
        subtitle: participants,
        preview: latest?.content || 'Chưa có tin nhắn',
        time: latest?.createdAt || room.updatedAt,
        unread: Number(room.unreadCount || 0) > 0,
        raw: room,
      };
    });
    const requestItems = orderRequests.map((order) => {
      const latest = order.messages?.[0];
      return {
        key: `order:${order.id}`,
        kind: 'ORDER' as const,
        title: `Yêu cầu vào chat đơn ${shortOrder(order.id)}`,
        subtitle: `${order.buyer?.name || 'Buyer'} · ${order.seller?.name || 'Seller'}`,
        preview: latest?.content || 'Cần quản trị viên hỗ trợ',
        time: latest?.createdAt || order.updatedAt,
        unread: true,
        raw: order,
      };
    });
    const knownOrderIds = new Set(requestItems.map((item) => item.raw.id));
    return [...requestItems, ...supportItems.filter((item) => item.kind !== 'ORDER' || !knownOrderIds.has(item.raw.orderId))]
      .sort((a, b) => new Date(b.time || 0).getTime() - new Date(a.time || 0).getTime());
  }, [rooms, orderRequests]);

  const visibleInbox = useMemo(() => inbox.filter((item) => {
    const matchesFilter = filter === 'ALL' || item.kind === filter;
    const term = query.trim().toLocaleLowerCase();
    return matchesFilter && (!term || `${item.title} ${item.subtitle} ${item.preview}`.toLocaleLowerCase().includes(term));
  }), [inbox, filter, query]);

  const openItem = async (item: InboxItem) => {
    setActive(item);
    setMessages([]);
    try {
      if (item.key.startsWith('room:')) {
        const response = await api.get(`/chat/conversations/${item.raw.id}/messages`);
        setMessages(response.data || []);
        await api.post(`/chat/admin/conversations/${item.raw.id}/mark-read`);
        setRooms((current) => current.map((room) => room.id === item.raw.id ? { ...room, unreadCount: 0 } : room));
      } else {
        const response = await api.get(`/orders/${item.raw.id}/messages`);
        setMessages(response.data || []);
      }
    } catch {
      setNotice('Không thể mở hội thoại này.');
    }
  };

  useEffect(() => {
    if (!active) return;
    const refresh = async () => {
      try {
        const response = active.key.startsWith('room:')
          ? await api.get(`/chat/conversations/${active.raw.id}/messages`)
          : await api.get(`/orders/${active.raw.id}/messages`);
        setMessages(response.data || []);
      } catch { /* keep the last successful messages visible */ }
    };
    const timer = window.setInterval(() => void refresh(), 2500);
    return () => window.clearInterval(timer);
  }, [active]);

  useEffect(() => {
    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
  }, [messages, active?.key]);

  const send = async () => {
    if (!active || !text.trim()) return;
    try {
      const response = active.key.startsWith('room:')
        ? await api.post(`/chat/conversations/${active.raw.id}/messages`, { content: text.trim() })
        : await api.post(`/orders/${active.raw.id}/messages`, { content: text.trim() });
      setMessages((current) => [...current, response.data]);
      setText('');
      void loadInbox().catch(() => undefined);
    } catch {
      setNotice('Không thể gửi tin nhắn.');
    }
  };

  const clearGeneral = async () => {
    if (!window.confirm('Xóa toàn bộ tin nhắn trong #General? Hành động này không thể hoàn tác.')) return;
    const response = await api.post('/chat/admin/general/clear');
    setNotice(`Đã xóa ${response.data.deleted || 0} tin nhắn ở #General.`);
  };

  const openSettings = async () => {
    setSettingsOpen(true);
    const response = await api.get('/chat/admin/banned-users');
    setBannedUsers(response.data || []);
  };

  const saveModeration = async () => {
    const bannedWords = bannedWordsText.split(/[\n,]+/).map((word) => word.trim()).filter(Boolean);
    const allowedDomains = allowedDomainsText.split(/[\n,]+/).map((domain) => domain.trim()).filter(Boolean);
    await api.post('/chat/admin/moderation', { enabled: botEnabled, blockExternalLinks, bannedWords, allowedDomains });
    setNotice('Đã lưu cài đặt kiểm duyệt chat tổng.');
    setSettingsOpen(false);
  };

  const unbanGeneral = async (member: any) => {
    await api.post(`/chat/admin/users/${member.id}/chat-ban`, { banned: false });
    setBannedUsers((current) => current.filter((item) => item.id !== member.id));
  };

  const toggleBan = async (participant: any) => {
    const banned = !participant.user?.chatBannedAt;
    if (!window.confirm(`${banned ? 'Cấm' : 'Mở cấm'} chat tổng cho ${participant.user?.name || 'thành viên này'}?`)) return;
    const response = await api.post(`/chat/admin/users/${participant.user.id}/chat-ban`, { banned });
    setActive((current) => current ? {
      ...current,
      raw: {
        ...current.raw,
        participants: current.raw.participants?.map((item: any) => item.user?.id === participant.user.id
          ? { ...item, user: { ...item.user, chatBannedAt: response.data.chatBannedAt } } : item),
      },
    } : current);
  };

  const participantNames = active?.key.startsWith('room:')
    ? active.raw.participants || []
    : active ? [{ id: 'buyer', user: active.raw.buyer }, { id: 'seller', user: active.raw.seller }] : [];

  return (
    <div className="mx-auto flex h-[calc(100vh-118px)] max-w-[1540px] gap-4 p-1">
      <aside className="flex w-[370px] shrink-0 flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#141414] shadow-2xl">
        <div className="border-b border-white/10 p-4">
          <div className="flex items-center justify-between gap-2">
            <div><h1 className="flex items-center gap-2 text-xl font-black"><MessageCircle className="text-violet-300" />Chat Center</h1><p className="mt-1 text-xs text-gray-500">Hộp thư hỗ trợ và đơn cần quản trị viên</p></div>
            <div className="flex gap-1"><button onClick={() => void openSettings()} title="Cài đặt kiểm duyệt" className="rounded-lg border border-white/10 p-2 text-gray-300 hover:bg-white/10"><Settings className="h-4 w-4" /></button><button onClick={() => void clearGeneral()} title="Xóa #General" className="rounded-lg border border-red-400/30 p-2 text-red-300 hover:bg-red-500/10"><Trash2 className="h-4 w-4" /></button></div>
          </div>
          {notice && <p className="mt-3 rounded-lg bg-emerald-500/10 px-3 py-2 text-xs text-emerald-300">{notice}</p>}
          <label className="mt-3 flex items-center gap-2 rounded-xl border border-white/10 bg-black/20 px-3 py-2"><Search className="h-4 w-4 text-gray-500" /><input value={query} onChange={(event) => setQuery(event.target.value)} className="w-full bg-transparent text-sm outline-none" placeholder="Tìm đơn, khách hàng, seller..." /></label>
          <div className="mt-3 grid grid-cols-3 gap-1 rounded-xl bg-black/20 p-1">{([['ALL', 'Tất cả'], ['SUPPORT', 'Hỗ trợ'], ['ORDER', 'Đơn hàng']] as const).map(([value, label]) => <button key={value} onClick={() => setFilter(value)} className={`rounded-lg px-2 py-2 text-xs font-bold ${filter === value ? 'bg-violet-600 text-white' : 'text-gray-400 hover:bg-white/5'}`}>{label}</button>)}</div>
        </div>
        <div className="min-h-0 flex-1 overflow-y-auto p-2">{visibleInbox.length ? visibleInbox.map((item) => <button key={item.key} onClick={() => void openItem(item)} className={`relative mb-1 w-full rounded-xl p-3 text-left transition ${active?.key === item.key ? 'bg-violet-600/20 ring-1 ring-violet-400/40' : 'hover:bg-white/5'}`}><div className="flex items-start gap-3"><span className={`mt-0.5 rounded-lg p-2 ${item.kind === 'SUPPORT' ? 'bg-cyan-500/10 text-cyan-300' : 'bg-amber-500/10 text-amber-300'}`}>{item.kind === 'SUPPORT' ? <Headphones className="h-4 w-4" /> : <Package className="h-4 w-4" />}</span><span className="min-w-0 flex-1"><span className="flex items-center gap-2"><b className="truncate text-sm">{item.title}</b>{item.unread && <i className="h-2 w-2 shrink-0 animate-pulse rounded-full bg-red-500" />}</span><span className="mt-1 block truncate text-xs text-violet-200/80">{item.subtitle}</span><span className="mt-1 block truncate text-xs text-gray-500">{item.preview}</span></span><time className="shrink-0 text-[10px] text-gray-600">{formatTime(item.time)}</time></div></button>) : <div className="p-8 text-center text-sm text-gray-500">Không có hội thoại phù hợp.</div>}</div>
        <div className="border-t border-white/10 p-3"><button onClick={() => void loadInbox().catch(() => setNotice('Không thể tải lại hội thoại.'))} className="flex w-full items-center justify-center gap-2 rounded-xl bg-white/5 py-2 text-xs font-bold text-gray-300 hover:bg-white/10"><RefreshCw className="h-3.5 w-3.5" />Tải lại danh sách ({inbox.length})</button></div>
      </aside>

      <main className="flex min-w-0 flex-1 flex-col overflow-hidden rounded-2xl border border-white/10 bg-[#141414] shadow-2xl">
        {active ? <>
          <header className="border-b border-white/10 px-5 py-4"><div className="flex items-center justify-between gap-3"><div className="min-w-0"><div className="flex items-center gap-2"><span className={`rounded-lg p-2 ${active.kind === 'SUPPORT' ? 'bg-cyan-500/10 text-cyan-300' : 'bg-amber-500/10 text-amber-300'}`}>{active.kind === 'SUPPORT' ? <Headphones className="h-4 w-4" /> : <Package className="h-4 w-4" />}</span><div><h2 className="truncate font-black">{active.title}</h2><p className="truncate text-xs text-gray-500">{active.subtitle}</p></div></div></div><span className="rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-bold text-emerald-300">Đang xử lý</span></div><div className="mt-3 flex flex-wrap gap-2">{participantNames.map((participant: any) => participant.user && <span key={participant.id || participant.user.id} className="flex items-center gap-2 rounded-lg bg-white/5 px-2 py-1 text-xs"><span>{participant.user.name || 'Không rõ tên'} · {participant.user.role?.name || 'Thành viên'}</span>{active.key.startsWith('room:') && !['ADMIN', 'SUPER_ADMIN'].includes(participant.user.role?.name) && <button onClick={() => void toggleBan(participant)} title={participant.user.chatBannedAt ? 'Mở cấm chat tổng' : 'Cấm chat tổng'} className={participant.user.chatBannedAt ? 'text-emerald-300' : 'text-red-300'}><ShieldBan className="h-3.5 w-3.5" /></button>}{participant.user.chatBannedAt && <span className="text-red-300">Đã cấm General</span>}</span>)}</div></header>
          <div ref={scrollRef} className="min-h-0 flex-1 overflow-y-auto bg-[radial-gradient(circle_at_top,rgba(124,58,237,.08),transparent_38%)] px-5 py-5">{messages.length ? messages.map((message) => { const mine = message.senderId === user?.id || message.sender?.id === user?.id; return <div key={message.id} className={`mb-4 flex ${mine ? 'justify-end' : 'justify-start'}`}><article className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-lg ${mine ? 'rounded-br-sm bg-violet-600 text-white' : 'rounded-bl-sm bg-white/8 text-gray-100'}`}><div className={`mb-1 text-[11px] font-bold ${mine ? 'text-violet-100' : 'text-cyan-300'}`}>{mine ? 'Bạn (quản trị viên)' : (message.sender?.name || 'Thành viên')} {message.sender?.role?.name ? `· ${message.sender.role.name}` : ''}</div><p className="whitespace-pre-wrap break-words text-sm leading-6">{message.content}</p>{message.attachment && <a href={`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080/api'}/orders/${active.raw.id}/messages/${message.id}/attachment`} className="mt-2 flex items-center gap-2 rounded-lg bg-black/20 px-2 py-1.5 text-xs underline"><Download className="h-3.5 w-3.5" />Tải {message.attachment.name}</a>}<time className={`mt-2 block text-[10px] ${mine ? 'text-violet-100/70' : 'text-gray-500'}`}>{formatTime(message.createdAt)}</time></article></div>; }) : <div className="grid h-full place-items-center text-sm text-gray-500">Chưa có tin nhắn trong hội thoại này.</div>}</div>
          <div className="border-t border-white/10 p-4"><div className="flex gap-2 rounded-2xl border border-white/10 bg-black/20 p-2"><textarea value={text} onChange={(event) => setText(event.target.value)} onKeyDown={(event) => { if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); void send(); } }} className="min-h-11 flex-1 resize-none bg-transparent px-2 py-2 text-sm outline-none" maxLength={2000} placeholder={active.kind === 'ORDER' ? 'Trả lời cho buyer và seller…' : 'Nhập phản hồi hỗ trợ…'} /><button onClick={() => void send()} disabled={!text.trim()} className="self-end rounded-xl bg-violet-600 p-3 text-white transition hover:bg-violet-500 disabled:cursor-not-allowed disabled:opacity-40"><Send className="h-4 w-4" /></button></div><p className="mt-2 text-[11px] text-gray-600">Enter để gửi · Shift + Enter để xuống dòng</p></div>
        </> : <div className="grid h-full place-items-center p-8 text-center"><div><span className="mx-auto grid h-16 w-16 place-items-center rounded-2xl bg-violet-500/10 text-violet-300"><MessageCircle className="h-8 w-8" /></span><h2 className="mt-4 text-xl font-black">Chọn một hội thoại</h2><p className="mt-2 max-w-sm text-sm text-gray-500">Dùng bộ lọc và tìm kiếm bên trái để xử lý nhanh yêu cầu hỗ trợ, tranh chấp và lời mời vào chat đơn hàng.</p></div></div>}
      </main>

      {settingsOpen && <div className="fixed inset-0 z-50 grid place-items-center bg-black/70 p-4"><section className="max-h-[85vh] w-full max-w-md overflow-y-auto rounded-2xl border border-white/10 bg-[#161616] p-5 shadow-2xl"><header className="flex items-center justify-between"><div><b>Thiết lập Chat tổng</b><p className="mt-1 text-xs text-gray-500">Bot kiểm duyệt và thành viên bị cấm</p></div><button onClick={() => setSettingsOpen(false)} className="rounded-lg p-2 hover:bg-white/10"><X className="h-5 w-5" /></button></header><label className="mt-5 flex items-center justify-between rounded-xl bg-white/5 p-3 text-sm"><span>Bật bot kiểm duyệt</span><input type="checkbox" checked={botEnabled} onChange={(event) => setBotEnabled(event.target.checked)} /></label><label className="mt-2 flex items-center justify-between rounded-xl bg-white/5 p-3 text-sm"><span>Chặn liên kết website ngoài</span><input type="checkbox" checked={blockExternalLinks} onChange={(event) => setBlockExternalLinks(event.target.checked)} /></label><label className="mt-4 block text-xs text-gray-500">Từ/cụm từ cấm</label><textarea value={bannedWordsText} onChange={(event) => setBannedWordsText(event.target.value)} className="mt-2 min-h-24 w-full rounded-xl bg-black/30 p-3 text-sm outline-none ring-violet-500 focus:ring-1" placeholder="spam, từ bậy, ..." /><label className="mt-3 block text-xs text-gray-500">Tên miền được phép gửi trong #General</label><input value={allowedDomainsText} onChange={(event) => setAllowedDomainsText(event.target.value)} className="mt-2 w-full rounded-xl bg-black/30 p-3 text-sm outline-none ring-violet-500 focus:ring-1" placeholder="shopmmo.com.vn, localhost" /><button onClick={() => void saveModeration()} className="mt-4 w-full rounded-xl bg-violet-600 py-3 text-sm font-bold hover:bg-violet-500">Lưu cài đặt</button><div className="mt-5 border-t border-white/10 pt-4"><b className="text-sm">Đã cấm chat tổng ({bannedUsers.length})</b>{bannedUsers.length ? <div className="mt-2 space-y-2">{bannedUsers.map((member) => <div key={member.id} className="flex items-center justify-between rounded-xl bg-white/5 p-3 text-xs"><span>{member.name} · {member.role?.name}</span><button onClick={() => void unbanGeneral(member)} className="rounded-lg bg-emerald-500/15 px-2 py-1.5 font-bold text-emerald-300">Mở chat</button></div>)}</div> : <p className="mt-2 text-xs text-gray-500">Chưa có thành viên bị cấm.</p>}</div></section></div>}
    </div>
  );
}