import { Head } from "@inertiajs/react";
import { useState } from "react";
import AppLayout from "@/layouts/app-layout";
import { StatChip } from "@/components/crm/global-card";
import { Building2, Users, ShieldCheck, Shield } from "lucide-react";
import {
    DataTable,
    Column,
    FilterConfig,
    PaginatedData,
} from "@/components/crm/global-datatable";

type Role = {
    id: number;
    name: string;
    slug: string;
    permissions: Record<string, boolean> | null;
    users_count: number;
    perusahaan?: { id: number; nama: string; kode_perusahaan: string } | null;
};

type Company = { id: number; nama: string; kode_perusahaan: string };

type Props = {
    roles: PaginatedData<Role>;
    companies: Company[];
    filters: { search?: string; perusahaan_id?: number | null };
    summary: {
        roles: number;
        companies: number;
        users: number;
        platform_roles: number;
    };
};

export default function PlatformRolesPage({
    roles,
    companies,
    filters,
    summary,
}: Props) {
    const [search, setSearch] = useState(filters.search ?? "");
    const [companyFilter, setCompanyFilter] = useState(
        filters.perusahaan_id ? String(filters.perusahaan_id) : "",
    );

    // Konfigurasi filter untuk DataTable
    const filterConfigs: FilterConfig[] = [
        {
            key: "perusahaan_id",
            label: "Perusahaan",
            value: companyFilter,
            onChange: setCompanyFilter,
            options: companies.map((c) => ({
                label: `${c.nama} (${c.kode_perusahaan})`,
                value: c.id,
            })),
        },
    ];

    // Konfigurasi kolom tabel yang rapi dan profesional
    const columns: Column<Role>[] = [
        {
            header: "Role & Slug",
            className: "align-top py-4 w-[22%]",
            cell: (role) => (
                <div className="space-y-1">
                    <div className="font-bold text-slate-900 dark:text-slate-100 text-xs tracking-tight flex items-center gap-1.5">
                        {role.name}
                    </div>
                    <div className="inline-flex items-center px-2 py-0.5 rounded-md bg-slate-100 dark:bg-slate-800 text-[10px] font-mono text-slate-500 dark:text-slate-400">
                        {role.slug}
                    </div>
                </div>
            ),
        },
        {
            header: "Perusahaan Tenant",
            className: "align-top py-4 w-[25%]",
            cell: (role) => (
                <div className="space-y-0.5">
                    <div className="text-xs font-semibold text-slate-800 dark:text-slate-200 line-clamp-1">
                        {role.perusahaan?.nama ?? "-"}
                    </div>
                    <div className="text-[11px] font-mono text-slate-400">
                        {role.perusahaan?.kode_perusahaan ?? "-"}
                    </div>
                </div>
            ),
        },
        {
            header: "Tipe & User",
            className: "align-top py-4 w-[18%]",
            cell: (role) => {
                const isPlatform =
                    role.perusahaan?.kode_perusahaan === "PLATFORM";
                return (
                    <div className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium border shadow-2xs bg-white dark:bg-slate-800/60">
                        <span
                            className={`size-1.5 rounded-full ${isPlatform ? "bg-indigo-500 animate-pulse" : "bg-emerald-500"}`}
                        />
                        <span className="text-slate-700 dark:text-slate-300">
                            {isPlatform ? "Platform" : "Tenant"}
                        </span>
                        <span className="text-slate-400 font-semibold">·</span>
                        <span className="text-slate-500 font-semibold">
                            {role.users_count} user
                        </span>
                    </div>
                );
            },
        },
        {
            header: "Hak Akses (Permissions)",
            className: "align-top py-4 w-[35%]",
            cell: (role) => {
                const permissionKeys = Object.keys(
                    role.permissions ?? {},
                ).filter((key) => role.permissions?.[key]);

                const isAll =
                    role.permissions?.all === true ||
                    permissionKeys.includes("all");

                if (isAll) {
                    return (
                        <span className="inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-semibold bg-amber-50 text-amber-700 border border-amber-200/60 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-800">
                            ⚡ Full Access (All Permissions)
                        </span>
                    );
                }

                return (
                    <div className="flex flex-wrap gap-1 max-w-sm">
                        {permissionKeys.slice(0, 5).map((key) => (
                            <span
                                key={key}
                                className="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-mono bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 border border-slate-200/60 dark:border-slate-700"
                            >
                                {key}
                            </span>
                        ))}
                        {permissionKeys.length > 5 && (
                            <span className="inline-flex items-center px-2 py-0.5 rounded-md text-[10px] font-medium bg-indigo-50 text-indigo-600 dark:bg-indigo-950/50 dark:text-indigo-300 border border-indigo-100 dark:border-indigo-900">
                                +{permissionKeys.length - 5} lainnya
                            </span>
                        )}
                        {permissionKeys.length === 0 && (
                            <span className="text-xs text-slate-400 italic">
                                Tidak ada permission khusus.
                            </span>
                        )}
                    </div>
                );
            },
        },
    ];

    return (
        <AppLayout
            breadcrumbs={[{ title: "Role Platform", href: "/platform/roles" }]}
        >
            <Head title="Role Platform" />
            <div className="crm-page space-y-6 pb-10">
                {/* Header Section */}
                <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <div>
                        <div className="flex items-center gap-2">
                            <span className="flex h-2 w-2 rounded-full bg-violet-500 animate-pulse" />
                            <span className="text-xs font-bold uppercase tracking-wider text-violet-600 dark:text-violet-400">
                                Access Control & Security
                            </span>
                        </div>
                        <h1 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-slate-50 sm:text-3xl mt-1">
                            Role & Permission Platform
                        </h1>
                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                            Pantau seluruh role, hak akses, dan tingkat
                            otorisasi yang digunakan oleh perusahaan dalam
                            ekosistem platform.
                        </p>
                    </div>
                </div>

                {/* Metrics Grid using StatChip */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <StatChip
                        icon={Shield}
                        label="Total Role"
                        value={summary.roles}
                        tone="blue"
                        variant="compact"
                        description="Semua role terdaftar"
                    />
                    <StatChip
                        icon={Building2}
                        label="Perusahaan Tenant"
                        value={summary.companies}
                        tone="emerald"
                        variant="compact"
                        description="Perusahaan aktif"
                    />
                    <StatChip
                        icon={Users}
                        label="User Terpetakan"
                        value={summary.users}
                        tone="violet"
                        variant="compact"
                        description="Total pengguna dalam role"
                    />
                    <StatChip
                        icon={ShieldCheck}
                        label="Role Platform"
                        value={summary.platform_roles}
                        tone="orange"
                        variant="compact"
                        description="Otoritas tingkat tinggi"
                    />
                </div>

                {/* DataTable Integration */}
                <DataTable
                    data={roles}
                    columns={columns}
                    filters={filterConfigs}
                    searchPlaceholder="Cari role, slug, atau perusahaan..."
                    searchValue={search}
                    onSearchChange={setSearch}
                    showNumber={true}
                    baseUrl="/platform/roles"
                />
            </div>
        </AppLayout>
    );
}