import React, { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    Home, 
    Search,
    Bell,
    Bookmark,
    ChevronDown,
    MessageCircle,
    User,
    Briefcase,
    Compass,
    Globe
} from 'lucide-react';

export default function WorkerHome() {
    const [isOpenToWork, setIsOpenToWork] = useState(true);
    const [showLangDropdown, setShowLangDropdown] = useState(false);
    const [currentLang, setCurrentLang] = useState('EN');

    return (
        <div className="min-h-screen bg-[#F9F9F9] font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden pb-24">
            <Head title="Home" />
            
            {/* Header Area */}
            <div className="px-4 pt-12 pb-4 space-y-6 flex-shrink-0">
                <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                        <div className="w-10 h-10 rounded-full bg-slate-200 border-2 border-white shadow-sm overflow-hidden">
                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Danial" alt="avatar" />
                        </div>
                        <div className="text-left">
                            <p className="text-[10px] text-slate-400 font-bold">Hi, Danial</p>
                            <button className="flex items-center space-x-1">
                                <span className="text-xs font-black text-slate-900">92 High street, London</span>
                                <ChevronDown className="w-3 h-3 text-slate-400" />
                            </button>
                        </div>
                    </div>
                    <div className="flex items-center space-x-3">
                        <div className="relative">
                            <button 
                                onClick={() => setShowLangDropdown(!showLangDropdown)}
                                className="flex items-center space-x-2 bg-white px-3 py-2 rounded-2xl shadow-sm border border-slate-50 active:scale-95 transition-all"
                            >
                                <Globe className="w-4 h-4 text-[#185FA5]" />
                                <span className="text-[9px] font-black uppercase tracking-widest text-slate-900">{currentLang}</span>
                            </button>

                            {showLangDropdown && (
                                <div className="absolute top-12 right-0 w-40 bg-white rounded-[24px] shadow-2xl border border-slate-100 py-3 z-[100] animate-in fade-in zoom-in duration-200">
                                    {['English', 'Arabic', 'Tagalog', 'Swahili', 'Hindi'].map((lang) => (
                                        <button 
                                            key={lang}
                                            onClick={() => {
                                                setCurrentLang(lang === 'English' ? 'EN' : lang.substring(0, 2).toUpperCase());
                                                setShowLangDropdown(false);
                                            }}
                                            className="w-full px-6 py-3 text-left hover:bg-slate-50 flex items-center justify-between group"
                                        >
                                            <span className="text-[10px] font-black uppercase tracking-widest text-slate-400 group-hover:text-[#185FA5] transition-colors">{lang}</span>
                                            {currentLang === (lang === 'English' ? 'EN' : lang.substring(0, 2).toUpperCase()) && (
                                                <div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full" />
                                            )}
                                        </button>
                                    ))}
                                </div>
                            )}
                        </div>

                        <button className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-slate-400 shadow-sm border border-slate-50 relative">
                            <Bell className="w-4 h-4" />
                            <div className="absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white" />
                        </button>
                    </div>
                </div>

                {/* Search Bar */}
                <div className="relative">
                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                    <input 
                        type="text" 
                        placeholder="Search for Job, Recruiter..." 
                        className="w-full pl-12 pr-12 py-3.5 bg-white border-none rounded-2xl text-[11px] font-medium shadow-sm focus:ring-2 focus:ring-blue-100 outline-none"
                    />
                    <div className="absolute right-4 top-1/2 -translate-y-1/2">
                         <span className="text-sm">⚡</span>
                    </div>
                </div>
            </div>

            <div className="flex-1 overflow-y-auto px-4 space-y-8">
                {/* Open to Work Card */}
                <button 
                    onClick={() => setIsOpenToWork(!isOpenToWork)}
                    className={`w-full p-6 rounded-[32px] flex items-center justify-between transition-all duration-500 active:scale-[0.98] ${
                        isOpenToWork ? 'bg-[#185FA5] text-white shadow-xl shadow-blue-500/20' : 'bg-white text-slate-400 border border-slate-100'
                    }`}
                >
                    <div className="text-left space-y-1">
                        <p className={`text-[9px] font-black uppercase tracking-widest ${isOpenToWork ? 'text-blue-100' : 'text-slate-300'}`}>Availability</p>
                        <h3 className="text-base font-black tracking-tight uppercase">Open to Work</h3>
                    </div>
                    <div className={`w-12 h-7 rounded-full relative transition-colors duration-300 ${isOpenToWork ? 'bg-white/20' : 'bg-slate-100'}`}>
                        <div className={`absolute top-1 w-5 h-5 rounded-full transition-all duration-300 shadow-md ${
                            isOpenToWork ? 'right-1 bg-white' : 'left-1 bg-white'
                        }`} />
                    </div>
                </button>

                {/* Job Offers Horizontal */}
                <div className="space-y-4">
                    <div className="flex items-center justify-between px-1">
                        <h3 className="font-black text-sm uppercase tracking-tight text-slate-900">Job offers</h3>
                        <button className="text-[10px] font-black text-[#185FA5] uppercase tracking-widest">See all</button>
                    </div>
                    
                    <div className="flex space-x-4 overflow-x-auto pb-4 no-scrollbar -mx-4 px-4">
                        {[
                            { id: 1, title: 'Driver needed', salary: '$15', icon: '🚗', bg: 'bg-blue-50' },
                            { id: 2, title: 'Mason needed', salary: '$25', icon: '🏗️', bg: 'bg-emerald-50' }
                        ].map((offer) => (
                            <Link key={offer.id} href="/mobile/worker/job/detail" className={`${offer.bg} p-6 rounded-[32px] w-[240px] shrink-0 space-y-4 shadow-sm active:scale-95 transition-all block border border-white/50`}>
                                <div className="flex items-center justify-between">
                                    <div className="w-10 h-10 rounded-full bg-white flex items-center justify-center text-xl shadow-sm">
                                        {offer.icon}
                                    </div>
                                    <p className="text-sm font-black text-slate-900">{offer.salary}</p>
                                </div>
                                <div className="space-y-1">
                                    <h4 className="font-black text-slate-900 text-xs uppercase tracking-tight">{offer.title}</h4>
                                    <p className="text-[9px] text-slate-500 font-bold uppercase tracking-tight">High street avenue London, UK</p>
                                    <p className="text-[9px] text-[#185FA5] font-black uppercase">From Fri, 17 Dec</p>
                                </div>
                                <span className="inline-block bg-black text-white px-4 py-1.5 rounded-full text-[8px] font-black uppercase tracking-tight">Part time</span>
                            </Link>
                        ))}
                    </div>
                </div>

                {/* Employer Requests - Compact List */}
                <div className="space-y-4">
                    <div className="px-1 flex items-center justify-between">
                        <h2 className="text-[12px] font-black uppercase tracking-[0.15em] text-slate-400">Employer Requests</h2>
                        <span className="bg-[#185FA5]/10 text-[#185FA5] px-2.5 py-1 rounded-lg text-[9px] font-black uppercase">2 Pending</span>
                    </div>
                    <div className="space-y-3">
                        {[
                            { id: 1, employer: 'Al Mansoori Group', role: 'Project Mason', img: 'https://api.dicebear.com/7.x/initials/svg?seed=AM' },
                            { id: 2, employer: 'Marina Cleaners', role: 'Deep Cleaning', img: 'https://api.dicebear.com/7.x/initials/svg?seed=MC' }
                        ].map((req) => (
                            <div key={req.id} className="bg-white p-4 rounded-3xl border border-slate-50 shadow-sm flex items-center justify-between">
                                <div className="flex items-center space-x-3">
                                    <div className="w-10 h-10 rounded-xl bg-slate-50 flex items-center justify-center overflow-hidden border border-slate-100 shrink-0">
                                        <img src={req.img} alt="employer" className="w-full h-full object-cover" />
                                    </div>
                                    <div>
                                        <h4 className="font-black text-slate-900 text-xs uppercase tracking-tight leading-none mb-1.5">{req.employer}</h4>
                                        <p className="text-[9px] font-bold text-[#185FA5] uppercase tracking-widest">{req.role}</p>
                                    </div>
                                </div>
                                <div className="flex items-center space-x-2">
                                    <button className="w-8 h-8 bg-emerald-50 text-emerald-600 rounded-lg flex items-center justify-center active:scale-90 transition-all">
                                        <span className="text-[10px] font-black">✓</span>
                                    </button>
                                    <button className="w-8 h-8 bg-rose-50 text-rose-400 rounded-lg flex items-center justify-center active:scale-90 transition-all">
                                        <span className="text-[10px] font-black text-lg">×</span>
                                    </button>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Recent Job Post - Compact & Professional */}
                <div className="space-y-6 pb-12">
                    <div className="flex items-center justify-between px-1">
                        <h2 className="text-[12px] font-black uppercase tracking-[0.15em] text-slate-400">Recent job post</h2>
                        <button className="text-[10px] font-black uppercase tracking-widest text-[#185FA5]">See All</button>
                    </div>

                    {/* Category Tabs */}
                    <div className="flex overflow-x-auto space-x-2 no-scrollbar pb-2 -mx-4 px-4">
                        {['Cleaner', 'Driver', 'Mason', 'Electrician'].map((cat) => (
                            <button key={cat} className="bg-white px-5 py-3 rounded-2xl flex items-center space-x-2 shrink-0 border border-slate-100 active:scale-95 transition-all">
                                <span className="text-[10px] font-black uppercase tracking-widest text-slate-400">{cat}</span>
                            </button>
                        ))}
                    </div>

                    {/* Job Cards - Refined & Compact */}
                    <div className="space-y-3">
                        {[
                            { title: 'Home Cleaning', salary: '$20', loc: 'Marina, Dubai', icon: '🧼', time: '2h ago' },
                            { title: 'Mason Worker', salary: '$30', loc: 'Deira, Dubai', icon: '🏗️', time: '4h ago' },
                            { title: 'Plumbing Service', salary: '$45', loc: 'Al Barsha', icon: '🔧', time: '5h ago' }
                        ].map((job, i) => (
                            <Link 
                                key={i} 
                                href="/mobile/worker/job/detail"
                                className="bg-white p-5 rounded-[28px] border border-slate-50 shadow-sm flex items-center justify-between active:scale-[0.98] transition-all group"
                            >
                                <div className="flex items-center space-x-4">
                                    <div className="w-11 h-11 bg-slate-50 rounded-2xl flex items-center justify-center text-xl group-hover:bg-blue-50 transition-colors">
                                        {job.icon}
                                    </div>
                                    <div className="space-y-1">
                                        <h4 className="font-black text-slate-900 text-sm uppercase tracking-tight leading-none">{job.title}</h4>
                                        <div className="flex items-center space-x-2">
                                            <p className="text-[9px] font-bold text-slate-300 uppercase tracking-widest">{job.loc}</p>
                                            <span className="w-0.5 h-0.5 bg-slate-200 rounded-full" />
                                            <p className="text-[9px] font-bold text-slate-300 uppercase tracking-widest">{job.time}</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="text-right">
                                    <p className="text-sm font-black text-[#185FA5] leading-none mb-1">{job.salary}</p>
                                    <p className="text-[8px] font-black text-emerald-500 uppercase tracking-[0.2em] leading-none">Verified</p>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>
            </div>

            {/* Bottom Navigation */}
            <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/90 backdrop-blur-xl border-t border-slate-100 px-6 py-4 flex items-center justify-between z-50">
                <Link href="/mobile/worker/home" className="flex flex-col items-center space-y-1 text-[#185FA5]">
                    <Home className="w-5 h-5 fill-current" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Home</span>
                </Link>
                <Link href="/mobile/worker/explore" className="flex flex-col items-center space-y-1 text-slate-300">
                    <Compass className="w-5 h-5" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Explore</span>
                </Link>
                <Link href="/mobile/worker/announcements" className="flex flex-col items-center space-y-1 text-slate-300">
                    <Bell className="w-5 h-5" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Updates</span>
                </Link>
                <Link href="/mobile/worker/chat" className="flex flex-col items-center space-y-1 text-slate-300">
                    <MessageCircle className="w-5 h-5" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Chat</span>
                </Link>
                <Link href="/mobile/worker/profile" className="flex flex-col items-center space-y-1 text-slate-300">
                    <User className="w-5 h-5" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Profile</span>
                </Link>
            </div>
        </div>
    );
}
