import React from "react";
import { router } from "@inertiajs/react";
import { Camera, MapPin, Navigation, RefreshCw } from "lucide-react";
import EntityPage from "../EntityPage";
import { Badge, Button, Card } from "../../components/ui";
import Map from "../../components/Map";
export default function Visits({
    rows = [],
    radius = 100,
    mapCenter = [-0.95691, 122.7849],
    mapZoom = 12,
}: any) {
    const [busy, setBusy] = React.useState(false);
    const [selected, setSelected] = React.useState<any>(rows[0]);
    const [photo, setPhoto] = React.useState<File | null>(null);
    const checkIn = () => {
        if (!selected) {
            alert("Pilih customer terlebih dahulu.");
            return;
        }
        setBusy(true);
        if (!navigator.geolocation) {
            alert("Browser tidak mendukung GPS.");
            setBusy(false);
            return;
        }
        navigator.geolocation.getCurrentPosition(
            (pos) => {
                const fd = new FormData();
                fd.append("customer_id", selected.customer_id ?? "");
                fd.append("customer_name", selected.customer_name);
                fd.append("sales_name", "Admin MINANGA");
                fd.append("latitude", String(pos.coords.latitude));
                fd.append("longitude", String(pos.coords.longitude));
                fd.append("gps_accuracy", String(pos.coords.accuracy));
                fd.append("status", "Visited");
                if (photo) fd.append("photo", photo);
                router.post("/visits/check-in", fd, {
                    forceFormData: true,
                    onFinish: () => setBusy(false),
                });
            },
            () => {
                alert(
                    "Lokasi GPS tidak dapat diakses. Aktifkan permission lokasi.",
                );
                setBusy(false);
            },
            { enableHighAccuracy: true, timeout: 15000, maximumAge: 0 },
        );
    };
    return (
        <div>
            <EntityPage
                title="Visit Management"
                description="Jadwal, check-in GPS, status visit, dan histori aktivitas sales."
                resource="visits"
                rows={rows}
                fields={[
                    { name: "customer_name", label: "Customer" },
                    { name: "sales_name", label: "Sales" },
                    { name: "latitude", label: "Latitude", type: "number" },
                    { name: "longitude", label: "Longitude", type: "number" },
                    {
                        name: "status",
                        label: "Status",
                        options: [
                            "Scheduled",
                            "On Process",
                            "Visited",
                            "Failed Visit",
                            "Order",
                            "Not Order",
                        ],
                    },
                    { name: "notes", label: "Catatan" },
                ]}
                columns={[
                    {
                        key: "customer_name",
                        label: "Customer",
                        render: (r: any) => (
                            <button
                                onClick={() => setSelected(r)}
                                className="font-semibold hover:text-[#18b89a]"
                            >
                                {r.customer_name}
                            </button>
                        ),
                    },
                    { key: "sales_name", label: "Sales" },
                    {
                        key: "visited_at",
                        label: "Waktu",
                        render: (r: any) =>
                            r.visited_at
                                ? new Date(r.visited_at).toLocaleString("id-ID")
                                : "-",
                    },
                    {
                        key: "status",
                        label: "Status",
                        render: (r: any) => (
                            <Badge
                                tone={
                                    r.status === "Visited"
                                        ? "green"
                                        : r.status === "Order"
                                          ? "orange"
                                          : r.status === "Failed Visit"
                                            ? "red"
                                            : "blue"
                                }
                            >
                                {r.status}
                            </Badge>
                        ),
                    },
                    {
                        key: "latitude",
                        label: "GPS",
                        render: (r: any) => (
                            <span className="text-xs">
                                {Number(r.latitude).toFixed(5)},{" "}
                                {Number(r.longitude).toFixed(5)}
                            </span>
                        ),
                    },
                ]}
            />
            <div className="mx-7 mb-7 grid gap-5 xl:grid-cols-[1fr_330px]">
                <Card className="overflow-hidden">
                    <div className="flex items-center justify-between border-b p-5">
                        <div>
                            <div className="font-bold">Visit on Maps</div>
                            <div className="text-xs text-slate-400">
                                Marker berdasarkan histori GPS visit.
                            </div>
                        </div>
                        <span className="text-xs text-slate-500">
                            Radius validasi: <b>{radius} m</b>
                        </span>
                    </div>
                    <div className="h-105">
                        <Map
                            points={rows.map((r: any) => ({
                                lat: Number(r.latitude),
                                lng: Number(r.longitude),
                                label: r.customer_name,
                                status: r.status,
                            }))}
                            center={mapCenter}
                            zoom={mapZoom}
                        />
                    </div>
                </Card>
                <Card className="p-5">
                    <div className="flex items-center gap-2 font-bold">
                        <Navigation size={18} className="text-[#18b89a]" /> GPS
                        Check-in
                    </div>
                    <p className="mt-2 text-xs leading-5 text-slate-500">
                        Pilih customer dari tabel, lalu ambil posisi GPS terkini
                        untuk mencatat kunjungan.
                    </p>
                    <div className="mt-5 rounded-xl bg-slate-50 p-4">
                        <div className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
                            Customer terpilih
                        </div>
                        <div className="mt-1 font-semibold">
                            {selected?.customer_name || "Belum dipilih"}
                        </div>
                    </div>
                    <label className="mt-4 block">
                        <span className="mb-2 flex items-center gap-2 text-xs font-bold">
                            <Camera size={15} /> Foto bukti (opsional)
                        </span>
                        <input
                            type="file"
                            accept="image/*"
                            capture="environment"
                            onChange={(e) =>
                                setPhoto(e.target.files?.[0] ?? null)
                            }
                            className="w-full text-xs"
                        />
                    </label>
                    <Button
                        disabled={busy || !selected}
                        onClick={checkIn}
                        className="mt-5 w-full gap-2"
                    >
                        {busy ? (
                            <>
                                <RefreshCw size={16} className="animate-spin" />{" "}
                                Mengambil GPS...
                            </>
                        ) : (
                            <>
                                <MapPin size={16} /> Check-in Sekarang
                            </>
                        )}
                    </Button>
                    <p className="mt-3 text-center text-[10px] text-slate-400">
                        GPS harus diaktifkan pada perangkat.
                    </p>
                </Card>
            </div>
        </div>
    );
}