import React from "react";
import { Link, router } from "@inertiajs/react";
import { ArrowLeft, CalendarDays, MapPin, RotateCcw } from "lucide-react";
import { Badge, Button, Card } from "../../components/ui";
import { Combobox, ComboboxOption } from "../../components/ui/combobox";
import Map from "../../components/Map";

const statusTone: Record<string, string> = {
    Scheduled: "slate",
    "On Process": "blue",
    Visited: "green",
    Order: "orange",
    "Not Order": "slate",
    "Failed Visit": "red",
};

function todayIso() {
    return new Date().toISOString().slice(0, 10);
}

export default function VisitMap({
    from,
    to,
    team,
    salesId,
    status,
    points = [],
    center,
    statuses = [],
    teams = [],
    salesUsers = [],
    stats,
}: any) {
    const [fromDate, setFromDate] = React.useState(from);
    const [toDate, setToDate] = React.useState(to);
    const [teamFilter, setTeamFilter] = React.useState(team || "");
    const [salesFilter, setSalesFilter] = React.useState(
        salesId ? String(salesId) : "",
    );
    const [statusFilter, setStatusFilter] = React.useState(status || "");
    const [selectedId, setSelectedId] = React.useState<number | null>(null);

    const teamOptions: ComboboxOption[] = [
        { value: "", label: "Semua Team" },
        ...teams.map((t: any) => ({ value: String(t.id), label: t.name })),
    ];
    const salesOptions: ComboboxOption[] = [
        { value: "", label: "Semua Sales" },
        ...salesUsers.map((s: any) => ({
            value: String(s.id),
            label: s.name,
        })),
    ];
    const statusOptions: ComboboxOption[] = [
        { value: "", label: "Semua Status" },
        ...statuses.map((s: string) => ({ value: s, label: s })),
    ];

    const apply = (overrides?: Record<string, any>) => {
        router.get(
            "/reports/visit-map",
            {
                from: overrides?.from ?? fromDate,
                to: overrides?.to ?? toDate,
                team: (overrides?.team ?? teamFilter) || undefined,
                sales_id: (overrides?.sales_id ?? salesFilter) || undefined,
                status: (overrides?.status ?? statusFilter) || undefined,
            },
            { preserveState: true, replace: true },
        );
    };

    const handleFromChange = (value: string) => {
        setFromDate(value);
        apply({ from: value });
    };
    const handleToChange = (value: string) => {
        setToDate(value);
        apply({ to: value });
    };
    const handleTeamChange = (value: string) => {
        setTeamFilter(value);
        apply({ team: value });
    };
    const handleSalesChange = (value: string) => {
        setSalesFilter(value);
        apply({ sales_id: value });
    };
    const handleStatusChange = (value: string) => {
        setStatusFilter(value);
        apply({ status: value });
    };
    const resetFilters = () => {
        const t = todayIso();
        setFromDate(t);
        setToDate(t);
        setTeamFilter("");
        setSalesFilter("");
        setStatusFilter("");
        apply({ from: t, to: t, team: "", sales_id: "", status: "" });
    };

    return (
        <div className="p-7">
            <div className="mb-6 flex flex-wrap items-end justify-between gap-4">
                <div>
                    <Link
                        href="/reports"
                        className="mb-2 inline-flex items-center gap-1 text-xs font-semibold text-slate-500 hover:text-slate-700"
                    >
                        <ArrowLeft size={14} /> Kembali ke Reports
                    </Link>
                    <h1 className="text-2xl font-black tracking-tight text-slate-900">
                        Visit on Map
                    </h1>
                    <p className="mt-1 text-sm text-slate-500">
                        Sebaran lokasi kunjungan sales di peta.
                    </p>
                </div>
            </div>

            <Card className="mb-5 p-3">
                <div className="flex flex-wrap items-center gap-3">
                    <div className="flex h-10 shrink-0 items-center gap-2 rounded-xl border border-slate-200 bg-white px-3">
                        <CalendarDays
                            size={17}
                            className="shrink-0 text-[#18b89a]"
                        />
                        <input
                            type="date"
                            value={fromDate}
                            onChange={(e) => handleFromChange(e.target.value)}
                            className="h-10 bg-transparent text-sm font-bold outline-none"
                        />
                        <span className="text-slate-300">—</span>
                        <input
                            type="date"
                            value={toDate}
                            onChange={(e) => handleToChange(e.target.value)}
                            className="h-10 bg-transparent text-sm font-bold outline-none"
                        />
                    </div>
                    <Combobox
                        options={teamOptions}
                        value={teamFilter}
                        onChange={handleTeamChange}
                        placeholder="Semua Team"
                        searchPlaceholder="Cari team..."
                        className="w-44"
                    />
                    <Combobox
                        options={salesOptions}
                        value={salesFilter}
                        onChange={handleSalesChange}
                        placeholder="Semua Sales"
                        searchPlaceholder="Cari sales..."
                        className="w-44"
                    />
                    <Combobox
                        options={statusOptions}
                        value={statusFilter}
                        onChange={handleStatusChange}
                        placeholder="Semua Status"
                        searchPlaceholder="Cari status..."
                        className="w-44"
                    />
                    <Button
                        variant="outline"
                        className="gap-2"
                        onClick={resetFilters}
                    >
                        <RotateCcw size={14} /> Reset Filter
                    </Button>
                </div>
            </Card>

            <div className="mb-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
                {[
                    ["Total Visit", stats?.visits ?? 0, "Titik pada peta"],
                    ["Customer", stats?.customers ?? 0, "Customer unik"],
                    ["Order", stats?.orders ?? 0, "Visit berstatus Order"],
                    ["Failed Visit", stats?.failed ?? 0, "Kunjungan gagal"],
                ].map(([label, value, hint]) => (
                    <Card key={label as string} className="p-4">
                        <div className="text-[11px] font-bold uppercase tracking-wider text-slate-400">
                            {label}
                        </div>
                        <div className="mt-1 text-xl font-black text-slate-900">
                            {value}
                        </div>
                        <div className="mt-1 text-[10px] text-slate-400">
                            {hint}
                        </div>
                    </Card>
                ))}
            </div>

            <div className="grid gap-5 xl:grid-cols-[1fr_320px]">
                <Card className="overflow-hidden">
                    <div className="h-140">
                        <Map
                            points={points.map((p: any) => ({
                                lat: p.lat,
                                lng: p.lng,
                                status: p.status,
                                label: `${p.label} • ${p.sales_name || "-"} (${p.time})`,
                                onClick: () => setSelectedId(p.id),
                            }))}
                            center={center}
                            zoom={11}
                            scrollWheelZoom
                        />
                    </div>
                    <div className="flex flex-wrap items-center gap-4 border-t p-4 text-[11px] text-slate-500">
                        {Object.entries(statusTone).map(([label, tone]) => (
                            <span
                                key={label}
                                className="flex items-center gap-1.5"
                            >
                                <Badge tone={tone}>{label}</Badge>
                            </span>
                        ))}
                    </div>
                </Card>

                <Card className="flex max-h-140 flex-col overflow-hidden">
                    <div className="flex items-center justify-between border-b p-4">
                        <div className="flex items-center gap-2 font-bold">
                            <MapPin size={16} className="text-[#18b89a]" />
                            Daftar Titik
                        </div>
                        <span className="text-xs text-slate-400">
                            {points.length}
                        </span>
                    </div>
                    <div className="flex-1 divide-y divide-slate-100 overflow-y-auto">
                        {points.length === 0 && (
                            <div className="p-6 text-center text-xs text-slate-400">
                                Tidak ada visit dengan koordinat pada filter
                                ini.
                            </div>
                        )}
                        {points.map((p: any) => (
                            <button
                                key={p.id}
                                type="button"
                                onClick={() =>
                                    setSelectedId(
                                        selectedId === p.id ? null : p.id,
                                    )
                                }
                                className={`w-full p-3 text-left transition hover:bg-slate-50 ${
                                    selectedId === p.id ? "bg-[#e9fbf7]" : ""
                                }`}
                            >
                                <div className="flex items-center justify-between gap-2">
                                    <span className="truncate text-sm font-semibold text-slate-800">
                                        {p.label}
                                    </span>
                                    <Badge
                                        tone={statusTone[p.status] || "slate"}
                                    >
                                        {p.status}
                                    </Badge>
                                </div>
                                <div className="mt-1 text-[10px] text-slate-400">
                                    {p.sales_name || "-"} • {p.time}
                                </div>
                            </button>
                        ))}
                    </div>
                </Card>
            </div>
        </div>
    );
}