// Conversations page — real API
const Conversations = () => {
  const { Icon, Button } = window.SB_UI;
  const { fa } = window.SB_DATA;
  const [conversations, setConversations] = useState([]);
  const [activeId, setActiveId] = useState(null);
  const [messages, setMessages] = useState([]);
  const [activeLead, setActiveLead] = useState(null);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(true);
  const [msgLoading, setMsgLoading] = useState(false);
  const [search, setSearch] = useState('');
  const scrollRef = useRef(null);

  const token = localStorage.getItem(window.TOKEN_KEY);
  const headers = { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` };

  const load = () => {
    fetch('/api/conversations?limit=50', { headers })
      .then(r => r.json())
      .then(d => {
        if (d.success && d.data?.conversations) {
          const convs = d.data.conversations;
          setConversations(convs);
          if (!activeId && convs.length > 0) {
            setActiveId(convs[0].id);
          }
        }
      })
      .finally(() => setLoading(false));
  };

  const loadMessages = (convId) => {
    setMsgLoading(true);
    setMessages([]);
    fetch(`/api/conversations/${convId}/messages`, { headers })
      .then(r => r.json())
      .then(d => {
        if (d.success) {
          setMessages(d.data.messages || []);
          setActiveLead(d.data.lead || null);
        }
      })
      .finally(() => {
        setMsgLoading(false);
        setTimeout(() => {
          if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
        }, 60);
      });
  };

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

  const contactName = (conv) => {
    if (!conv?.lead) return 'ناشناس';
    return conv.lead.full_name || conv.lead.username || 'ناشناس';
  };

  const initials = (name) =>
    (name || '؟').split(' ').map(w => w[0]).filter(Boolean).join('').slice(0, 2) || '؟';

  const platformColor = (p) =>
    ({ telegram: '#3B82F6', bale: '#10B981', instagram: '#FF6B35' }[p] || '#6B7280');

  const statusColor = (s) =>
    ({ hot: '#FF6B6B', warm: '#FFB347', cold: '#A0ADB8', buyer: '#00D4AA', new: '#A5B4FC' }[s] || '#6B7280');

  const formatTime = (t) => {
    if (!t) return '';
    try {
      const d = new Date(t.replace(' ', 'T'));
      return d.toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' });
    } catch { return ''; }
  };

  const active = conversations.find(c => c.id === activeId);
  const filtered = conversations.filter(c => {
    if (!search) return true;
    const name = contactName(c).toLowerCase();
    return name.includes(search.toLowerCase()) ||
      (c.last_message?.content || '').includes(search);
  });

  const closeConversation = (id) => {
    fetch(`/api/conversations/${id}/close`, { method: 'POST', headers })
      .then(() => load());
  };

  const [sending, setSending] = useState(false);
  const [pendingFile, setPendingFile] = useState(null); // { file, previewUrl, type }
  const fileInputRef = useRef(null);

  const onFileChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    const isImage = file.type.startsWith('image/');
    const previewUrl = isImage ? URL.createObjectURL(file) : null;
    setPendingFile({ file, previewUrl, isImage });
    e.target.value = '';
  };

  const removePendingFile = () => {
    if (pendingFile?.previewUrl) URL.revokeObjectURL(pendingFile.previewUrl);
    setPendingFile(null);
  };

  const sendFile = () => {
    if (!pendingFile || !activeId || sending) return;
    setSending(true);

    // نمایش فوری در UI
    const label = pendingFile.file.name;
    const optimistic = {
      id: Date.now(), role: 'assistant',
      content: JSON.stringify({ type: 'file', filename: label, mimetype: pendingFile.file.type, size: pendingFile.file.size }),
      created_at: new Date().toISOString(),
    };
    setMessages(prev => [...prev, optimistic]);
    setTimeout(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, 30);
    removePendingFile();

    const formData = new FormData();
    formData.append('file', pendingFile.file);
    if (input.trim()) formData.append('caption', input.trim());

    fetch(`/api/conversations/${activeId}/send-file`, {
      method: 'POST',
      headers: { Authorization: `Bearer ${token}` },
      body: formData,
    })
      .then(r => r.json())
      .then(d => {
        if (d.success) setMessages(prev => prev.map(m => m.id === optimistic.id ? d.data.message : m));
        setInput('');
      })
      .finally(() => setSending(false));
  };

  const formatFileSize = (bytes) => {
    if (!bytes) return '';
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
  };

  const sendMessage = () => {
    if (!input.trim() || !activeId || sending) return;
    const text = input.trim();
    setInput('');
    setSending(true);

    // نمایش فوری در UI
    const optimistic = { id: Date.now(), role: 'assistant', content: text, created_at: new Date().toISOString() };
    setMessages(prev => [...prev, optimistic]);
    setTimeout(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, 30);

    fetch(`/api/conversations/${activeId}/send`, {
      method: 'POST', headers,
      body: JSON.stringify({ text }),
    })
      .then(r => r.json())
      .then(d => {
        if (d.success) {
          // جایگزین کردن پیام موقت با پیام واقعی از DB
          setMessages(prev => prev.map(m => m.id === optimistic.id ? d.data.message : m));
        }
      })
      .finally(() => setSending(false));
  };

  if (loading) return (
    <div style={{ display: 'grid', placeItems: 'center', height: 400, color: 'var(--text-3)' }}>
      <div style={{ textAlign: 'center' }}>
        <Icon name="message-square" size={36} color="var(--text-3)" />
        <div className="mt-16">در حال بارگذاری مکالمات...</div>
      </div>
    </div>
  );

  if (!loading && conversations.length === 0) return (
    <div style={{ display: 'grid', placeItems: 'center', height: 400, color: 'var(--text-3)' }}>
      <div style={{ textAlign: 'center' }}>
        <Icon name="message-square" size={48} color="var(--text-3)" />
        <div className="semi mt-16">هنوز مکالمه‌ای ثبت نشده</div>
        <div className="text-xs mt-8 text-3">وقتی کاربران با ربات صحبت کنند، مکالمه‌ها اینجا نمایش داده می‌شوند</div>
      </div>
    </div>
  );

  return (
    <div className="chat-frame">
      {/* ─── لیست مکالمات ─── */}
      <aside className="chat-list">
        <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--border-soft)' }}>
          <div className="search" style={{ width: '100%' }}>
            <Icon name="search" size={14} color="var(--text-3)" />
            <input
              placeholder="جستجو..."
              value={search}
              onChange={e => setSearch(e.target.value)}
            />
          </div>
        </div>

        {filtered.map(c => {
          const name = contactName(c);
          const preview = c.last_message?.content || '...';
          const isActive = activeId === c.id;
          return (
            <div key={c.id}
              className={`chat-conv-item ${isActive ? 'active' : ''}`}
              onClick={() => setActiveId(c.id)}>
              <div className="row gap-12">
                <div style={{ position: 'relative' }}>
                  <div className="avatar" style={{ width: 40, height: 40, fontSize: 13 }}>
                    {initials(name)}
                  </div>
                  {c.status === 'active' && (
                    <span style={{
                      position: 'absolute', bottom: 1, left: 1, width: 9, height: 9,
                      borderRadius: '50%', background: '#34D399',
                      border: '2px solid var(--bg-2)'
                    }} />
                  )}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="chat-conv-top">
                    <span className="chat-name">{name}</span>
                    <span className="chat-time">{formatTime(c.updated_at)}</span>
                  </div>
                  <div className="row between mt-4">
                    <span className="chat-preview" style={{ maxWidth: 160, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                      {preview.slice(0, 45)}
                    </span>
                    {c.message_count > 0 && (
                      <span style={{
                        background: 'var(--primary)', color: '#fff',
                        fontSize: 10, fontFamily: 'JetBrains Mono',
                        padding: '1px 7px', borderRadius: 999,
                        marginRight: 6, fontWeight: 600, flexShrink: 0
                      }}>
                        {fa(c.message_count)}
                      </span>
                    )}
                  </div>
                  <div className="row gap-6 mt-6">
                    <span style={{
                      fontSize: 10, padding: '1px 6px', borderRadius: 6,
                      background: platformColor(c.platform) + '22',
                      color: platformColor(c.platform)
                    }}>
                      {c.platform || '—'}
                    </span>
                    {c.lead?.status && c.lead.status !== 'new' && (
                      <span style={{
                        fontSize: 10, padding: '1px 6px', borderRadius: 6,
                        background: statusColor(c.lead.status) + '22',
                        color: statusColor(c.lead.status)
                      }}>
                        {({ hot: 'داغ', warm: 'گرم', cold: 'سرد', buyer: 'خریدار' }[c.lead.status] || c.lead.status)}
                      </span>
                    )}
                    {c.status === 'closed' && (
                      <span style={{ fontSize: 10, padding: '1px 6px', borderRadius: 6, background: 'rgba(107,114,128,0.15)', color: '#9CA3AF' }}>
                        بسته
                      </span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </aside>

      {/* ─── پنل چت ─── */}
      {active ? (
        <section className="chat-pane">
          <header className="chat-header row between">
            <div className="row gap-12">
              <div className="avatar" style={{ width: 38, height: 38, fontSize: 13 }}>
                {initials(contactName(active))}
              </div>
              <div>
                <div className="bold">{contactName(active)}</div>
                <div className="text-xs text-3 mono">
                  {active.platform}
                  {activeLead?.phone ? ` • ${activeLead.phone}` : ''}
                  {' • '}
                  {active.status === 'active' ? 'فعال' : 'بسته'}
                </div>
              </div>
            </div>
            <div className="row gap-8">
              {active.status === 'active' && (
                <Button kind="ghost" size="sm" icon="x-circle"
                  onClick={() => closeConversation(activeId)}>
                  بستن مکالمه
                </Button>
              )}
              <button className="icon-btn" onClick={load} title="رفرش">
                <Icon name="refresh-cw" size={14} />
              </button>
              <button className="icon-btn"><Icon name="user-circle" size={15} /></button>
              <button className="icon-btn"><Icon name="more-vertical" size={15} /></button>
            </div>
          </header>

          <div className="chat-scroll" ref={scrollRef}>
            {msgLoading ? (
              <div style={{ textAlign: 'center', padding: 60, color: 'var(--text-3)' }}>
                در حال بارگذاری پیام‌ها...
              </div>
            ) : messages.length === 0 ? (
              <div style={{ textAlign: 'center', padding: 60, color: 'var(--text-3)' }}>
                <Icon name="message-square" size={32} color="var(--text-3)" />
                <div className="mt-12 text-sm">هنوز پیامی در این مکالمه وجود ندارد</div>
              </div>
            ) : (
              <>
                <div className="day-divider">
                  {active.started_at ? active.started_at.slice(0, 10) : 'شروع مکالمه'}
                </div>
                {messages.map((m, i) => (
                  <div key={i} className={`bubble ${m.role === 'user' ? 'user' : 'bot'}`}>
                    {(m.content || '').split('\n').map((line, k) => (
                      <div key={k}>{line || ' '}</div>
                    ))}
                    <span className="meta">
                      {formatTime(m.created_at)}{m.role === 'user' ? ' ✓✓' : ''}
                    </span>
                  </div>
                ))}
              </>
            )}
          </div>

          <div className="chat-composer">
            <button className="icon-btn"><Icon name="paperclip" size={15} /></button>
            <input
              className="input"
              placeholder="پیام ارسال کن... (Enter)"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }}
              style={{ background: 'rgba(15,15,26,0.4)' }}
              disabled={sending}
            />
            <button className="icon-btn"><Icon name="smile" size={15} /></button>
            <Button
              kind="primary"
              icon="send"
              onClick={sendMessage}
              disabled={!input.trim() || sending}
            >
              {sending ? '...' : 'ارسال'}
            </Button>
          </div>
        </section>
      ) : (
        <section className="chat-pane" style={{ display: 'grid', placeItems: 'center', color: 'var(--text-3)' }}>
          <div style={{ textAlign: 'center' }}>
            <Icon name="message-square" size={40} color="var(--text-3)" />
            <div className="mt-16 text-sm">یک مکالمه انتخاب کنید</div>
          </div>
        </section>
      )}
    </div>
  );
};

window.Conversations = Conversations;