import { Head, Link, useForm, usePage } from "@inertiajs/react";
import { PageProps as InertiaPageProps } from "@inertiajs/core";
import AppLayout from "@/layouts/app-layout";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

interface Customer {
    id: number;
    name: string;
}

// Extend Inertia's PageProps
interface PageProps extends InertiaPageProps {
    customers: Customer[];
}

export default function CreateAdHocVisit() {
    const { customers = [] } = usePage<PageProps>().props;
    const form = useForm({ customer_id: "", purpose: "general", notes: "" });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        form.post("/crm/visits/ad-hoc");
    };

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Visit", href: "/crm/visits" },
                { title: "Visit Ad-Hoc", href: "/crm/visits/ad-hoc/create" },
            ]}
        >
            <Head title="Visit Ad-Hoc" />
            <div className="crm-page max-w-2xl space-y-6">
                <div>
                    <h1 className="text-2xl font-bold">Tambah Visit Ad-Hoc</h1>
                    <p className="text-sm text-muted-foreground mt-1">
                        Digunakan Sales untuk kunjungan tambahan yang muncul di
                        lapangan dan belum ada di jadwal.
                    </p>
                </div>
                <Card>
                    <CardHeader>
                        <CardTitle>Detail Visit</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <form onSubmit={submit} className="space-y-5">
                            <div className="space-y-2">
                                <Label>Customer</Label>
                                <select
                                    className="w-full rounded-md border bg-background px-3 py-2"
                                    value={form.data.customer_id}
                                    onChange={(e) =>
                                        form.setData(
                                            "customer_id",
                                            e.target.value,
                                        )
                                    }
                                    required
                                >
                                    <option value="">Pilih customer</option>
                                    {customers.map((customer) => (
                                        <option
                                            key={customer.id}
                                            value={customer.id}
                                        >
                                            {customer.name}
                                        </option>
                                    ))}
                                </select>
                            </div>
                            <div className="space-y-2">
                                <Label>Tujuan</Label>
                                <select
                                    className="w-full rounded-md border bg-background px-3 py-2"
                                    value={form.data.purpose}
                                    onChange={(e) =>
                                        form.setData("purpose", e.target.value)
                                    }
                                >
                                    <option value="general">General</option>
                                    <option value="survey">Survey</option>
                                    <option value="order">Order</option>
                                    <option value="collection">
                                        Collection
                                    </option>
                                </select>
                            </div>
                            <div className="space-y-2">
                                <Label>Catatan</Label>
                                <Textarea
                                    value={form.data.notes}
                                    onChange={(e) =>
                                        form.setData("notes", e.target.value)
                                    }
                                    placeholder="Mengapa visit ini perlu dilakukan?"
                                />
                            </div>
                            <div className="flex justify-end gap-2">
                                <Link href="/crm/visits">
                                    <Button type="button" variant="outline">
                                        Batal
                                    </Button>
                                </Link>
                                <Button
                                    type="submit"
                                    disabled={form.processing}
                                >
                                    Buat Visit
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}
