import { Head, Link, router, usePage } from '@inertiajs/react';
import { useState } from 'react';
import AppLayout from '@/Layouts/AppLayout';
import { ArrowLeft, Copy, RefreshCw, User, GraduationCap, CreditCard, Heart, Baby, FolderOpen, Briefcase, BookOpen, Activity, Phone, Trash2, Plus } from 'lucide-react';

interface Staff {
    id: number;
    staff_no: string;
    full_name: string;
    preferred_name: string | null;
    ic_no: string | null;
    passport_no: string | null;
    date_of_birth: string | null;
    gender: string | null;
    nationality: string | null;
    religion: string | null;
    race: string | null;
    marital_status: string | null;
    phone: string | null;
    mobile_no: string | null;
    email: string | null;
    personal_email: string | null;
    work_email: string | null;
    address_line1: string | null;
    address_line2: string | null;
    city: string | null;
    state: string | null;
    postcode: string | null;
    country: string | null;
    job_title: string | null;
    job_grade: string | null;
    employment_type: string | null;
    employment_status: string | null;
    join_date: string | null;
    confirmation_date: string | null;
    basic_salary: string | null;
    status: string;
    self_service_token: string | null;
    company: { name: string } | null;
    department: { name: string } | null;
    unit: { name: string } | null;
}

interface Education {
    id: number;
    institution: string;
    qualification: string;
    field_of_study: string | null;
    grade: string | null;
    start_date: string | null;
    end_date: string | null;
    is_highest: boolean;
}

interface Banking {
    id: number;
    bank_name: string;
    account_no: string;
    account_name: string | null;
    account_type: string | null;
    is_primary: boolean;
}

interface Spouse {
    id: number;
    full_name: string;
    ic_no: string | null;
    date_of_birth: string | null;
    nationality: string | null;
    occupation: string | null;
    phone: string | null;
    marriage_date: string | null;
    status: string;
}

interface Child {
    id: number;
    full_name: string;
    ic_no: string | null;
    date_of_birth: string | null;
    gender: string | null;
    is_dependent: boolean;
    is_student: boolean;
}

interface StaffFile {
    id: number;
    file_name?: string;
    file_path: string;
    file_type?: string;
    created_at: string;
}

interface EmploymentHistory { id: number; job_title: string; department: string | null; employment_type: string | null; start_date: string; end_date: string | null; remarks: string | null; }
interface Training { id: number; training_name: string; provider: string | null; training_type: string | null; start_date: string; end_date: string | null; duration_hours: number | null; status: string | null; certificate_no: string | null; }
interface MedicalHistory { id: number; condition_name: string; diagnosed_date: string | null; treatment: string | null; is_chronic: boolean; notes: string | null; }
interface MedicalDeclaration { id: number; declaration_date: string; is_fit_for_duty: boolean; has_pre_existing_conditions: boolean; conditions_detail: string | null; doctor_name: string | null; clinic_name: string | null; }
interface StaffAddress { id: number; label: string | null; address: string; city: string | null; state: string | null; postcode: string | null; country: string | null; is_current: boolean; }
interface StaffPhone { id: number; phone: string; type: string | null; is_primary: boolean; }
interface StaffSeparation { id: number; separation_type: string; last_working_day: string; effective_date: string; reason: string | null; is_eligible_rehire: boolean; }

interface Props {
    staff: Staff;
    education: Education[];
    banking: Banking[];
    spouses: Spouse[];
    children: Child[];
    files: StaffFile[];
    employmentHistory: EmploymentHistory[];
    training: Training[];
    medicalHistory: MedicalHistory[];
    medicalDeclarations: MedicalDeclaration[];
    addresses: StaffAddress[];
    phones: StaffPhone[];
    separations: StaffSeparation[];
    selfServiceUrl: string | null;
}

interface PageProps {
    flash: { success?: string; error?: string };
    [key: string]: unknown;
}

