import { Head, useForm } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';
import PageHeader from '@/Components/PageHeader';
import FormField from '@/Components/FormField';

export default function ProjectEdit({ project, clients }) {
    const { data, setData, put, processing, errors } = useForm({
        name: project.name, client_id: project.client_id ?? '',
        description: project.description ?? '', status: project.status,
        start_date: project.start_date?.substring(0, 10) ?? '',
        end_date: project.end_date?.substring(0, 10) ?? '',
        contract_value: project.contract_value ?? '',
    });

    function submit(e) {
        e.preventDefault();
        put(route('projects.update', project.id));
    }

    return (
        <AppLayout>
            <Head title={`Edit ${project.name}`} />
            <PageHeader title={`Edit: ${project.name}`} back={route('projects.show', project.id)} />
            <div className="p-4 sm:p-6 max-w-2xl mx-auto">
                <form onSubmit={submit} className="card p-6 space-y-4">
                    <FormField label="Project Name" error={errors.name} required>
                        <input className="form-input" value={data.name} onChange={e => setData('name', e.target.value)} />
                    </FormField>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <FormField label="Client" error={errors.client_id}>
                            <select className="form-input" value={data.client_id} onChange={e => setData('client_id', e.target.value)}>
                                <option value="">-- No Client --</option>
                                {(clients ?? []).map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                            </select>
                        </FormField>
                        <FormField label="Status" error={errors.status}>
                            <select className="form-input" value={data.status} onChange={e => setData('status', e.target.value)}>
                                {['planning','in_progress','on_hold','completed','cancelled'].map(s => (
                                    <option key={s} value={s}>{s.replace('_', ' ')}</option>
                                ))}
                            </select>
                        </FormField>
                        <FormField label="Contract Value (৳)" error={errors.contract_value}>
                            <input type="number" className="form-input" value={data.contract_value} onChange={e => setData('contract_value', e.target.value)} />
                        </FormField>
                        <div />
                        <FormField label="Start Date" error={errors.start_date}>
                            <input type="date" className="form-input" value={data.start_date} onChange={e => setData('start_date', e.target.value)} />
                        </FormField>
                        <FormField label="End Date" error={errors.end_date}>
                            <input type="date" className="form-input" value={data.end_date} onChange={e => setData('end_date', e.target.value)} />
                        </FormField>
                    </div>
                    <FormField label="Description" error={errors.description}>
                        <textarea className="form-input" rows={3} value={data.description} onChange={e => setData('description', e.target.value)} />
                    </FormField>
                    <div className="flex gap-3 pt-2">
                        <button type="submit" disabled={processing} className="btn btn-primary">{processing ? 'Saving…' : 'Update Project'}</button>
                        <a href={route('projects.show', project.id)} className="btn">Cancel</a>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}
