import React, { useState } from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    ArrowLeft,
    Check,
    Save,
    MapPin,
    Briefcase,
    Globe
} from 'lucide-react';

export default function WorkerEditProfile() {
    const commonSkills = [
        { name: 'Cleaning', icon: '🧼' },
        { name: 'Mason', icon: '🏗️' },
        { name: 'Electric', icon: '⚡' },
        { name: 'Plumb', icon: '🔧' },
        { name: 'Paint', icon: '🎨' },
        { name: 'Helper', icon: '📦' }
    ];
    const commonAreas = ['Marina', 'Deira', 'Bur Dubai', 'Jebel Ali', 'Al Quoz', 'City'];
    const commonLangs = ['English', 'Arabic', 'Hindi', 'Urdu', 'Tagalog'];
    
    const [selectedSkills, setSelectedSkills] = useState(['Cleaning']);
    const [otherSkill, setOtherSkill] = useState('');
    const [showOtherInput, setShowOtherInput] = useState(false);
    const [selectedAreas, setSelectedAreas] = useState(['Deira']);
    const [selectedLangs, setSelectedLangs] = useState(['English']);
    const [saved, setSaved] = useState(false);

    const toggle = (val, list, setter) => {
        if (list.includes(val)) {
            setter(list.filter(item => item !== val));
        } else {
            setter([...list, val]);
        }
    };

    const handleSave = () => {
        setSaved(true);
        setTimeout(() => setSaved(false), 2000);
    };

    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">
            <Head title="Quick Edit" />
            
            {/* Header */}
            <div className="px-6 pt-12 pb-6 bg-white sticky top-0 z-50 flex items-center justify-between border-b border-slate-50">
                <button onClick={() => window.history.back()} className="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-900 border border-slate-100 active:scale-95 transition-all">
                    <ArrowLeft className="w-6 h-6" />
                </button>
                <h1 className="text-sm font-black uppercase tracking-tight">Edit Skills</h1>
                <div className="w-12" />
            </div>

            <div className="flex-1 px-8 py-8 space-y-12 overflow-y-auto pb-32">
                {/* Work Section */}
                <div className="space-y-6">
                    <div className="flex items-center space-x-3">
                        <Briefcase className="w-5 h-5 text-[#185FA5]" />
                        <h2 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">My Skills</h2>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        {commonSkills.map((skill) => (
                            <button
                                key={skill.name}
                                onClick={() => toggle(skill.name, selectedSkills, setSelectedSkills)}
                                className={`p-6 rounded-[32px] border-2 text-center transition-all active:scale-95 flex flex-col items-center space-y-3 ${
                                    selectedSkills.includes(skill.name) 
                                        ? 'bg-[#185FA5] border-[#185FA5] text-white shadow-xl shadow-blue-500/20' 
                                        : 'bg-slate-50 border-slate-50 text-slate-400'
                                }`}
                            >
                                <span className="text-2xl">{skill.icon}</span>
                                <span className="text-[10px] font-black uppercase tracking-tight">{skill.name}</span>
                            </button>
                        ))}
                        
                        {/* Other Skill Button */}
                        <button
                            onClick={() => setShowOtherInput(!showOtherInput)}
                            className={`p-6 rounded-[32px] border-2 text-center transition-all active:scale-95 flex flex-col items-center justify-center space-y-3 ${
                                showOtherInput || otherSkill
                                    ? 'bg-[#185FA5] border-[#185FA5] text-white shadow-xl shadow-blue-500/20' 
                                    : 'bg-slate-50 border-slate-50 text-slate-400'
                            }`}
                        >
                            <span className="text-2xl">➕</span>
                            <span className="text-[10px] font-black uppercase tracking-tight">Other</span>
                        </button>
                    </div>

                    {showOtherInput && (
                        <div className="animate-in fade-in slide-in-from-top-2 duration-300">
                            <input 
                                type="text"
                                placeholder="Type your skill..."
                                className="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl text-[11px] font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-100 transition-all outline-none"
                                value={otherSkill}
                                onChange={(e) => setOtherSkill(e.target.value)}
                                autoFocus
                            />
                        </div>
                    )}
                </div>

                {/* Locations Section */}
                <div className="space-y-6">
                    <div className="flex items-center space-x-3">
                        <MapPin className="w-5 h-5 text-[#185FA5]" />
                        <h2 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">My Locations</h2>
                    </div>
                    <div className="flex flex-wrap gap-2">
                        {commonAreas.map((area) => (
                            <button
                                key={area}
                                onClick={() => toggle(area, selectedAreas, setSelectedAreas)}
                                className={`px-6 py-4 rounded-2xl border-2 transition-all active:scale-95 ${
                                    selectedAreas.includes(area) 
                                        ? 'bg-[#185FA5] border-[#185FA5] text-white' 
                                        : 'bg-slate-50 border-slate-50 text-slate-400'
                                }`}
                            >
                                <span className="text-[10px] font-black uppercase tracking-tight">{area}</span>
                            </button>
                        ))}
                    </div>
                </div>

                {/* Languages Section */}
                <div className="space-y-6">
                    <div className="flex items-center space-x-3">
                        <Globe className="w-5 h-5 text-[#185FA5]" />
                        <h2 className="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400">My Languages</h2>
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                        {commonLangs.map((lang) => (
                            <button
                                key={lang}
                                onClick={() => toggle(lang, selectedLangs, setSelectedLangs)}
                                className={`py-4 rounded-2xl border-2 transition-all active:scale-95 ${
                                    selectedLangs.includes(lang) 
                                        ? 'bg-[#185FA5] border-[#185FA5] text-white' 
                                        : 'bg-slate-50 border-slate-50 text-slate-400'
                                }`}
                            >
                                <span className="text-[10px] font-black uppercase tracking-tight">{lang}</span>
                            </button>
                        ))}
                    </div>
                </div>
            </div>

            {/* Huge Save Button */}
            <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-8 bg-white/90 backdrop-blur-xl border-t border-slate-50 z-50">
                <button 
                    onClick={handleSave}
                    className={`w-full py-5 rounded-[28px] font-black text-[12px] uppercase tracking-[0.2em] shadow-2xl transition-all flex items-center justify-center space-x-3 active:scale-95 ${
                        saved ? 'bg-emerald-500 text-white shadow-emerald-500/20' : 'bg-[#185FA5] text-white shadow-blue-500/20'
                    }`}
                >
                    {saved ? <Check className="w-6 h-6" /> : <Save className="w-6 h-6" />}
                    <span>{saved ? 'Changes Saved!' : 'Update Profile'}</span>
                </button>
            </div>
        </div>
    );
}