const TABS = [
    { key: 'profile',    label: 'Profile',    icon: User },
    { key: 'education',  label: 'Education',  icon: GraduationCap },
    { key: 'banking',    label: 'Banking',    icon: CreditCard },
    { key: 'spouses',    label: 'Spouses',    icon: Heart },
    { key: 'children',   label: 'Children',   icon: Baby },
    { key: 'files',      label: 'Files',      icon: FolderOpen },
    { key: 'employment', label: 'Employment', icon: Briefcase },
    { key: 'training',   label: 'Training',   icon: BookOpen },
    { key: 'medical',    label: 'Medical',    icon: Activity },
    { key: 'contacts',   label: 'Contacts',   icon: Phone },
];

const STATUS_COLORS: Record<string, string> = {
    active: 'bg-green-50 text-green-700',
    inactive: 'bg-gray-100 text-gray-600',
    on_leave: 'bg-amber-50 text-amber-700',
    medical_leave: 'bg-blue-50 text-blue-700',
    suspended: 'bg-red-50 text-red-700',
    resigned: 'bg-orange-50 text-orange-700',
    terminated: 'bg-red-50 text-red-700',
};

function Field({ label, value }: { label: string; value: string | null | undefined }) {
    return (
        <div>
            <p className="text-xs font-medium text-gray-500 uppercase tracking-wide">{label}</p>
            <p className="mt-0.5 text-sm text-gray-900">{value || '—'}</p>
        </div>
    );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
    return (
        <div className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
            <h3 className="mb-4 text-sm font-semibold text-gray-900">{title}</h3>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">{children}</div>
        </div>
    );
}

