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

const SOURCES = ['referral', 'facebook', 'instagram', 'website', 'walk_in', 'cold_call', 'exhibition', 'other'];
const PROJECT_TYPES = ['Residential', 'Commercial', 'Office', 'Retail', 'Hospitality', 'Other'];

export default function LeadCreate({ users = [] }) {
    const { data, setData, post, processing, errors } = useForm({
        name: '', phone: '', email: '', source: 'referral',
        project_type: '', estimated_value: '',
        assigned_to: '', follow_up_at: '', notes: '',
    });

    function submit(e) {
        e.preventDefault();
        post(route('crm.leads.store'));
    }

    return (
        <AppLayout>
            <Head title="New Lead" />
            <PageHeader title="New Lead" back={route('crm.index')} />
            <div className="p-4 sm:p-6 max-w-2xl mx-auto">
                <form onSubmit={submit} className="card p-6 space-y-4">
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <FormField label="Full Name" error={errors.name} required>
                            <input className="form-input" value={data.name} onChange={e => setData('name', e.target.value)} placeholder="Client name" />
                        </FormField>
                        <FormField label="Phone" error={errors.phone} required>
                            <input className="form-input" value={data.phone} onChange={e => setData('phone', e.target.value)} placeholder="+880..." />
                        </FormField>
                        <FormField label="Email" error={errors.email}>
                            <input type="email" className="form-input" value={data.email} onChange={e => setData('email', e.target.value)} />
                        </FormField>
                        <FormField label="Source" error={errors.source} required>
                            <select className="form-input" value={data.source} onChange={e => setData('source', e.target.value)}>
                                {SOURCES.map(s => <option key={s} value={s} className="capitalize">{s.replace(/_/g, ' ')}</option>)}
                            </select>
                        </FormField>
                        <FormField label="Project Type" error={errors.project_type}>
                            <input className="form-input" list="project-types" value={data.project_type} onChange={e => setData('project_type', e.target.value)} placeholder="Residential, Commercial…" />
                            <datalist id="project-types">{PROJECT_TYPES.map(t => <option key={t} value={t} />)}</datalist>
                        </FormField>
                        <FormField label="Estimated Value (৳)" error={errors.estimated_value}>
                            <input type="number" className="form-input" min="0" step="1000" value={data.estimated_value} onChange={e => setData('estimated_value', e.target.value)} />
                        </FormField>
                        <FormField label="Assign To" error={errors.assigned_to}>
                            <select className="form-input" value={data.assigned_to} onChange={e => setData('assigned_to', e.target.value)}>
                                <option value="">Unassigned</option>
                                {users.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}
                            </select>
                        </FormField>
                        <FormField label="Follow-up Date" error={errors.follow_up_at}>
                            <input type="datetime-local" className="form-input" value={data.follow_up_at} onChange={e => setData('follow_up_at', e.target.value)} />
                        </FormField>
                    </div>
                    <FormField label="Notes" error={errors.notes}>
                        <textarea className="form-input" rows={3} value={data.notes} onChange={e => setData('notes', e.target.value)} placeholder="Initial notes, requirements…" />
                    </FormField>
                    <div className="flex gap-3 pt-2">
                        <button type="submit" disabled={processing} className="btn btn-primary">{processing ? 'Saving…' : 'Create Lead'}</button>
                        <a href={route('crm.index')} className="btn">Cancel</a>
                    </div>
                </form>
            </div>
        </AppLayout>
    );
}
