import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link } from "@inertiajs/react";
import MasterForm from "./_MasterForm";
import {
    ArrowLeftIcon,
    PencilIcon,
    InformationCircleIcon,
    BanknotesIcon
} from '@heroicons/react/24/solid';

export default function Edit({ employee, formData }) {
    return (
        <AuthenticatedLayout
            header={
                <h2 className="font-semibold text-xl flex items-center gap-2 text-gray-800 dark:text-gray-100">
                    <PencilIcon className="w-6 h-6 text-purple-600 dark:text-purple-400" />
                    HRIS - Edit Master Penggajian
                </h2>
            }
        >
            <Head title={`Edit Master - ${employee.name}`} />

            <div className="py-6">
                <div className="max-w-5xl mx-auto sm:px-6 lg:px-8">
                    {/* Header Navigation */}
                    <div className="flex items-center justify-between gap-3 mb-6">
                        <Link
                            href={route("keuangan.hris.master-penggajian.index")}
                            className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-gray-500 to-gray-600 text-white rounded-lg hover:from-gray-600 hover:to-gray-700 transition-all duration-200 font-medium shadow-lg shadow-gray-500/25"
                        >
                            <ArrowLeftIcon className="w-4 h-4" />
                            Kembali ke Daftar
                        </Link>
                        <div className="text-sm text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-900/30 px-3 py-1 rounded-full flex items-center gap-1">
                            <BanknotesIcon className="w-4 h-4" />
                            <span className="font-medium">{employee.name}</span>
                        </div>
                    </div>

                    {/* Info Panel */}
                    <div className="bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-900/10 dark:to-yellow-900/10 rounded-xl border border-amber-200 dark:border-amber-500/30 px-5 py-4 mb-6 flex items-start gap-3">
                        <div className="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg">
                            <InformationCircleIcon className="w-5 h-5 text-amber-600 dark:text-amber-400" />
                        </div>
                        <div>
                            <p className="font-medium text-amber-900 dark:text-amber-100 mb-1">
                                Perhatian: Perubahan akan membuat Riwayat Baru
                            </p>
                            <p className="text-sm text-amber-700 dark:text-amber-300">
                                Perubahan pada form ini akan membuat riwayat master baru mulai tanggal efektif yang dipilih. 
                                Data sebelumnya akan tetap tersimpan sebagai riwayat.
                            </p>
                        </div>
                    </div>

                    {/* Form Component */}
                    <MasterForm
                        mode="edit"
                        initialData={formData}
                        employee={employee}
                        onSubmit={(data) => {
                            // Handle submit di sini atau di dalam MasterForm
                        }}
                    />
                </div>
            </div>
        </AuthenticatedLayout>
    );
}