import { FormEvent, ReactNode, useEffect, useMemo, useState } from "react";
import { Head, router, useForm, usePage } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { StatChip } from "@/components/crm/global-card";
import {
    Building2,
    CheckCircle2,
    Search,
    ShieldCheck,
    UserRound,
    UsersRound,
    UserPlus,
    Mail,
    Phone,
    Hash,
    KeyRound,
} from "lucide-react";
import { ConfirmDeleteButton } from "@/components/crm-confirm-dialog";
import { EmptyState, Pagination } from "@/components/crm-data-table";

type Company = { id: number; nama: string; kode_perusahaan: string };
type Role = {
    id: number;
    perusahaan_id: number;
    name: string;
    slug: string;
    perusahaan?: Company;
};
type Team = { id: number; perusahaan_id: number; name: string };
type User = {
    id: number;
    name: string;
    email: string;
    phone?: string;
    employee_code?: string;
    status: string;
    is_platform_admin: boolean;
    perusahaan?: Company;
    role?: Role;
    team?: Team;
};
type Props = {
    users: { data: User[]; links: any[] };
    companies: Company[];
    roles: Role[];
    teams: Team[];
    filters?: {
        search?: string;
        company_id?: number | null;
        role_id?: number | null;
        status?: string;
    };
    stats: {
        total: number;
        active: number;
        inactive: number;
        platform_admins: number;
        tenant_users: number;
    };
};

const empty = {
    name: "",
    email: "",
    phone: "",
    employee_code: "",
    password: "",
    company_id: "",
    role_id: "",
    team_id: "",
    status: "active",
};

