import { useState, useRef, useEffect, useCallback } from 'react'; import { router } from '@inertiajs/react'; import { AppLayout } from '@/Components/Layout/AppLayout'; type ChatMessage = { id: number; body: string; sender: string; role?: string; isOwn: boolean; createdAt: string }; type Thread = { id: number; subject: string; unread: number; lastBody: string; lastSender: string; lastAt: string; lastIsOwn: boolean; messages: ChatMessage[]; }; type Contact = { id: number; name: string; role: string }; type Props = { threads: Thread[]; contacts: Contact[]; }; function csrf(): string { return (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement)?.content ?? ''; } export default function StudentMessages({ threads: initialThreads, contacts }: Props) { const [threads, setThreads] = useState(initialThreads); const [activeId, setActiveId] = useState(threads[0]?.id ?? null); const [composing, setComposing] = useState(false); const [replyBody, setReplyBody] = useState(''); const [sending, setSending] = useState(false); const [recipientIds, setRecipientIds] = useState([]); const [subject, setSubject] = useState(''); const [composeBody, setComposeBody] = useState(''); const [composeProcessing, setComposeProcessing] = useState(false); const [searchContact, setSearchContact] = useState(''); const chatEndRef = useRef(null); const replyRef = useRef(null); const activeThread = threads.find(t => t.id === activeId) ?? null; const totalUnread = threads.reduce((s, t) => s + t.unread, 0); useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [activeId, activeThread?.messages.length]); const selectThread = useCallback((t: Thread) => { setActiveId(t.id); setComposing(false); if (t.unread > 0) { const unreadIds = t.messages.filter(m => !m.isOwn).map(m => m.id); unreadIds.forEach(id => { fetch(`/student/messages/${id}/read`, { method: 'PATCH', headers: { 'X-CSRF-TOKEN': csrf() } }); }); setThreads(prev => prev.map(x => x.id === t.id ? { ...x, unread: 0 } : x)); } setTimeout(() => replyRef.current?.focus(), 100); }, []); const sendReply = useCallback(() => { if (!replyBody.trim() || !activeId || sending) return; setSending(true); router.post( `/student/messages/${activeId}/reply`, { body: replyBody }, { preserveScroll: true, onSuccess: () => { setReplyBody(''); setSending(false); }, onError: () => setSending(false), } ); }, [replyBody, activeId, sending]); const sendCompose = useCallback((e: React.FormEvent) => { e.preventDefault(); if (!composeBody.trim() || recipientIds.length === 0 || composeProcessing) return; setComposeProcessing(true); router.post( '/student/messages', { recipient_ids: recipientIds, subject, body: composeBody }, { onSuccess: () => { setComposing(false); setRecipientIds([]); setSubject(''); setComposeBody(''); setComposeProcessing(false); }, onError: () => setComposeProcessing(false), } ); }, [composeBody, recipientIds, subject, composeProcessing]); const toggleContact = (id: number) => { setRecipientIds(prev => prev.includes(id) ? prev.filter(r => r !== id) : [...prev, id]); }; const filteredContacts = searchContact.trim() ? contacts.filter(c => c.name.includes(searchContact) || c.role.includes(searchContact)) : contacts; const handleReplyKey = (e: React.KeyboardEvent) => { if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) sendReply(); }; return (
{/* ── Left: Thread list ── */}
پیام‌ها {totalUnread > 0 && ( {totalUnread} )} {contacts.length > 0 && ( )}
{threads.length === 0 ? (
هیچ پیامی وجود ندارد
) : ( threads.map(t => ( )) )}
{/* ── Right: Chat view ── */}
{composing ? (
پیام جدید
setSubject(e.target.value)} placeholder="موضوع پیام..." />
{recipientIds.length > 0 && ( )}
setSearchContact(e.target.value)} placeholder="جستجو..." style={{ marginBottom: '0.5rem' }} />
{filteredContacts.length === 0 ? ( کاربری یافت نشد ) : filteredContacts.map(c => { const sel = recipientIds.includes(c.id); return ( ); })}