import React, { useState } from 'react';
import { Head, Link, router } from '@inertiajs/react';
import EmployerLayout from '@/Layouts/EmployerLayout';
import { 
    ArrowLeft, 
    Calendar, 
    MapPin, 
    DollarSign, 
    Send,
    CheckCircle2,
    ShieldCheck,
    Clock
} from 'lucide-react';

export default function Confirm({ worker }) {
    const [startDate, setStartDate] = useState('');
    const [location, setLocation] = useState('');
    const [offeredSalary, setOfferedSalary] = useState(worker.salary);

    const handleSubmit = (e) => {
        e.preventDefault();
        // Perform a real POST submission to create the Job Offer in DB
        router.post(`/employer/workers/${worker.id}/hire`, {
            work_date: startDate,
            location: location,
            salary: offeredSalary,
            notes: 'Hiring offer dispatched from employer panel.'
        });
    };

    return (
        <EmployerLayout title="Confirm Hire">
            <Head title={`Hire ${worker.name}`} />

            <div className="max-w-3xl mx-auto space-y-6 pb-12">
                <Link
                    href={`/employer/workers/${worker.id}`}
                    className="inline-flex items-center space-x-2 text-xs font-bold text-slate-600 hover:text-[#185FA5] transition-colors"
                >
                    <ArrowLeft className="w-4 h-4" />
                    <span>Back to Profile</span>
                </Link>

                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* Worker Summary Card */}
                    <div className="lg:col-span-1 space-y-6">
                        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                            <div className="bg-slate-50 p-6 border-b border-slate-100 flex flex-col items-center text-center">
                                <div className="w-20 h-20 rounded-full bg-blue-100 text-[#185FA5] flex items-center justify-center font-bold text-3xl border-4 border-white shadow-sm mb-3">
                                    {worker.name.charAt(0)}
                                </div>
                                <h3 className="font-extrabold text-slate-900 tracking-tight">{worker.name}</h3>
                                <p className="text-xs font-bold text-[#185FA5] uppercase tracking-widest mt-1">{worker.category}</p>
                            </div>
                            <div className="p-6 space-y-4">
                                <div className="flex items-center justify-between text-xs font-medium">
                                    <span className="text-slate-500 uppercase tracking-tighter">Expected Salary</span>
                                    <span className="text-slate-900 font-bold">{worker.salary} AED</span>
                                </div>
                                <div className="flex items-center justify-between text-xs font-medium">
                                    <span className="text-slate-500 uppercase tracking-tighter">Nationality</span>
                                    <span className="text-slate-900 font-bold">{worker.nationality}</span>
                                </div>
                                <div className="pt-4 border-t border-slate-50">
                                    <div className="flex items-center space-x-2 text-[10px] text-emerald-600 font-bold uppercase">
                                        <ShieldCheck className="w-3.5 h-3.5" />
                                        <span>Documents Verified</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Offer Form */}
                    <div className="lg:col-span-2">
                        <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden h-full flex flex-col">
                            <div className="p-6 border-b border-slate-100 bg-white">
                                <h2 className="text-lg font-black text-slate-900 tracking-tight">Step 1: Customize Your Offer</h2>
                                <p className="text-xs text-slate-500 font-medium mt-1 uppercase tracking-widest">Enter the employment details below</p>
                            </div>

                            <form onSubmit={handleSubmit} className="p-8 space-y-6 flex-1">
                                <div className="space-y-4">
                                    {/* Start Date */}
                                    <div className="space-y-2">
                                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center space-x-1.5 ml-1">
                                            <Calendar className="w-3.5 h-3.5" />
                                            <span>Requested Start Date</span>
                                        </label>
                                        <input 
                                            type="date" 
                                            required
                                            value={startDate}
                                            onChange={(e) => setStartDate(e.target.value)}
                                            className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
                                        />
                                    </div>

                                    {/* Location */}
                                    <div className="space-y-2">
                                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center space-x-1.5 ml-1">
                                            <MapPin className="w-3.5 h-3.5" />
                                            <span>Job Location</span>
                                        </label>
                                        <input 
                                            type="text" 
                                            required
                                            placeholder="e.g. Dubai Marina, Villa 12"
                                            value={location}
                                            onChange={(e) => setLocation(e.target.value)}
                                            className="w-full px-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
                                        />
                                    </div>

                                    {/* Salary */}
                                    <div className="space-y-2">
                                        <label className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center space-x-1.5 ml-1">
                                            <DollarSign className="w-3.5 h-3.5" />
                                            <span>Offered Salary (AED / month)</span>
                                        </label>
                                        <div className="relative">
                                            <input 
                                                type="number" 
                                                required
                                                value={offeredSalary}
                                                onChange={(e) => setOfferedSalary(e.target.value)}
                                                className="w-full pl-10 pr-4 py-3 bg-slate-50 border border-slate-100 rounded-xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-blue-500/10 focus:border-[#185FA5] outline-none transition-all"
                                            />
                                            <div className="absolute left-4 top-1/2 -translate-y-1/2 font-bold text-slate-400">
                                                $
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="pt-6 border-t border-slate-50 space-y-4">
                                    <div className="bg-blue-50/50 p-4 rounded-xl border border-blue-100 flex items-start space-x-3">
                                        <Clock className="w-5 h-5 text-[#185FA5] flex-shrink-0 mt-0.5" />
                                        <p className="text-[11px] text-[#185FA5] font-bold leading-relaxed uppercase tracking-tight">
                                            Once you send this offer, the worker will be notified immediately. You can track the status in your Hired Workers page.
                                        </p>
                                    </div>

                                    <button
                                        type="submit"
                                        className="w-full bg-[#185FA5] text-white py-4 rounded-xl font-black text-sm uppercase tracking-widest shadow-xl shadow-blue-500/20 hover:bg-[#144f8a] active:scale-[0.98] transition-all flex items-center justify-center space-x-3"
                                    >
                                        <Send className="w-5 h-5" />
                                        <span>Send Offer to {worker.name}</span>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </EmployerLayout>
    );
}
