import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, useForm } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { ArrowLeft, Save } from 'lucide-react';
import { PageProps } from '@/types';
import { FormEvent } from 'react';
import { ProjectForm, ProjectFormData } from '../../Components/ProjectForm';

interface Employee { id: number; ulid: string; name: string }

interface Props extends PageProps {
    employees: Employee[];
}

export default function Create({ employees }: Props) {
    const { data, setData, post, processing, errors } = useForm<ProjectFormData>({
        name: '',
        client_name: '',
        location: '',
        start_date: '',
        target_end_date: '',
        contract_duration: '',
        description: '',
        pm_id: '',
        contract_value: '',
    });

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        post(route('projects.store'));
    };

    return (
        <AuthenticatedLayout
            header={
                <div className="flex items-center gap-4">
                    <Link href={route('projects.index')}>
                        <Button variant="ghost" size="icon-sm"><ArrowLeft className="h-4 w-4" /></Button>
                    </Link>
                    <h2 className="text-xl font-semibold leading-tight text-gray-800">
                        Create Project
                    </h2>
                </div>
            }
        >
            <Head title="Create Project" />

            <div className="py-6">
                <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
                    <form onSubmit={handleSubmit}>
                        <ProjectForm
                            data={data}
                            setData={setData}
                            errors={errors}
                            employees={employees}
                        />

                        <div className="mt-6 flex justify-end gap-3">
                            <Link href={route('projects.index')}>
                                <Button variant="outline" type="button">Cancel</Button>
                            </Link>
                            <Button type="submit" disabled={processing}>
                                <Save className="mr-2 h-4 w-4" /> Create Project
                            </Button>
                        </div>
                    </form>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
