import Form from '@/components/form/Form';
import FormField from '@/components/form/FormField';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import AppLayout from '@/layouts/app-layout';
import { yupResolver } from '@hookform/resolvers/yup';
import { Head, router } from '@inertiajs/react';
import { ArrowLeft, ChevronRight,Plus } from 'lucide-react';
import * as yup from 'yup';

// Validation schema
const schema = yup.object({
    title: yup.string().required('Title is required'),
    description: yup.string().required('Description is required'),
    status: yup.number().oneOf([1, 0], 'Invalid status').required('Status is required'),
});

const defaultValues = {
    title: '',
    description: '',
    status: 1,
};

export default function Create() {
    const handleSubmit = (formData: any) => {
        console.log('🚀 ~ handleSubmit ~ formData:', formData);
        router.post(route('$KEBAB_NAME$.store'), formData);
    };

    return (
        <>
            <Head title="Create $STUDLY_NAME$" />
            <div className="mx-auto flex w-full flex-1 flex-col gap-4 p-3 sm:gap-6 sm:p-2">
                {/* Simple header */}
                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex items-start gap-3 sm:gap-4">
                        <Button
                            variant="outline"
                            size="icon"
                            onClick={() => history.back()}
                            className="shrink-0 border-none bg-muted hover:bg-muted/80"
                        >
                            <ArrowLeft className="h-4 w-4" color="black" />
                        </Button>
                        <div>
                            <h1 className="text-xl font-bold tracking-tight sm:text-2xl">Create $KEBAB_NAME$</h1>
                            <p className="text-sm text-gray-600">Create a new $KEBAB_NAME$</p>
                        </div>
                    </div>
                    <div className="hidden items-center space-x-2 text-sm text-gray-500 sm:flex">
                        <span>$KEBAB_NAME$</span>
                        <ChevronRight className="h-4 w-4" />
                        <span className="font-medium text-primary">Create</span>
                    </div>
                </div>

                {/* Main content */}
                <Card className="p-4">
                    <Form resolver={yupResolver(schema)} defaultValues={defaultValues} submitHandler={handleSubmit} className="space-y-6">
                        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <FormField type="text" name="title" label="Title" placeholder="Enter title" required />

                            <FormField
                                type="select"
                                name="status"
                                label="Status"
                                required
                                options={[
                                    { label: 'Active', value: 1},
                                    { label: 'Inactive', value: 0 },
                                ]}
                            />
                            <FormField name="description" label="Description" type="textarea" placeholder="Enter description" required />

                        </div>

                        <div className="mt-6 flex justify-end gap-3">
                            <Button type="button" variant="outline" onClick={() => history.back()}>
                                Cancel
                            </Button>
                            <Button type="submit">
                                <Plus className="h-4 w-4" />
                                Create $KEBAB_NAME$
                            </Button>
                        </div>
                    </Form>
                </Card>
            </div>
        </>
    );
}

Create.layout = (page: React.ReactNode) => (
    <AppLayout
        breadcrumbs={[
            { title: 'Dashboard', href: route('dashboard') },
            { title: '$STUDLY_NAME$', href: route('$KEBAB_NAME$.index') },
            { title: 'Create', href: route('$KEBAB_NAME$.create') },
        ]}
        title="Create $STUDLY_NAME$"
    >
        {page}
    </AppLayout>
);
