// ChatModal.jsx — شات كتابى بين العميل والمحامي
// يفتح من كارت المحامي بدل/جنب زرار الاتصال.

function _chatFmtTime(iso) {
  if (!iso) return '';
  try {
    const d = new Date(iso);
    const now = new Date();
    const diffMs = now - d;
    const diffMin = Math.floor(diffMs / 60000);
    if (diffMin < 1) return 'الآن';
    if (diffMin < 60) return `منذ ${diffMin} د`;
    if (diffMin < 24 * 60) return d.toLocaleTimeString('ar-SA', { hour: '2-digit', minute: '2-digit' });
    return d.toLocaleString('ar-SA', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' });
  } catch { return ''; }
}

function _chatFmtSize(bytes) {
  if (!bytes) return '';
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)} KB`;
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}

const CHAT_MIME_ICON = (mime) => {
  if (!mime) return '📎';
  if (mime.startsWith('image/')) return '🖼️';
  if (mime === 'application/pdf') return '📄';
  if (mime.includes('word')) return '📝';
  if (mime === 'text/plain') return '📃';
  return '📎';
};

function ChatModal({ lawyer, onClose }) {
  const [chatId, setChatId] = React.useState(null);
  const [messages, setMessages] = React.useState([]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(true);
  const [sending, setSending] = React.useState(false);
  const [uploading, setUploading] = React.useState(false);
  const [error, setError] = React.useState(null);
  const scrollRef = React.useRef(null);
  const fileRef = React.useRef(null);
  const inputRef = React.useRef(null);

  const apiBase = window.api?.baseUrl || 'http://localhost:8000';

  // start or get chat with this lawyer
  React.useEffect(() => {
    let cancel = false;
    (async () => {
      try {
        if (!window.api?.isAuthenticated()) {
          setError('سجّل دخولك أولاً لبدء المحادثة');
          setLoading(false);
          return;
        }
        const c = await window.api.chats.start(lawyer.id);
        if (cancel) return;
        setChatId(c.id);
        window.__openChatId = c.id;   // عشان الـ notifier ميطلعش toast على شات مفتوح
        const detail = await window.api.chats.get(c.id);
        if (cancel) return;
        setMessages(detail.messages || []);
        setLoading(false);
        setTimeout(() => {
          if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
          inputRef.current?.focus();
        }, 50);
      } catch (e) {
        if (!cancel) {
          setError(e.message || 'فشل فتح المحادثة');
          setLoading(false);
        }
      }
    })();
    return () => {
      cancel = true;
      window.__openChatId = null;
    };
  }, [lawyer.id]);

  // poll every 4s for new messages
  React.useEffect(() => {
    if (!chatId) return;
    const t = setInterval(async () => {
      try {
        const detail = await window.api.chats.get(chatId);
        setMessages(detail.messages || []);
      } catch { /* silent */ }
    }, 4000);
    return () => clearInterval(t);
  }, [chatId]);

  // auto-scroll on new messages
  React.useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [messages.length]);

  // ESC to close
  React.useEffect(() => {
    const h = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [onClose]);

  const handleSend = async () => {
    const text = input.trim();
    if (!text || !chatId || sending) return;
    setSending(true);
    try {
      const msg = await window.api.chats.sendMessage(chatId, text);
      setMessages(prev => [...prev, msg]);
      setInput('');
    } catch (e) {
      alert(e.message);
    } finally {
      setSending(false);
      inputRef.current?.focus();
    }
  };

  const handleFile = async (file) => {
    if (!file || !chatId) return;
    setUploading(true);
    try {
      const msg = await window.api.chats.sendFile(chatId, file);
      setMessages(prev => [...prev, msg]);
    } catch (e) {
      alert(e.message);
    } finally {
      setUploading(false);
      if (fileRef.current) fileRef.current.value = '';
    }
  };

  const currentUserId = window.__sanadCurrentUser?.id;

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 8500,
      background: 'rgba(20,20,19,0.55)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20, fontFamily: sanadFonts.arabic, direction: 'rtl',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: sanadColors.bgElevated, borderRadius: 16,
        boxShadow: '0 24px 64px rgba(20,20,19,0.30)',
        width: '100%', maxWidth: 560, height: '85vh', maxHeight: 720,
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        {/* Header */}
        <div style={{
          padding: '14px 18px', borderBottom: `1px solid ${sanadColors.border}`,
          display: 'flex', alignItems: 'center', gap: 12,
          background: `linear-gradient(135deg, ${sanadColors.brandSubtle} 0%, ${sanadColors.bgElevated} 100%)`,
        }}>
          {/* Avatar */}
          <div style={{
            width: 44, height: 44, borderRadius: '50%', overflow: 'hidden',
            background: sanadColors.brandSubtle, flexShrink: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: sanadColors.brand, fontWeight: 700, fontSize: 16,
            border: `1.5px solid ${sanadColors.brand}`,
          }}>
            {lawyer.photo || lawyer.avatar_url ? (
              <img src={lawyer.photo || lawyer.avatar_url} alt={lawyer.name}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            ) : (
              (lawyer.name || '?').split(' ').map(w => w[0]).filter(Boolean).slice(0, 2).join('')
            )}
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: sanadColors.textPrimary }}>
              {lawyer.name}
            </div>
            <div style={{ fontSize: 11, color: sanadColors.textMuted, marginTop: 2 }}>
              {lawyer.spec || lawyer.specialty || 'محامي'}
              {lawyer.avail && <> · <span style={{ color: '#2d7a4f' }}>● متاح الآن</span></>}
            </div>
          </div>
          <button onClick={onClose} style={{
            width: 30, height: 30, border: 'none', borderRadius: 8,
            background: 'rgba(20,20,19,0.06)', cursor: 'pointer',
            color: sanadColors.textMuted, fontSize: 20, lineHeight: 1,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>×</button>
        </div>

        {/* Messages area */}
        <div ref={scrollRef} style={{
          flex: 1, overflowY: 'auto', padding: '16px 18px',
          background: sanadColors.bg,
          display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          {loading ? (
            <div style={{ margin: 'auto', color: sanadColors.textMuted, fontSize: 13 }}>
              جارٍ فتح المحادثة…
            </div>
          ) : error ? (
            <div style={{ margin: 'auto', color: sanadColors.error, fontSize: 13, textAlign: 'center' }}>
              {error}
            </div>
          ) : messages.length === 0 ? (
            <div style={{
              margin: 'auto', textAlign: 'center', color: sanadColors.textMuted,
              fontSize: 13, lineHeight: 1.8, maxWidth: 320,
            }}>
              <div style={{ fontSize: 32, marginBottom: 8 }}>💬</div>
              <div style={{ fontWeight: 600, color: sanadColors.textSecondary, marginBottom: 4 }}>
                بداية محادثة مع {lawyer.name}
              </div>
              <div style={{ fontSize: 12 }}>
                ابدأ بسؤالك القانوني. تقدر تبعت ملف برضو لو في وثيقة محتاج رأي عليها.
              </div>
            </div>
          ) : (
            messages.map(m => {
              const mine = m.sender_id === currentUserId;
              const isFile = !!m.attachment_url;
              return (
                <div key={m.id} style={{
                  display: 'flex', flexDirection: 'column',
                  alignItems: mine ? 'flex-start' : 'flex-end',
                  marginBottom: 2,
                }}>
                  <div style={{
                    maxWidth: '78%',
                    padding: isFile ? '8px 10px' : '8px 12px',
                    borderRadius: 12,
                    background: mine ? sanadColors.brand : sanadColors.bgElevated,
                    color: mine ? '#fff' : sanadColors.textPrimary,
                    fontSize: 13, lineHeight: 1.6,
                    boxShadow: mine ? '0 1px 2px rgba(201,100,66,0.20)' : '0 0 0 1px rgba(20,20,19,0.06)',
                    wordBreak: 'break-word', whiteSpace: 'pre-wrap',
                  }}>
                    {isFile ? (
                      <a href={`${apiBase}${m.attachment_url}`} target="_blank" rel="noopener noreferrer" style={{
                        display: 'flex', alignItems: 'center', gap: 10,
                        textDecoration: 'none', color: 'inherit',
                      }}>
                        <span style={{
                          width: 36, height: 36, borderRadius: 8,
                          background: mine ? 'rgba(255,255,255,0.18)' : sanadColors.bgSubtle,
                          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, flexShrink: 0,
                        }}>{CHAT_MIME_ICON(m.attachment_mime)}</span>
                        <span style={{ minWidth: 0, flex: 1 }}>
                          <div style={{ fontWeight: 600, fontSize: 12, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            {m.attachment_name}
                          </div>
                          <div style={{ fontSize: 10, opacity: 0.75 }}>
                            {_chatFmtSize(m.attachment_size)} · فتح ↗
                          </div>
                        </span>
                      </a>
                    ) : (
                      m.content
                    )}
                  </div>
                  <div style={{ fontSize: 9.5, color: sanadColors.textMuted, marginTop: 2, padding: '0 4px' }}>
                    {_chatFmtTime(m.created_at)}
                    {mine && m.is_read && <span style={{ marginRight: 4 }}>✓✓</span>}
                  </div>
                </div>
              );
            })
          )}
        </div>

        {/* Input area */}
        {!error && (
          <div style={{
            padding: '12px 18px', borderTop: `1px solid ${sanadColors.border}`,
            background: sanadColors.bgElevated,
            display: 'flex', alignItems: 'flex-end', gap: 8,
          }}>
            <input ref={fileRef} type="file" hidden
              accept="application/pdf,image/*,.doc,.docx,.txt"
              onChange={e => handleFile(e.target.files?.[0])} />
            <button onClick={() => fileRef.current?.click()} disabled={uploading || !chatId} title="إرفاق ملف" style={{
              width: 38, height: 38, borderRadius: 10, border: 'none', flexShrink: 0,
              background: uploading ? sanadColors.bgSubtle : sanadColors.brandSubtle,
              color: sanadColors.brand,
              cursor: uploading ? 'wait' : 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'background 140ms',
            }}>
              {uploading ? (
                <span style={{
                  width: 14, height: 14, border: `2px solid ${sanadColors.brand}`,
                  borderTopColor: 'transparent', borderRadius: '50%',
                  animation: 'spin 0.8s linear infinite', display: 'inline-block',
                }} />
              ) : (
                <svg width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.8" viewBox="0 0 24 24"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
              )}
            </button>

            <textarea ref={inputRef} value={input}
              onChange={e => setInput(e.target.value)}
              onKeyDown={e => {
                if (e.key === 'Enter' && !e.shiftKey) {
                  e.preventDefault();
                  handleSend();
                }
              }}
              placeholder="اكتب رسالتك… (Enter للإرسال، Shift+Enter سطر جديد)"
              rows={1}
              style={{
                flex: 1, padding: '10px 14px', borderRadius: 12,
                border: `1px solid ${sanadColors.border}`,
                background: sanadColors.bg,
                fontFamily: sanadFonts.arabic, fontSize: 13.5, lineHeight: 1.6,
                resize: 'none', maxHeight: 100, minHeight: 38, outline: 'none',
                direction: 'rtl', color: sanadColors.textPrimary,
              }} />

            <button onClick={handleSend} disabled={!input.trim() || sending || !chatId} style={{
              width: 38, height: 38, borderRadius: 10, border: 'none', flexShrink: 0,
              background: input.trim() ? sanadColors.brand : sanadColors.bgSubtle,
              color: input.trim() ? '#fff' : sanadColors.textMuted,
              cursor: input.trim() ? 'pointer' : 'not-allowed',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              boxShadow: input.trim() ? '0 2px 6px rgba(201,100,66,0.25)' : 'none',
              transition: 'all 140ms',
            }}>
              {sending ? (
                <span style={{
                  width: 14, height: 14, border: '2px solid #fff',
                  borderTopColor: 'transparent', borderRadius: '50%',
                  animation: 'spin 0.8s linear infinite', display: 'inline-block',
                }} />
              ) : (
                // إرسال: السهم لليسار في RTL = للأمام
                <svg width="17" height="17" fill="currentColor" viewBox="0 0 24 24" style={{ transform: 'scaleX(-1)' }}>
                  <path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/>
                </svg>
              )}
            </button>
          </div>
        )}

        <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
      </div>
    </div>
  );
}

window.ChatModal = ChatModal;