import React from "react";
import { Link, router } from "@inertiajs/react";
import { ArrowLeft, CheckCircle2, Loader2, MapPin, Save } from "lucide-react";
import { Card, PageHeader, Button, Input } from "../../components/ui";

export default function GpsConfig({ operational }: { operational: any }) {
    const [form, setForm] = React.useState({
        gps_radius: String(operational?.gps_radius ?? 100),
        map_latitude: String(operational?.map_latitude ?? -0.95691),
        map_longitude: String(operational?.map_longitude ?? 122.7849),
        map_zoom: String(operational?.map_zoom ?? 12),
    });
    const [busy, setBusy] = React.useState(false);
    const [saved, setSaved] = React.useState(false);
    const [errors, setErrors] = React.useState<any>({});

    const update = (field: string, value: string) => {
        setForm((prev) => ({ ...prev, [field]: value }));
        setSaved(false);
    };

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        setBusy(true);
        setSaved(false);
        router.put("/settings/gps", form, {
            preserveScroll: true,
            onSuccess: () => {
                setBusy(false);
                setSaved(true);
            },
            onError: (err) => {
                setBusy(false);
                setErrors(err);
            },
        });
    };

    return (
        <div className="p-7">
            <PageHeader
                title="GPS Configuration"
                description="Radius check-in, lokasi default peta. Aktif & tersimpan ke database."
                action={
                    <Link
                        href="/settings"
                        className="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-bold text-slate-600 hover:bg-slate-50"
                    >
                        <ArrowLeft size={15} />
                        Kembali ke Settings
                    </Link>
                }
            />

            <Card className="max-w-3xl p-6">
                <div className="flex items-start gap-3">
                    <div className="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-[#e9fbf7] text-[#0b7668]">
                        <MapPin size={18} />
                    </div>
                    <div>
                        <h2 className="font-black">GPS Configuration</h2>
                        <p className="mt-1 text-xs leading-5 text-slate-500">
                            Sebelumnya diatur lewat file <code>.env</code>,
                            sekarang tersimpan di database dan bisa diubah
                            langsung dari sini tanpa perlu akses server.
                        </p>
                    </div>
                </div>

                <form onSubmit={submit}>
                    <div className="mt-5 grid gap-4 md:grid-cols-2">
                        <label className="text-xs font-semibold text-slate-600">
                            Radius Validasi Check-in (meter)
                            <Input
                                className="mt-1"
                                type="number"
                                min={10}
                                max={5000}
                                value={form.gps_radius}
                                onChange={(e) =>
                                    update("gps_radius", e.target.value)
                                }
                            />
                            {errors.gps_radius && (
                                <span className="mt-1 block text-[11px] font-semibold text-rose-500">
                                    {errors.gps_radius}
                                </span>
                            )}
                        </label>
                    </div>

                    <div className="mt-5 border-t border-slate-100 pt-5">
                        <div className="text-xs font-bold text-slate-600">
                            Lokasi Default Peta
                        </div>
                        <p className="mt-1 text-[11px] text-slate-400">
                            Titik tengah &amp; zoom awal saat membuka tampilan
                            peta (mis. peta sebaran customer).
                        </p>
                        <div className="mt-3 grid gap-4 md:grid-cols-3">
                            <label className="text-xs font-semibold text-slate-600">
                                Latitude
                                <Input
                                    className="mt-1"
                                    type="number"
                                    step="0.000001"
                                    value={form.map_latitude}
                                    onChange={(e) =>
                                        update("map_latitude", e.target.value)
                                    }
                                />
                                {errors.map_latitude && (
                                    <span className="mt-1 block text-[11px] font-semibold text-rose-500">
                                        {errors.map_latitude}
                                    </span>
                                )}
                            </label>
                            <label className="text-xs font-semibold text-slate-600">
                                Longitude
                                <Input
                                    className="mt-1"
                                    type="number"
                                    step="0.000001"
                                    value={form.map_longitude}
                                    onChange={(e) =>
                                        update("map_longitude", e.target.value)
                                    }
                                />
                                {errors.map_longitude && (
                                    <span className="mt-1 block text-[11px] font-semibold text-rose-500">
                                        {errors.map_longitude}
                                    </span>
                                )}
                            </label>
                            <label className="text-xs font-semibold text-slate-600">
                                Zoom
                                <Input
                                    className="mt-1"
                                    type="number"
                                    min={1}
                                    max={20}
                                    value={form.map_zoom}
                                    onChange={(e) =>
                                        update("map_zoom", e.target.value)
                                    }
                                />
                                {errors.map_zoom && (
                                    <span className="mt-1 block text-[11px] font-semibold text-rose-500">
                                        {errors.map_zoom}
                                    </span>
                                )}
                            </label>
                        </div>
                    </div>

                    <div className="mt-6 flex items-center gap-3">
                        <Button type="submit" disabled={busy}>
                            {busy ? (
                                <Loader2
                                    size={15}
                                    className="mr-2 animate-spin"
                                />
                            ) : (
                                <Save size={15} className="mr-2" />
                            )}
                            Simpan Konfigurasi
                        </Button>
                        {saved && (
                            <span className="inline-flex items-center gap-1.5 text-xs font-bold text-emerald-600">
                                <CheckCircle2 size={15} />
                                Tersimpan.
                            </span>
                        )}
                    </div>
                </form>
            </Card>
        </div>
    );
}