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

type Team = { id: number; name: string };
type UserRow = {
    id: number;
    name: string;
    email: string;
    role: string;
    team_id?: number | null;
    team?: Team | null;
};

const roleLabel: Record<string, string> = {
    super_admin: "Super Admin",
    manager: "Manager",
    supervisor: "Supervisor",
    sales: "Sales",
    admin_pengiriman: "Admin Pengiriman",
    admin_penagihan: "Admin Penagihan",
    pengiriman: "Pengiriman",
    penagihan: "Penagihan",
};
const roleTone: Record<string, string> = {
    super_admin: "purple",
    manager: "orange",
    supervisor: "orange",
    sales: "blue",
    admin_pengiriman: "green",
    admin_penagihan: "green",
    pengiriman: "slate",
    penagihan: "slate",
};

export default ({
    rows,
    teams = [],
    roles = [],
}: {
    rows: UserRow[];
    teams?: Team[];
    roles?: string[];
}) => (
    <EntityPage
        title="User"
        description="Kelola akun pengguna, role, dan penempatan team."
        resource="users"
        rows={rows}
        filters={[
            {
                key: "role",
                label: "Role",
                options: roles.map((r) => ({
                    value: r,
                    label: roleLabel[r] ?? r,
                })),
            },
            {
                key: "team_id",
                label: "Team",
                options: teams.map((t) => ({ value: t.id, label: t.name })),
            },
        ]}
        fields={[
            { name: "name", label: "Nama" },
            { name: "email", label: "Email", type: "email" },
            {
                name: "password",
                label: "Password (kosongkan jika tidak diubah)",
                type: "password",
            },
            {
                name: "role",
                label: "Role",
                options: roles.map((r) => ({
                    value: r,
                    label: roleLabel[r] ?? r,
                })),
            },
            {
                name: "team_id",
                label: "Team",
                required: false,
                options: teams.map((t) => ({ value: t.id, label: t.name })),
            },
        ]}
        columns={[
            { key: "name", label: "Nama" },
            { key: "email", label: "Email" },
            {
                key: "role",
                label: "Role",
                render: (r: UserRow) => (
                    <Badge tone={roleTone[r.role] ?? "slate"}>
                        {roleLabel[r.role] ?? r.role}
                    </Badge>
                ),
            },
            {
                key: "team",
                label: "Team",
                render: (r: UserRow) =>
                    r.team?.name ?? (
                        <span className="text-xs text-slate-400">
                            Belum ada team
                        </span>
                    ),
            },
        ]}
    />
);