export default function StaffShow({ staff, education, banking, spouses, children, files, employmentHistory, training, medicalHistory, medicalDeclarations, addresses, phones, separations, selfServiceUrl }: Props) {
    const { flash } = usePage<PageProps>().props;
    const [activeTab, setActiveTab] = useState('profile');
    const [copied, setCopied] = useState(false);

    function copyUrl() {
        if (selfServiceUrl) {
            navigator.clipboard.writeText(selfServiceUrl).then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); });
        }
    }

    function generateToken() {
        router.post(`/hr-portal/staff/${staff.id}/generate-token`);
    }

    return (
        <AppLayout title={staff.full_name}>
            <Head title={staff.full_name} />

            {flash?.success && (
                <div className="mb-4 rounded-lg bg-green-50 border border-green-200 px-4 py-3 text-sm text-green-700">{flash.success}</div>
            )}

            {/* Back + header */}
            <div className="mb-5 space-y-4">
                <Link href="/hr-portal/staff" className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900">
                    <ArrowLeft className="h-4 w-4" /> Back to Staff
                </Link>

                <div className="flex flex-wrap items-start justify-between gap-4 rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
                    <div className="flex items-center gap-4">
                        <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-600 text-xl font-bold text-white">
                            {staff.full_name.charAt(0).toUpperCase()}
                        </div>
                        <div>
                            <h1 className="text-xl font-bold text-gray-900">{staff.full_name}</h1>
                            <div className="mt-1 flex flex-wrap items-center gap-2 text-sm text-gray-500">
                                <span className="font-mono">{staff.staff_no}</span>
                                {staff.job_title && <span>· {staff.job_title}</span>}
                                {staff.company && <span>· {staff.company.name}</span>}
                                {staff.department && <span>· {staff.department.name}</span>}
                            </div>
                        </div>
                    </div>
                    <div className="flex items-center gap-3 flex-wrap">
                        <span className={`rounded-full px-3 py-1 text-xs font-medium capitalize ${STATUS_COLORS[staff.status] ?? 'bg-gray-100 text-gray-600'}`}>
                            {staff.status.replace('_', ' ')}
                        </span>

                        {selfServiceUrl ? (
                            <div className="flex items-center gap-2 rounded-lg border border-gray-300 bg-gray-50 px-3 py-1.5 text-xs text-gray-600">
                                <span className="max-w-48 truncate">{selfServiceUrl}</span>
                                <button onClick={copyUrl} title="Copy link" className="flex-shrink-0 text-gray-400 hover:text-blue-600">
                                    <Copy className="h-3.5 w-3.5" />
                                </button>
                                {copied && <span className="text-green-600 font-medium">Copied!</span>}
                            </div>
                        ) : (
                            <button onClick={generateToken}
                                className="flex items-center gap-1.5 rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50">
                                <RefreshCw className="h-3.5 w-3.5" /> Generate Self-Service Link
                            </button>
                        )}
                    </div>
                </div>
            </div>

            {/* Tabs */}
            <div className="mb-4 flex gap-1 overflow-x-auto rounded-xl border border-gray-200 bg-white p-1 shadow-sm">
                {TABS.map(tab => (
                    <button
                        key={tab.key}
                        onClick={() => setActiveTab(tab.key)}
                        className={`flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors ${
                            activeTab === tab.key ? 'bg-blue-600 text-white shadow-sm' : 'text-gray-600 hover:bg-gray-100'
                        }`}
                    >
                        <tab.icon className="h-4 w-4" />
                        {tab.label}
                    </button>
                ))}
            </div>

            {/* Tab content */}
            {activeTab === 'profile' && (
                <div className="space-y-4">
                    <Section title="Personal Information">
                        <Field label="Full Name" value={staff.full_name} />
                        <Field label="Preferred Name" value={staff.preferred_name} />
                        <Field label="IC No" value={staff.ic_no} />
                        <Field label="Passport No" value={staff.passport_no} />
                        <Field label="Date of Birth" value={staff.date_of_birth} />
                        <Field label="Gender" value={staff.gender} />
                        <Field label="Nationality" value={staff.nationality} />
                        <Field label="Religion" value={staff.religion} />
                        <Field label="Race" value={staff.race} />
                        <Field label="Marital Status" value={staff.marital_status} />
                    </Section>

                    <Section title="Contact Information">
                        <Field label="Phone" value={staff.phone} />
                        <Field label="Mobile" value={staff.mobile_no} />
                        <Field label="Email" value={staff.email} />
                        <Field label="Personal Email" value={staff.personal_email} />
                        <Field label="Work Email" value={staff.work_email} />
                    </Section>

                    <Section title="Address">
                        <Field label="Address Line 1" value={staff.address_line1} />
                        <Field label="Address Line 2" value={staff.address_line2} />
                        <Field label="City" value={staff.city} />
                        <Field label="State" value={staff.state} />
                        <Field label="Postcode" value={staff.postcode} />
                        <Field label="Country" value={staff.country} />
                    </Section>

                    <Section title="Employment">
                        <Field label="Job Title" value={staff.job_title} />
                        <Field label="Job Grade" value={staff.job_grade} />
                        <Field label="Employment Type" value={staff.employment_type} />
                        <Field label="Employment Status" value={staff.employment_status} />
                        <Field label="Join Date" value={staff.join_date} />
                        <Field label="Confirmation Date" value={staff.confirmation_date} />
                        <Field label="Department" value={staff.department?.name} />
                        <Field label="Unit" value={staff.unit?.name} />
                        <Field label="Basic Salary" value={staff.basic_salary ? `RM ${parseFloat(staff.basic_salary).toLocaleString()}` : null} />
                    </Section>
                </div>
            )}

            {activeTab === 'education' && (
                <div className="space-y-3">
                    {education.map(edu => (
                        <div key={edu.id} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
                            <div className="flex items-start justify-between gap-3">
                                <div>
                                    <div className="flex items-center gap-2">
                                        <p className="font-semibold text-gray-900">{edu.qualification}</p>
                                        {edu.is_highest && (
                                            <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">Highest</span>
                                        )}
                                    </div>
                                    <p className="text-sm text-gray-600">{edu.institution}</p>
                                    {edu.field_of_study && <p className="text-sm text-gray-500">{edu.field_of_study}</p>}
                                </div>
                                <div className="text-right text-xs text-gray-500">
                                    {edu.grade && <p className="font-medium">{edu.grade}</p>}
                                    <p>{[edu.start_date, edu.end_date].filter(Boolean).join(' – ')}</p>
                                </div>
                            </div>
                        </div>
                    ))}
                    {education.length === 0 && (
                        <div className="rounded-xl border border-dashed border-gray-300 bg-white py-12 text-center">
                            <GraduationCap className="mx-auto h-8 w-8 text-gray-400" />
                            <p className="mt-2 text-sm text-gray-500">No education records.</p>
                        </div>
                    )}
                </div>
            )}

            {activeTab === 'banking' && (
                <div className="space-y-3">
                    {banking.map(bank => (
                        <div key={bank.id} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
                            <div className="flex items-start justify-between gap-3">
                                <div>
                                    <div className="flex items-center gap-2">
                                        <p className="font-semibold text-gray-900">{bank.bank_name}</p>
                                        {bank.is_primary && (
                                            <span className="rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">Primary</span>
                                        )}
                                    </div>
                                    {bank.account_name && <p className="text-sm text-gray-600">{bank.account_name}</p>}
                                    {bank.account_type && <p className="text-xs text-gray-500 capitalize">{bank.account_type}</p>}
                                </div>
                                <p className="font-mono text-sm text-gray-700">{bank.account_no}</p>
                            </div>
                        </div>
                    ))}
                    {banking.length === 0 && (
                        <div className="rounded-xl border border-dashed border-gray-300 bg-white py-12 text-center">
                            <CreditCard className="mx-auto h-8 w-8 text-gray-400" />
                            <p className="mt-2 text-sm text-gray-500">No banking records.</p>
                        </div>
                    )}
                </div>
            )}

            {activeTab === 'spouses' && (
                <div className="space-y-3">
                    {spouses.map(spouse => (
                        <div key={spouse.id} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
                            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                                <Field label="Full Name" value={spouse.full_name} />
                                <Field label="IC No" value={spouse.ic_no} />
                                <Field label="Date of Birth" value={spouse.date_of_birth} />
                                <Field label="Nationality" value={spouse.nationality} />
                                <Field label="Occupation" value={spouse.occupation} />
                                <Field label="Phone" value={spouse.phone} />
                                <Field label="Marriage Date" value={spouse.marriage_date} />
                                <div>
                                    <p className="text-xs font-medium text-gray-500 uppercase tracking-wide">Status</p>
                                    <span className={`inline-flex mt-0.5 rounded-full px-2 py-0.5 text-xs font-medium capitalize ${spouse.status === 'active' ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-600'}`}>
                                        {spouse.status}
                                    </span>
                                </div>
                            </div>
                        </div>
                    ))}
                    {spouses.length === 0 && (
                        <div className="rounded-xl border border-dashed border-gray-300 bg-white py-12 text-center">
                            <Heart className="mx-auto h-8 w-8 text-gray-400" />
                            <p className="mt-2 text-sm text-gray-500">No spouse records.</p>
                        </div>
                    )}
                </div>
            )}

            {activeTab === 'children' && (
                <div className="space-y-3">
                    {children.map((child, i) => (
                        <div key={child.id} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
                            <div className="flex items-center gap-2 mb-3">
                                <span className="flex h-6 w-6 items-center justify-center rounded-full bg-blue-50 text-xs font-semibold text-blue-700">{i + 1}</span>
                                <p className="font-semibold text-gray-900">{child.full_name}</p>
                                <div className="flex gap-1">
                                    {child.is_dependent && <span className="rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700">Dependent</span>}
                                    {child.is_student && <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">Student</span>}
                                </div>
                            </div>
                            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                                <Field label="IC No" value={child.ic_no} />
                                <Field label="Date of Birth" value={child.date_of_birth} />
                                <Field label="Gender" value={child.gender} />
                            </div>
                        </div>
                    ))}
                    {children.length === 0 && (
                        <div className="rounded-xl border border-dashed border-gray-300 bg-white py-12 text-center">
                            <Baby className="mx-auto h-8 w-8 text-gray-400" />
                            <p className="mt-2 text-sm text-gray-500">No children records.</p>
                        </div>
                    )}
                </div>
            )}

            {activeTab === 'files' && (
                <div className="space-y-3">
                    {files.map(file => (
                        <div key={file.id} className="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
                            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gray-100">
                                <FolderOpen className="h-4 w-4 text-gray-500" />
                            </div>
                            <div className="flex-1 min-w-0">
                                <p className="truncate text-sm font-medium text-gray-900">{file.file_name ?? file.file_path}</p>
                                <p className="text-xs text-gray-500">{new Date(file.created_at).toLocaleDateString()}</p>
                            </div>
                        </div>
                    ))}
                    {files.length === 0 && (
                        <div className="rounded-xl border border-dashed border-gray-300 bg-white py-12 text-center">
                            <FolderOpen className="mx-auto h-8 w-8 text-gray-400" />
                            <p className="mt-2 text-sm text-gray-500">No files uploaded.</p>
                        </div>
                    )}
                </div>
            )}

            {activeTab === 'employment' && (
                <div className="space-y-3">
                    {employmentHistory.length === 0 && (
                        <div className="rounded-xl border border-dashed border-gray-300 bg-white py-12 text-center">
                            <Briefcase className="mx-auto h-8 w-8 text-gray-400" />
                            <p className="mt-2 text-sm text-gray-500">No employment history recorded.</p>
                        </div>
                    )}
                    {employmentHistory.map(e => (
                        <div key={e.id} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
                            <div className="flex items-start justify-between gap-4">
                                <div>
                                    <p className="font-semibold text-gray-900">{e.job_title}</p>
                                    <div className="mt-1 flex flex-wrap gap-2 text-xs text-gray-500">
                                        {e.department && <span className="rounded-full bg-gray-100 px-2 py-0.5">{e.department}</span>}
                                        {e.employment_type && <span className="rounded-full bg-blue-50 px-2 py-0.5 text-blue-700">{e.employment_type}</span>}
                                    </div>
                                    {e.remarks && <p className="mt-1.5 text-sm text-gray-500">{e.remarks}</p>}
                                </div>
                                <div className="text-right text-xs text-gray-500 shrink-0">
                                    <p>{e.start_date} – {e.end_date ?? 'Present'}</p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}

            {activeTab === 'training' && (
                <div className="space-y-3">
                    {training.length === 0 && (
                        <div className="rounded-xl border border-dashed border-gray-300 bg-white py-12 text-center">
                            <BookOpen className="mx-auto h-8 w-8 text-gray-400" />
                            <p className="mt-2 text-sm text-gray-500">No training records.</p>
                        </div>
                    )}
                    {training.map(t => (
                        <div key={t.id} className="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
                            <div className="flex items-start justify-between gap-4">
                                <div className="flex-1 min-w-0">
                                    <p className="font-semibold text-gray-900">{t.training_name}</p>
                                    <div className="mt-1 flex flex-wrap gap-2 text-xs">
                                        {t.provider && <span className="text-gray-500">{t.provider}</span>}
                                        {t.training_type && <span className="rounded-full bg-purple-50 px-2 py-0.5 text-purple-700">{t.training_type}</span>}
                                        {t.status && <span className={`rounded-full px-2 py-0.5 font-medium ${t.status === 'completed' ? 'bg-green-50 text-green-700' : 'bg-amber-50 text-amber-700'}`}>{t.status}</span>}
                                    </div>
                                    {t.certificate_no && <p className="mt-1 text-xs text-gray-500">Cert: {t.certificate_no}</p>}
                                </div>
                                <div className="text-right text-xs text-gray-500 shrink-0">
                                    <p>{t.start_date}{t.end_date ? ` – ${t.end_date}` : ''}</p>
                                    {t.duration_hours && <p>{t.duration_hours}h</p>}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            )}

            {activeTab === 'medical' && (
                <div className="space-y-4">
                    <div>
                        <h3 className="mb-2 text-sm font-semibold text-gray-700">Conditions</h3>
                        {medicalHistory.length === 0 ? (
                            <div className="rounded-xl border border-dashed border-gray-300 bg-white py-8 text-center text-sm text-gray-400">No medical history.</div>
                        ) : (
                            <div className="space-y-2">
                                {medicalHistory.map(m => (
                                    <div key={m.id} className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
                                        <div className="flex items-start justify-between">
                                            <div>
                                                <div className="flex items-center gap-2">
                                                    <p className="font-medium text-gray-900">{m.condition_name}</p>
                                                    {m.is_chronic && <span className="rounded-full bg-red-50 px-2 py-0.5 text-xs font-medium text-red-700">Chronic</span>}
                                                </div>
                                                {m.treatment && <p className="text-sm text-gray-500">Treatment: {m.treatment}</p>}
                                                {m.notes && <p className="mt-1 text-xs text-gray-400">{m.notes}</p>}
                                            </div>
                                            {m.diagnosed_date && <p className="text-xs text-gray-400">{m.diagnosed_date}</p>}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                    <div>
                        <h3 className="mb-2 text-sm font-semibold text-gray-700">Medical Declarations</h3>
                        {medicalDeclarations.length === 0 ? (
                            <div className="rounded-xl border border-dashed border-gray-300 bg-white py-8 text-center text-sm text-gray-400">No declarations on file.</div>
                        ) : (
                            <div className="space-y-2">
                                {medicalDeclarations.map(d => (
                                    <div key={d.id} className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
                                        <div className="flex items-start justify-between">
                                            <div>
                                                <div className="flex items-center gap-2">
                                                    <p className="font-medium text-gray-900">{d.declaration_date}</p>
                                                    <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${d.is_fit_for_duty ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}`}>
                                                        {d.is_fit_for_duty ? 'Fit for Duty' : 'Unfit'}
                                                    </span>
                                                </div>
                                                {d.has_pre_existing_conditions && d.conditions_detail && <p className="text-sm text-gray-500">{d.conditions_detail}</p>}
                                                {d.doctor_name && <p className="text-xs text-gray-400">Dr. {d.doctor_name}{d.clinic_name ? ` · ${d.clinic_name}` : ''}</p>}
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                </div>
            )}

            {activeTab === 'contacts' && (
                <div className="space-y-4">
                    <div>
                        <h3 className="mb-2 text-sm font-semibold text-gray-700">Phone Numbers</h3>
                        {phones.length === 0 ? (
                            <div className="rounded-xl border border-dashed border-gray-300 bg-white py-8 text-center text-sm text-gray-400">No phone numbers on file.</div>
                        ) : (
                            <div className="space-y-2">
                                {phones.map(p => (
                                    <div key={p.id} className="flex items-center gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
                                        <Phone className="h-4 w-4 text-gray-400 shrink-0" />
                                        <p className="font-medium text-gray-900">{p.phone}</p>
                                        {p.type && <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-500 capitalize">{p.type}</span>}
                                        {p.is_primary && <span className="rounded-full bg-blue-50 px-2 py-0.5 text-xs font-medium text-blue-700">Primary</span>}
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                    <div>
                        <h3 className="mb-2 text-sm font-semibold text-gray-700">Addresses</h3>
                        {addresses.length === 0 ? (
                            <div className="rounded-xl border border-dashed border-gray-300 bg-white py-8 text-center text-sm text-gray-400">No addresses on file.</div>
                        ) : (
                            <div className="space-y-2">
                                {addresses.map(a => (
                                    <div key={a.id} className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
                                        <div className="flex items-start justify-between">
                                            <div>
                                                <div className="flex items-center gap-2 mb-1">
                                                    {a.label && <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-600">{a.label}</span>}
                                                    {a.is_current && <span className="rounded-full bg-green-50 px-2 py-0.5 text-xs font-medium text-green-700">Current</span>}
                                                </div>
                                                <p className="text-sm text-gray-900">{a.address}</p>
                                                <p className="text-xs text-gray-500">{[a.city, a.state, a.postcode, a.country].filter(Boolean).join(', ')}</p>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                    {separations.length > 0 && (
                        <div>
                            <h3 className="mb-2 text-sm font-semibold text-gray-700">Separation</h3>
                            {separations.map(s => (
                                <div key={s.id} className="rounded-xl border border-red-100 bg-red-50 p-4">
                                    <div className="flex items-start justify-between">
                                        <div>
                                            <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700">{s.separation_type}</span>
                                            <p className="mt-1 text-sm text-gray-700">Last working day: {s.last_working_day}</p>
                                            <p className="text-sm text-gray-700">Effective: {s.effective_date}</p>
                                            {s.reason && <p className="mt-1 text-xs text-gray-500">{s.reason}</p>}
                                            <p className="mt-1 text-xs text-gray-500">Eligible for rehire: {s.is_eligible_rehire ? 'Yes' : 'No'}</p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    )}
                </div>
            )}
        </AppLayout>
    );
}
