import EntityPage from "../EntityPage";
import { Badge } from "../../components/ui";

const statusTone: Record<string, string> = {
    Active: "green",
    Inactive: "slate",
};

export default ({
    rows,
    categories = [],
    statuses = [],
}: {
    rows: any[];
    categories?: string[];
    statuses?: string[];
}) => {
    // Daftar nama customer unik (diurutkan) untuk opsi combobox filter
    // "Customer", diambil dari data yang sedang tampil, bukan request
    // terpisah ke server.
    const customerNames = Array.from(
        new Set(rows.map((r) => r.name).filter(Boolean)),
    ).sort((a, b) => a.localeCompare(b));

    return (
        <EntityPage
            title="Customer"
            description="Kelola master customer, lokasi, dan status kunjungan."
            resource="customers"
            rows={rows}
            exportImport
            filters={[
                { key: "name", label: "Customer", options: customerNames },
                { key: "category", label: "Kategori", options: categories },
                { key: "status", label: "Status", options: statuses },
            ]}
            fields={[
                { name: "name", label: "Nama Customer" },
                {
                    name: "category",
                    label: "Kategori",
                    required: false,
                    options: categories,
                },
                {
                    name: "status",
                    label: "Status",
                    required: false,
                    options: statuses,
                },
                { name: "phone", label: "Telepon" },
                { name: "address", label: "Alamat" },
                {
                    name: "location",
                    label: "Lokasi GPS (opsional)",
                    type: "location",
                },
            ]}
            columns={[
                { key: "code", label: "Kode" },
                { key: "name", label: "Customer" },
                {
                    key: "category",
                    label: "Kategori",
                    render: (r) =>
                        r.category ? (
                            <Badge tone="blue">{r.category}</Badge>
                        ) : (
                            <span className="text-slate-300">-</span>
                        ),
                },
                { key: "phone", label: "Telepon" },
                { key: "address", label: "Alamat" },
                {
                    key: "status",
                    label: "Status",
                    render: (r) => (
                        <Badge tone={statusTone[r.status] || "slate"}>
                            {r.status}
                        </Badge>
                    ),
                },
            ]}
        />
    );
};