export default function PlatformUsersPage({
    users,
    companies,
    roles,
    teams,
    filters,
    stats,
}: Props) {
    const { props } = usePage<{
        flash?: { success?: string; error?: string };
    }>();
    const [editing, setEditing] = useState<number | null>(null);
    const [search, setSearch] = useState(filters?.search ?? "");
    const [companyFilter, setCompanyFilter] = useState(
        String(filters?.company_id ?? "all"),
    );
    const [roleFilter, setRoleFilter] = useState(
        String(filters?.role_id ?? "all"),
    );
    const [statusFilter, setStatusFilter] = useState(filters?.status || "all");
    const form = useForm<any>(empty);

    const selectedCompanyId = Number(form.data.company_id || 0);
    const availableRoles = useMemo(
        () => roles.filter((role) => role.perusahaan_id === selectedCompanyId),
        [roles, selectedCompanyId],
    );
    const availableTeams = useMemo(
        () => teams.filter((team) => team.perusahaan_id === selectedCompanyId),
        [teams, selectedCompanyId],
    );

    useEffect(() => {
        if (!selectedCompanyId) return;
        if (
            form.data.role_id &&
            !availableRoles.some(
                (role) => role.id === Number(form.data.role_id),
            )
        )
            form.setData("role_id", "");
        if (
            form.data.team_id &&
            !availableTeams.some(
                (team) => team.id === Number(form.data.team_id),
            )
        )
            form.setData("team_id", "");
    }, [selectedCompanyId]);

    const edit = (user: User) => {
        if (user.is_platform_admin) return;
        setEditing(user.id);
        form.setData({
            name: user.name,
            email: user.email,
            phone: user.phone ?? "",
            employee_code: user.employee_code ?? "",
            password: "",
            company_id: String(user.perusahaan?.id ?? ""),
            role_id: String(user.role?.id ?? ""),
            team_id: String(user.team?.id ?? ""),
            status: user.status,
        });
    };

    const resetForm = () => {
        setEditing(null);
        form.reset();
        form.setData(empty);
    };

    const save = (event: FormEvent) => {
        event.preventDefault();
        const opts = { onSuccess: resetForm };
        editing
            ? form.put(`/platform/users/${editing}`, opts)
            : form.post("/platform/users", opts);
    };

    const apply = (event: FormEvent) => {
        event.preventDefault();
        router.get(
            "/platform/users",
            {
                search,
                company_id: companyFilter === "all" ? undefined : companyFilter,
                role_id: roleFilter === "all" ? undefined : roleFilter,
                status: statusFilter === "all" ? undefined : statusFilter,
            },
            { preserveState: true, preserveScroll: true, replace: true },
        );
    };

    const resetFilters = () => {
        setSearch("");
        setCompanyFilter("all");
        setRoleFilter("all");
        setStatusFilter("all");
        router.get(
            "/platform/users",
            {},
            { preserveState: true, replace: true },
        );
    };

    return (
        <AppLayout
            breadcrumbs={[
                { title: "Pengguna Platform", href: "/platform/users" },
            ]}
        >
            <Head title="Pengguna 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-indigo-500 animate-pulse" />
                            <span className="text-xs font-bold uppercase tracking-wider text-indigo-600 dark:text-indigo-400">
                                Identity & Access Management
                            </span>
                        </div>
                        <h1 className="text-2xl font-extrabold tracking-tight text-slate-900 dark:text-slate-50 sm:text-3xl mt-1">
                            Pengguna Platform
                        </h1>
                        <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">
                            Kelola seluruh akun pengguna perusahaan, hak akses
                            peran, serta struktur tim dalam satu kendali
                            terpusat.
                        </p>
                    </div>
                </div>

                {/* Flash Messages */}
                {props.flash?.success && (
                    <div className="rounded-2xl border border-emerald-200 bg-emerald-50 p-4 text-xs font-medium text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/50 dark:text-emerald-300">
                        {props.flash.success}
                    </div>
                )}
                {props.flash?.error && (
                    <div className="rounded-2xl border border-rose-200 bg-rose-50 p-4 text-xs font-medium text-rose-800 dark:border-rose-900 dark:bg-rose-950/50 dark:text-rose-300">
                        {props.flash.error}
                    </div>
                )}

                {/* Metrics Grid using StatChip */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
                    <StatChip
                        icon={UsersRound}
                        label="Total Pengguna"
                        value={stats.total}
                        tone="blue"
                        variant="compact"
                        description="Seluruh akun terdaftar"
                    />
                    <StatChip
                        icon={CheckCircle2}
                        label="Aktif"
                        value={stats.active}
                        tone="emerald"
                        variant="compact"
                        description="Akun berstatus aktif"
                    />
                    <StatChip
                        icon={UserRound}
                        label="Tidak Aktif"
                        value={stats.inactive}
                        tone="orange"
                        variant="compact"
                        description="Akun nonaktif/ditangguhkan"
                    />
                    <StatChip
                        icon={Building2}
                        label="Tenant User"
                        value={stats.tenant_users}
                        tone="violet"
                        variant="compact"
                        description="Pengguna perusahaan"
                    />
                    <StatChip
                        icon={ShieldCheck}
                        label="Platform Owner"
                        value={stats.platform_admins}
                        tone="blue"
                        variant="compact"
                        description="Administrator tingkat tinggi"
                    />
                </div>

                {/* Main Content Layout */}
                <div className="grid gap-6 xl:grid-cols-[380px_1fr]">
                    {/* Form Card */}
                    <Card className="rounded-2xl border-slate-200/80 bg-white shadow-2xs dark:border-slate-800 dark:bg-slate-900 h-fit">
                        <CardHeader className="border-b border-slate-100 dark:border-slate-800 pb-4">
                            <CardTitle className="text-base font-bold flex items-center gap-2 text-slate-900 dark:text-slate-100">
                                <UserPlus className="size-4 text-indigo-600 dark:text-indigo-400" />
                                {editing
                                    ? "Edit Pengguna"
                                    : "Tambah Pengguna Baru"}
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="p-5">
                            <form onSubmit={save} className="space-y-4">
                                <Field
                                    label="Nama Lengkap"
                                    error={form.errors.name}
                                >
                                    <Input
                                        className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs"
                                        value={form.data.name}
                                        onChange={(e) =>
                                            form.setData("name", e.target.value)
                                        }
                                        placeholder="Cth: Budi Santoso"
                                    />
                                </Field>
                                <Field
                                    label="Email Korporat / Pribadi"
                                    error={form.errors.email}
                                >
                                    <Input
                                        type="email"
                                        className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs"
                                        value={form.data.email}
                                        onChange={(e) =>
                                            form.setData(
                                                "email",
                                                e.target.value,
                                            )
                                        }
                                        placeholder="budi@perusahaan.com"
                                    />
                                </Field>
                                <div className="grid grid-cols-2 gap-3">
                                    <Field
                                        label="No. Telepon"
                                        error={form.errors.phone}
                                    >
                                        <Input
                                            className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs"
                                            value={form.data.phone}
                                            onChange={(e) =>
                                                form.setData(
                                                    "phone",
                                                    e.target.value,
                                                )
                                            }
                                            placeholder="0812..."
                                        />
                                    </Field>
                                    <Field
                                        label="Kode Karyawan"
                                        error={form.errors.employee_code}
                                    >
                                        <Input
                                            className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs"
                                            value={form.data.employee_code}
                                            onChange={(e) =>
                                                form.setData(
                                                    "employee_code",
                                                    e.target.value,
                                                )
                                            }
                                            placeholder="EMP-001"
                                        />
                                    </Field>
                                </div>
                                <Field
                                    label="Perusahaan / Tenant"
                                    error={form.errors.company_id}
                                >
                                    <Select
                                        value={form.data.company_id}
                                        onValueChange={(v) =>
                                            form.setData("company_id", v)
                                        }
                                    >
                                        <SelectTrigger className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs">
                                            <SelectValue placeholder="Pilih perusahaan" />
                                        </SelectTrigger>
                                        <SelectContent className="rounded-xl">
                                            {companies
                                                .filter(
                                                    (company) =>
                                                        company.kode_perusahaan !==
                                                        "PLATFORM",
                                                )
                                                .map((company) => (
                                                    <SelectItem
                                                        key={company.id}
                                                        value={String(
                                                            company.id,
                                                        )}
                                                    >
                                                        {company.nama} ·{" "}
                                                        {
                                                            company.kode_perusahaan
                                                        }
                                                    </SelectItem>
                                                ))}
                                        </SelectContent>
                                    </Select>
                                </Field>
                                <Field
                                    label="Role Akses"
                                    error={form.errors.role_id}
                                >
                                    <Select
                                        value={form.data.role_id}
                                        onValueChange={(v) =>
                                            form.setData("role_id", v)
                                        }
                                        disabled={!selectedCompanyId}
                                    >
                                        <SelectTrigger className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs">
                                            <SelectValue placeholder="Pilih role" />
                                        </SelectTrigger>
                                        <SelectContent className="rounded-xl">
                                            {availableRoles.map((role) => (
                                                <SelectItem
                                                    key={role.id}
                                                    value={String(role.id)}
                                                >
                                                    {role.name}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </Field>
                                <Field
                                    label="Tim / Departemen"
                                    error={form.errors.team_id}
                                >
                                    <Select
                                        value={form.data.team_id || "none"}
                                        onValueChange={(v) =>
                                            form.setData(
                                                "team_id",
                                                v === "none" ? "" : v,
                                            )
                                        }
                                        disabled={!selectedCompanyId}
                                    >
                                        <SelectTrigger className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs">
                                            <SelectValue placeholder="Tanpa team" />
                                        </SelectTrigger>
                                        <SelectContent className="rounded-xl">
                                            <SelectItem value="none">
                                                Tanpa team
                                            </SelectItem>
                                            {availableTeams.map((team) => (
                                                <SelectItem
                                                    key={team.id}
                                                    value={String(team.id)}
                                                >
                                                    {team.name}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </Field>
                                <Field
                                    label={
                                        editing
                                            ? "Password Baru (opsional)"
                                            : "Password Akun"
                                    }
                                    error={form.errors.password}
                                >
                                    <Input
                                        type="password"
                                        className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs"
                                        value={form.data.password}
                                        onChange={(e) =>
                                            form.setData(
                                                "password",
                                                e.target.value,
                                            )
                                        }
                                        placeholder={
                                            editing
                                                ? "Kosongkan jika tidak diubah"
                                                : "Minimal 8 karakter"
                                        }
                                    />
                                </Field>
                                <Field
                                    label="Status Akun"
                                    error={form.errors.status}
                                >
                                    <Select
                                        value={form.data.status}
                                        onValueChange={(v) =>
                                            form.setData("status", v)
                                        }
                                    >
                                        <SelectTrigger className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs">
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent className="rounded-xl">
                                            <SelectItem value="active">
                                                Aktif
                                            </SelectItem>
                                            <SelectItem value="inactive">
                                                Tidak aktif
                                            </SelectItem>
                                        </SelectContent>
                                    </Select>
                                </Field>
                                <div className="flex gap-2 pt-2">
                                    <Button
                                        disabled={form.processing}
                                        className="flex-1 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-xs shadow-sm"
                                    >
                                        {form.processing
                                            ? "Menyimpan..."
                                            : editing
                                              ? "Simpan Perubahan"
                                              : "Buat Pengguna"}
                                    </Button>
                                    {editing && (
                                        <Button
                                            type="button"
                                            variant="outline"
                                            onClick={resetForm}
                                            className="rounded-xl text-xs font-semibold"
                                        >
                                            Batal
                                        </Button>
                                    )}
                                </div>
                            </form>
                        </CardContent>
                    </Card>

                    {/* Users List Card */}
                    <Card className="rounded-2xl border-slate-200/80 bg-white shadow-2xs dark:border-slate-800 dark:bg-slate-900 overflow-hidden">
                        <CardHeader className="border-b border-slate-100 dark:border-slate-800 pb-4">
                            <CardTitle className="text-base font-bold text-slate-900 dark:text-slate-100">
                                Daftar Pengguna
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="p-5 space-y-4">
                            <form
                                onSubmit={apply}
                                className="grid gap-3 lg:grid-cols-[1fr_200px_160px_140px_auto_auto]"
                            >
                                <div className="relative">
                                    <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 size-4 text-slate-400" />
                                    <Input
                                        className="pl-10 rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs"
                                        placeholder="Cari nama, email, kode, perusahaan..."
                                        value={search}
                                        onChange={(e) =>
                                            setSearch(e.target.value)
                                        }
                                    />
                                </div>
                                <Select
                                    value={companyFilter}
                                    onValueChange={setCompanyFilter}
                                >
                                    <SelectTrigger className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs">
                                        <SelectValue placeholder="Perusahaan" />
                                    </SelectTrigger>
                                    <SelectContent className="rounded-xl">
                                        <SelectItem value="all">
                                            Semua perusahaan
                                        </SelectItem>
                                        {companies.map((company) => (
                                            <SelectItem
                                                key={company.id}
                                                value={String(company.id)}
                                            >
                                                {company.kode_perusahaan}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <Select
                                    value={roleFilter}
                                    onValueChange={setRoleFilter}
                                >
                                    <SelectTrigger className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs">
                                        <SelectValue placeholder="Role" />
                                    </SelectTrigger>
                                    <SelectContent className="rounded-xl">
                                        <SelectItem value="all">
                                            Semua role
                                        </SelectItem>
                                        {roles.map((role) => (
                                            <SelectItem
                                                key={role.id}
                                                value={String(role.id)}
                                            >
                                                {role.name}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                                <Select
                                    value={statusFilter}
                                    onValueChange={setStatusFilter}
                                >
                                    <SelectTrigger className="rounded-xl border-slate-200 dark:border-slate-700 bg-slate-50/50 dark:bg-slate-800/50 text-xs">
                                        <SelectValue placeholder="Status" />
                                    </SelectTrigger>
                                    <SelectContent className="rounded-xl">
                                        <SelectItem value="all">
                                            Semua status
                                        </SelectItem>
                                        <SelectItem value="active">
                                            Aktif
                                        </SelectItem>
                                        <SelectItem value="inactive">
                                            Tidak aktif
                                        </SelectItem>
                                    </SelectContent>
                                </Select>
                                <Button
                                    type="submit"
                                    className="rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-xs shadow-sm"
                                >
                                    Cari
                                </Button>
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={resetFilters}
                                    className="rounded-xl text-xs font-semibold"
                                >
                                    Reset
                                </Button>
                            </form>

                            <div className="space-y-3 pt-2">
                                {users.data.length ? (
                                    users.data.map((user) => (
                                        <div
                                            key={user.id}
                                            className="flex flex-col gap-4 rounded-2xl border border-slate-200/80 bg-slate-50/30 p-4 sm:flex-row sm:items-center sm:justify-between dark:border-slate-800 dark:bg-slate-800/20 transition hover:bg-slate-50 dark:hover:bg-slate-800/50"
                                        >
                                            <div className="min-w-0 space-y-1">
                                                <div className="flex flex-wrap items-center gap-2 font-bold text-slate-900 dark:text-slate-100 text-sm">
                                                    {user.name}
                                                    {user.is_platform_admin && (
                                                        <Badge className="bg-indigo-50 text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300 border-0 text-[10px] font-bold">
                                                            Platform Owner
                                                        </Badge>
                                                    )}
                                                </div>
                                                <div className="text-xs text-slate-500 dark:text-slate-400">
                                                    {user.email}{" "}
                                                    {user.employee_code
                                                        ? `· ${user.employee_code}`
                                                        : ""}
                                                </div>
                                                <div className="flex flex-wrap gap-1.5 pt-1">
                                                    <Badge className="bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300 border-0 text-[10px] font-semibold">
                                                        {user.perusahaan
                                                            ?.kode_perusahaan ??
                                                            "-"}
                                                    </Badge>
                                                    <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300 border-0 text-[10px] font-semibold">
                                                        {user.role?.name ??
                                                            "Tanpa role"}
                                                    </Badge>
                                                    {user.team && (
                                                        <Badge className="bg-violet-50 text-violet-700 dark:bg-violet-950/50 dark:text-violet-300 border-0 text-[10px] font-semibold">
                                                            {user.team.name}
                                                        </Badge>
                                                    )}
                                                    <Badge
                                                        className={
                                                            user.status ===
                                                            "active"
                                                                ? "bg-emerald-50 text-emerald-700 dark:bg-emerald-950/50 dark:text-emerald-300 border-0 text-[10px] font-semibold"
                                                                : "bg-amber-50 text-amber-700 dark:bg-amber-950/50 dark:text-amber-300 border-0 text-[10px] font-semibold"
                                                        }
                                                    >
                                                        {user.status ===
                                                        "active"
                                                            ? "Aktif"
                                                            : "Tidak aktif"}
                                                    </Badge>
                                                </div>
                                            </div>
                                            <div className="flex shrink-0 gap-2">
                                                {!user.is_platform_admin && (
                                                    <>
                                                        <Button
                                                            size="sm"
                                                            variant="outline"
                                                            className="rounded-xl text-xs font-semibold"
                                                            onClick={() =>
                                                                edit(user)
                                                            }
                                                        >
                                                            Edit
                                                        </Button>
                                                        <Button
                                                            size="sm"
                                                            variant="outline"
                                                            className="rounded-xl text-xs font-semibold"
                                                            onClick={() =>
                                                                router.patch(
                                                                    `/platform/users/${user.id}/toggle-status`,
                                                                    {},
                                                                    {
                                                                        preserveScroll: true,
                                                                    },
                                                                )
                                                            }
                                                        >
                                                            {user.status ===
                                                            "active"
                                                                ? "Nonaktifkan"
                                                                : "Aktifkan"}
                                                        </Button>
                                                        <ConfirmDeleteButton
                                                            url={`/platform/users/${user.id}`}
                                                        />
                                                    </>
                                                )}
                                            </div>
                                        </div>
                                    ))
                                ) : (
                                    <EmptyState
                                        title="Belum ada pengguna"
                                        description="Ubah filter atau tambahkan pengguna perusahaan baru."
                                    />
                                )}
                            </div>
                            <Pagination links={users.links} />
                        </CardContent>
                    </Card>
                </div>
            </div>
        </AppLayout>
    );
}

function Field({
    label,
    error,
    children,
}: {
    label: string;
    error?: string;
    children: ReactNode;
}) {
    return (
        <div className="space-y-1.5">
            <Label className="text-xs font-semibold text-slate-700 dark:text-slate-300">
                {label}
            </Label>
            {children}
            {error && (
                <p className="text-[11px] font-medium text-rose-600 dark:text-rose-400">
                    {error}
                </p>
            )}
        </div>
    );
}