import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '../../../Layouts/EmployerLayout';
import { MessageSquare, CheckCircle2, ChevronRight, Search, Plus } from 'lucide-react';
import { useTranslation } from '../../../lib/LanguageContext';

export default function Index({ conversations }) {
    const { t } = useTranslation();

    return (
        <EmployerLayout title={t('candidate_messages', 'Candidate Messages')}>
            <Head title={t('messages_employer_portal', 'Messages - Employer Portal')} />

            <div className="max-w-5xl mx-auto space-y-6 select-none">
                {/* Header Actions */}
                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div className="relative flex-1 max-w-md">
                        <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
                        <input
                            type="text"
                            placeholder={t('search_conversations_placeholder', 'Search conversations...')}
                            className="w-full pl-10 pr-4 py-2.5 rounded-2xl border border-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5] shadow-sm transition-all bg-white/80 backdrop-blur-sm"
                        />
                    </div>
                    <Link
                        href="/employer/workers"
                        className="bg-white hover:bg-slate-50 border border-slate-200 text-[#185FA5] px-4 py-2.5 rounded-2xl text-sm font-bold shadow-sm transition-all flex items-center justify-center space-x-2 whitespace-nowrap"
                    >
                        <Plus className="w-4 h-4" />
                        <span>{t('new_conversation', 'New Conversation')}</span>
                    </Link>
                </div>

                <div className="bg-white/80 backdrop-blur-xl rounded-3xl border border-slate-200 shadow-xl shadow-blue-900/5 overflow-hidden">
                    <div className="p-6 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
                        <div className="flex items-center space-x-2">
                            <MessageSquare className="w-5 h-5 text-[#185FA5]" />
                            <h2 className="font-extrabold text-lg text-slate-800 tracking-tight">{t('active_threads', 'Active Threads')}</h2>
                        </div>
                        <span className="px-3 py-1 bg-white border border-slate-200 rounded-full text-xs text-slate-600 font-bold shadow-sm">
                            {t('total_count', '{count} Total').replace('{count}', conversations?.length || 0)}
                        </span>
                    </div>

                    {conversations?.length > 0 ? (
                        <div className="divide-y divide-slate-100/80">
                            {conversations.map((thread) => (
                                <Link
                                    key={thread.id}
                                    href={`/employer/messages/${thread.id}`}
                                    className={`flex items-center space-x-4 p-5 sm:p-6 transition-all duration-300 group hover:bg-slate-50/80 ${
                                        thread.unread ? 'bg-blue-50/30' : 'bg-white'
                                    }`}
                                >
                                    <div className="relative flex-shrink-0">
                                        <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#185FA5] to-blue-400 text-white flex items-center justify-center font-bold text-xl shadow-md group-hover:scale-105 transition-transform duration-300">
                                            {thread.worker_name.charAt(0)}
                                        </div>
                                        {thread.online && (
                                            <span className="absolute -bottom-1 -right-1 w-3.5 h-3.5 bg-emerald-400 border-2 border-white rounded-full shadow-sm animate-pulse" />
                                        )}
                                    </div>

                                    <div className="flex-1 min-w-0 pr-4">
                                        <div className="flex items-center justify-between mb-1">
                                            <div className="flex items-center space-x-2 font-bold text-base text-slate-900 group-hover:text-[#185FA5] transition-colors truncate">
                                                <span>{thread.worker_name}</span>
                                                <span className="px-2 py-0.5 bg-slate-100 text-slate-500 rounded-md text-[10px] font-bold uppercase tracking-wider hidden sm:inline-block">
                                                    {thread.category}
                                                </span>
                                            </div>
                                            <span className={`text-xs font-semibold whitespace-nowrap ${thread.unread ? 'text-[#185FA5]' : 'text-slate-400'}`}>
                                                {thread.sent_at}
                                            </span>
                                        </div>

                                        <div className="flex items-center space-x-2">
                                            <p className={`text-sm truncate flex-1 ${thread.unread ? 'font-semibold text-slate-800' : 'text-slate-500'}`}>
                                                {thread.last_message}
                                            </p>
                                        </div>
                                    </div>

                                    <div className="flex flex-col items-center justify-center space-y-2 flex-shrink-0">
                                        {thread.unread ? (
                                            <span className="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse shadow-sm shadow-red-500/50" />
                                        ) : (
                                            <span className="w-2.5 h-2.5 opacity-0" />
                                        )}
                                        <div className="w-8 h-8 rounded-full bg-slate-50 group-hover:bg-[#185FA5] flex items-center justify-center transition-colors shadow-sm">
                                            <ChevronRight className="w-4 h-4 text-slate-400 group-hover:text-white transition-colors" />
                                        </div>
                                    </div>
                                </Link>
                            ))}
                        </div>
                    ) : (
                        <div className="text-center py-20 space-y-4 bg-slate-50/30">
                            <div className="w-16 h-16 bg-white rounded-3xl shadow-sm border border-slate-100 flex items-center justify-center mx-auto mb-2">
                                <MessageSquare className="w-8 h-8 text-slate-300" />
                            </div>
                            <div className="text-lg font-extrabold text-slate-800">{t('no_active_messages', 'No active messages')}</div>
                            <p className="text-sm text-slate-500 max-w-sm mx-auto leading-relaxed">
                                {t('no_active_messages_desc', 'When you message workers or schedule interviews, your conversation threads will appear here.')}
                            </p>
                            <Link
                                href="/employer/workers"
                                className="inline-block mt-4 bg-[#185FA5] text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-md shadow-blue-900/20 hover:-translate-y-0.5 active:translate-y-0 transition-all"
                            >
                                {t('find_workers', 'Find Workers')}
                            </Link>
                        </div>
                    )}
                </div>
            </div>
        </EmployerLayout>
    );
}
