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

// Nilai di database tetap dalam Bahasa Inggris (Draft/Submitted/Approved/
// Delivered/Cancelled) supaya konsisten dengan data lama & backend, tapi
// ditampilkan ke user dalam Bahasa Indonesia lewat label di bawah ini.
const statusLabel: Record<string, string> = {
    Draft: "Draf",
    Submitted: "Diajukan",
    Approved: "Disetujui",
    Delivered: "Terkirim",
    Cancelled: "Dibatalkan",
};

const statusTone: Record<string, string> = {
    Draft: "slate",
    Submitted: "blue",
    Approved: "green",
    Delivered: "purple",
    Cancelled: "red",
};

export default ({
    rows,
    salesUsers = [],
}: {
    rows: any[];
    salesUsers?: { id: number; name: string }[];
}) => {
    // Daftar customer unik (diurutkan) untuk opsi dropdown filter
    // "Customer", diambil dari data order yang sedang tampil.
    const customerNames = Array.from(
        new Set((rows ?? []).map((r) => r.customer_name).filter(Boolean)),
    ).sort((a, b) => a.localeCompare(b));

    return (
        <EntityPage
            title="Order"
            description="Monitor order dari sales, customer, nilai transaksi, dan status."
            resource="orders"
            rows={rows}
            filters={[
                {
                    key: "customer_name",
                    label: "Customer",
                    options: customerNames,
                },
                {
                    key: "sales_name",
                    label: "Sales",
                    options: salesUsers.map((u) => u.name),
                },
                {
                    key: "status",
                    label: "Status",
                    options: Object.entries(statusLabel).map(
                        ([value, label]) => ({ value, label }),
                    ),
                },
            ]}
            fields={[
                { name: "order_no", label: "No. Order" },
                { name: "customer_name", label: "Customer" },
                {
                    name: "sales_id",
                    label: "Sales",
                    type: "combobox",
                    // field lain yang otomatis ikut ke-set dengan nama sales
                    // yang dipilih, karena kolom `sales_name` (teks) masih
                    // dipakai di banyak tempat lain untuk tampilan & pencarian.
                    displayField: "sales_name",
                    options: salesUsers.map((u) => ({
                        value: String(u.id),
                        label: u.name,
                    })),
                },
                { name: "order_date", label: "Tanggal", type: "date" },
                { name: "total", label: "Total", type: "number" },
                {
                    name: "status",
                    label: "Status",
                    options: Object.entries(statusLabel).map(
                        ([value, label]) => ({
                            value,
                            label,
                        }),
                    ),
                },
            ]}
            columns={[
                { key: "order_no", label: "Order" },
                { key: "customer_name", label: "Customer" },
                { key: "sales_name", label: "Sales" },
                {
                    key: "order_date",
                    label: "Tanggal",
                    render: (r) =>
                        r.order_date
                            ? new Date(r.order_date).toLocaleDateString(
                                  "id-ID",
                                  {
                                      day: "2-digit",
                                      month: "short",
                                      year: "numeric",
                                  },
                              )
                            : "-",
                },
                {
                    key: "total",
                    label: "Total",
                    render: (r) =>
                        `Rp ${Number(r.total || 0).toLocaleString("id-ID")}`,
                },
                {
                    key: "status",
                    label: "Status",
                    render: (r) => (
                        <Badge tone={statusTone[r.status] || "slate"}>
                            {statusLabel[r.status] || r.status}
                        </Badge>
                    ),
                },
            ]}
        />
    );
};