import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    Home, 
    MessageCircle, 
    User, 
    Briefcase,
    Bell,
    ArrowLeft,
    Pencil,
    Star,
    FileText,
    Download,
    MapPin,
    Settings,
    ChevronRight,
    Compass,
    Clock,
    ShieldCheck
} from 'lucide-react';

export default function WorkerProfile() {
    return (
        <div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden pb-24">
            <Head title="Profile" />
            
            {/* Header */}
            <div className="px-6 pt-12 pb-4 bg-white flex items-center justify-between border-b border-slate-50 sticky top-0 z-50">
                <button onClick={() => window.history.back()} className="w-10 h-10 flex items-center justify-center text-slate-900">
                    <ArrowLeft className="w-5 h-5" />
                </button>
                <h1 className="text-sm font-black uppercase tracking-widest">Profile</h1>
                <Link href="/mobile/worker/profile/edit" className="w-10 h-10 flex items-center justify-center text-slate-900">
                    <Pencil className="w-5 h-5" />
                </Link>
            </div>

            <div className="flex-1 overflow-y-auto">
                {/* Profile Header */}
                <div className="flex flex-col items-center py-8 space-y-4">
                    <div className="w-28 h-28 rounded-full bg-slate-100 overflow-hidden border-4 border-slate-50 shadow-sm">
                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Danial" alt="avatar" className="w-full h-full object-cover" />
                    </div>
                    <div className="text-center space-y-1 px-10">
                        <h2 className="text-2xl font-black tracking-tight">Danial Donald</h2>
                        <p className="text-xs text-slate-400 font-bold leading-relaxed">
                            4901 Thornridge Cir. Shiloh, Hawaii 81063
                        </p>
                    </div>
                </div>

                {/* Stats Bar */}
                <div className="px-6 grid grid-cols-3 gap-3 mb-10">
                    <div className="bg-[#F9F9F9] p-5 rounded-3xl flex flex-col items-center justify-center space-y-1">
                        <p className="text-lg font-black">12</p>
                        <p className="text-[10px] text-slate-400 font-black uppercase tracking-widest">Complete</p>
                    </div>
                    <div className="bg-[#F9F9F9] p-5 rounded-3xl flex flex-col items-center justify-center space-y-1">
                        <div className="flex items-center space-x-1">
                            <p className="text-lg font-black">4.8</p>
                            <Star className="w-4 h-4 text-amber-400 fill-current" />
                        </div>
                        <p className="text-[10px] text-slate-400 font-black uppercase tracking-widest">Ratings</p>
                    </div>
                    <div className="bg-[#F9F9F9] p-5 rounded-3xl flex flex-col items-center justify-center space-y-1">
                        <p className="text-lg font-black">$ 50</p>
                        <p className="text-[10px] text-slate-400 font-black uppercase tracking-widest">Salary</p>
                    </div>
                </div>

                {/* Content Sections */}
                <div className="px-6 space-y-10 pb-10">
                    <div className="space-y-3">
                        <h3 className="font-black text-base uppercase tracking-tight">About Danial</h3>
                        <p className="text-sm text-slate-500 leading-relaxed font-medium">
                            I am Danial Donald, a passionate professional with over 10 years of experience. Specialized in high-quality service and customer satisfaction.
                        </p>
                    </div>

                    <div className="grid grid-cols-3 gap-6">
                        <div className="space-y-2">
                            <p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Gender:</p>
                            <p className="text-sm font-black text-slate-900 uppercase">Male</p>
                        </div>
                        <div className="space-y-2">
                            <p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Age:</p>
                            <p className="text-sm font-black text-slate-900 uppercase">32 years</p>
                        </div>
                        <div className="space-y-2">
                            <p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Experience:</p>
                            <p className="text-sm font-black text-slate-900 uppercase">Expert (10y)</p>
                        </div>
                    </div>

                    <div className="space-y-6">
                        <div className="space-y-2">
                            <p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Expertise</p>
                            <p className="text-sm font-black text-slate-900 uppercase tracking-tight">Plumbing, Cleaning, Electrician</p>
                        </div>

                        <div className="space-y-3">
                            <p className="text-[10px] text-slate-300 font-black uppercase tracking-widest leading-none">Languages</p>
                            <div className="flex flex-wrap gap-2.5 pt-1">
                                {['English', 'Arabic', 'Tagalog', 'Swahili'].map((lang) => (
                                    <span key={lang} className="px-4 py-2 bg-slate-50 text-slate-500 rounded-full text-[10px] font-black uppercase tracking-widest border border-slate-100 shadow-sm">
                                        {lang}
                                    </span>
                                ))}
                            </div>
                        </div>
                    </div>

                    <div className="space-y-4">
                        <h3 className="font-black text-base uppercase tracking-tight">My Documents</h3>
                        <div className="bg-[#F9F9F9] p-8 rounded-[40px] border border-slate-100 shadow-sm space-y-6">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-4">
                                    <div className="w-12 h-12 bg-blue-50 text-[#185FA5] rounded-2xl flex items-center justify-center">
                                        <FileText className="w-6 h-6" />
                                    </div>
                                    <div>
                                        <p className="text-sm font-black text-slate-900 uppercase">Passport.JPG</p>
                                        <p className="text-[10px] text-emerald-500 font-black uppercase tracking-widest">Verified</p>
                                    </div>
                                </div>
                                <ShieldCheck className="w-6 h-6 text-emerald-500" />
                            </div>
                            
                            <div className="pt-6 border-t border-white grid grid-cols-2 gap-6">
                                <div>
                                    <p className="text-[9px] text-slate-300 font-black uppercase tracking-widest leading-none mb-1.5">Passport No</p>
                                    <p className="text-xs font-black text-slate-700">Z12345678</p>
                                </div>
                                <div>
                                    <p className="text-[9px] text-slate-300 font-black uppercase tracking-widest leading-none mb-1.5">Expiry Date</p>
                                    <p className="text-xs font-black text-slate-700">12/12/2028</p>
                                </div>
                            </div>
                        </div>
                    </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-slate-300">
                    <Home className="w-5 h-5" />
                    <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-[#185FA5]">
                    <User className="w-5 h-5 fill-current" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Profile</span>
                </Link>
            </div>
        </div>
    );
}


