import React, { useState, useEffect, useRef } from 'react'; import { Head, Link } from '@inertiajs/react'; import EmployerLayout from '../../../Layouts/EmployerLayout'; import { Send, ArrowLeft, CheckCircle2, Globe2, DollarSign, Sparkles, MoreVertical, Phone, Video, Paperclip, Search, Info, Calendar, Briefcase, ShieldCheck, ChevronRight, MapPin, Smile } from 'lucide-react'; export default function Show({ conversation, initialMessages, conversations = [] }) { const [messages, setMessages] = useState(initialMessages || []); const [input, setInput] = useState(''); const [isTyping, setIsTyping] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [showProfile, setShowProfile] = useState(false); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(() => { scrollToBottom(); }, [messages, isTyping]); const filteredConversations = (conversations || []).filter(c => c.worker_name.toLowerCase().includes(searchTerm.toLowerCase()) ); const sendMsg = (text) => { if (!text.trim()) return; const newMsg = { id: Date.now(), sender: 'employer', text: text, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), }; setMessages(prev => [...prev, newMsg]); setInput(''); setIsTyping(true); setTimeout(() => { setIsTyping(false); setMessages(prev => [...prev, { id: Date.now() + 1, sender: 'worker', text: "Thank you for the message ma'am! I confirm I have received your request and look forward to speaking with you.", time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), }]); }, 1500 + Math.random() * 1000); }; const handleFormSubmit = (e) => { e.preventDefault(); sendMsg(input); }; const chips = [ "Are you available for a video interview today?", "What is your final expected salary?", "Can you transfer your visa immediately?" ]; return (
{/* Conversation List Sidebar (Desktop) */} {/* Main Chat Interface */}
{/* Glassmorphism Header */}
{conversation.worker_name.charAt(0)}
{conversation.online && ( )}

{conversation.worker_name}

{conversation.online ? 'Active Now' : 'Last seen 2h ago'}
{/* Chat Messages */}
Today, Dec 15
{messages.map((msg, idx) => { const isEmp = msg.sender === 'employer'; return (
{msg.text}
{msg.time} {isEmp && }
); })} {isTyping && (
)}
{/* Quick Replies & Input */}
{chips.map((chip, idx) => ( ))}
setInput(e.target.value)} placeholder="Type a secure message..." className="w-full pl-6 pr-14 py-5 bg-slate-50 border-none rounded-[32px] text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none group-focus-within:bg-white border-2 border-transparent group-focus-within:border-slate-100" />
{/* Candidate Context Sidebar (Right) */} {showProfile && ( )}
); }