import React, { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
import { Search, MoreHorizontal, CheckCheck } from 'lucide-react';

export default function EmployerMessages() {
    const [searchQuery, setSearchQuery] = useState('');

    const chats = [
        { id: 1, name: 'Sarah Connor', preview: 'Is the site supervisor position still available?', time: '2m ago', unread: 2, online: true },
        { id: 2, name: 'Marketplace Support', preview: 'Your account verification is complete.', time: '1h ago', unread: 0, online: true },
        { id: 3, name: 'Maria Garcia', preview: 'I can start from next Monday. Looking forward to it!', time: '3h ago', unread: 0, online: false },
        { id: 4, name: 'Elena Gilbert', preview: 'Thank you for the opportunity.', time: 'Yesterday', unread: 0, online: false },
        { id: 5, name: 'John Smith', preview: 'Attached are my certificates for review.', time: 'Yesterday', unread: 0, online: false },
    ];

    return (
        <EmployerMobileLayout>
            <Head title="Messages" />
            
            <div className="flex flex-col h-full">
                {/* Search Bar */}
                <div className="p-6 pb-2">
                    <div className="relative group">
                        <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-[#141B34] transition-colors" />
                        <input 
                            type="text" 
                            placeholder="Search conversations..." 
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
                            className="w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-2xl text-sm focus:ring-4 focus:ring-slate-100 focus:border-slate-300 outline-none transition-all"
                        />
                    </div>
                </div>

                {/* Chat List */}
                <div className="flex-1 overflow-y-auto no-scrollbar pb-10">
                    <div className="divide-y divide-slate-100">
                        {chats.map((chat) => (
                            <Link 
                                key={chat.id} 
                                href={`/mobile/employer/chat/${chat.id}`}
                                className="flex items-center p-6 bg-white active:bg-slate-50 transition-all space-x-4"
                            >
                                <div className="relative shrink-0">
                                    <div className="w-14 h-14 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center text-[#141B34] font-bold text-xl">
                                        {chat.name.charAt(0)}
                                    </div>
                                    {chat.online && (
                                        <div className="absolute bottom-0.5 right-0.5 w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full" />
                                    )}
                                </div>
                                
                                <div className="flex-1 min-w-0 space-y-1">
                                    <div className="flex items-center justify-between">
                                        <h4 className="font-bold text-slate-900 text-[15px] truncate">{chat.name}</h4>
                                        <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{chat.time}</span>
                                    </div>
                                    <div className="flex items-center justify-between">
                                        <p className={`text-xs truncate max-w-[200px] ${chat.unread > 0 ? 'text-slate-900 font-bold' : 'text-slate-500 font-medium'}`}>
                                            {chat.preview}
                                        </p>
                                        {chat.unread > 0 ? (
                                            <div className="w-5 h-5 bg-[#185FA5] text-white text-[10px] font-bold rounded-full flex items-center justify-center border border-white">
                                                {chat.unread}
                                            </div>
                                        ) : (
                                            <CheckCheck className="w-4 h-4 text-slate-300" />
                                        )}
                                    </div>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </div>
        </EmployerMobileLayout>
    );
}
