star-erp/resources/js/Pages/Admin/User/Index.tsx

import { useState, useCallback } from 'react';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
import { Users, Plus, Pencil, Trash2, Mail, Shield, ArrowUpDown, ArrowUp, ArrowDown, Search, X } from 'lucide-react';
import { Input } from "@/Components/ui/input";
import { debounce } from "lodash";
import { Button } from '@/Components/ui/button';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import { format } from 'date-fns';
import { Can } from '@/Components/Permission/Can';
import { cn } from "@/lib/utils";
import Pagination from "@/Components/shared/Pagination";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import { Switch } from "@/Components/ui/switch";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";

interface Role {
    id: number;
    name: string;
    display_name: string;
}

interface User {
    id: number;
    name: string;
    email: string;
    username: string | null;
    created_at: string;
    roles: Role[];
    is_active: boolean;
}

interface PaginationLinks {
    url: string | null;
    label: string;
    active: boolean;
}

interface Props {
    users: {
        data: User[];
        from: number;
        links: PaginationLinks[];
    };
    filters: {
        per_page?: string;
        sort_by?: string;
        sort_order?: 'asc' | 'desc';
        search?: string;
        role?: string;
        is_active?: string;
    };
    roles: Role[];
}

export default function UserIndex({ users, roles, filters }: Props) {
    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
    const [searchTerm, setSearchTerm] = useState(filters.search || "");
    const [roleFilter, setRoleFilter] = useState<string>(filters.role || "all");
    const [isActiveFilter, setIsActiveFilter] = useState<string>(filters.is_active || "all");
    const [deleteId, setDeleteId] = useState<number | null>(null);
    const [deleteName, setDeleteName] = useState<string>('');
    const [modelOpen, setModelOpen] = useState(false);

    const confirmDelete = (id: number, name: string) => {
        setDeleteId(id);
        setDeleteName(name);
        setModelOpen(true);
    };

    const handleDelete = () => {
        if (deleteId) {
            router.delete(route('users.destroy', deleteId), {
                onSuccess: () => {
                    setModelOpen(false);
                },
                onFinish: () => setModelOpen(false),
            });
        }
    };

    const handlePerPageChange = (value: string) => {
        setPerPage(value);
        router.get(
            route('users.index'),
            { ...filters, per_page: value, search: searchTerm, role: roleFilter, is_active: isActiveFilter },
            { preserveState: false, replace: true, preserveScroll: true }
        );
    };

    // Debounced Search Handler
    const debouncedSearch = useCallback(
        debounce((term: string, role: string, isActive: string) => {
            router.get(
                route('users.index'),
                { ...filters, search: term, role: role, is_active: isActive },
                { preserveState: true, replace: true, preserveScroll: true }
            );
        }, 500),
        []
    );

    const handleSearchChange = (term: string) => {
        setSearchTerm(term);
        debouncedSearch(term, roleFilter, isActiveFilter);
    };

    const handleRoleChange = (value: string) => {
        setRoleFilter(value);
        router.get(
            route('users.index'),
            { ...filters, search: searchTerm, role: value, is_active: isActiveFilter },
            { preserveState: false, replace: true, preserveScroll: true }
        );
    };

    const handleIsActiveChange = (value: string) => {
        setIsActiveFilter(value);
        router.get(
            route('users.index'),
            { ...filters, search: searchTerm, role: roleFilter, is_active: value },
            { preserveState: false, replace: true, preserveScroll: true }
        );
    };

    const handleClearSearch = () => {
        setSearchTerm("");
        router.get(
            route('users.index'),
            { ...filters, search: "", role: roleFilter, is_active: isActiveFilter },
            { preserveState: true, replace: true, preserveScroll: true }
        );
    };

    const handleSort = (field: string) => {
        let newSortBy: string | undefined = field;
        let newSortOrder: 'asc' | 'desc' | undefined = 'asc';

        if (filters.sort_by === field) {
            if (filters.sort_order === 'asc') {
                newSortOrder = 'desc';
            } else {
                newSortBy = undefined;
                newSortOrder = undefined;
            }
        }

        router.get(
            route('users.index'),
            { ...filters, sort_by: newSortBy, sort_order: newSortOrder },
            { preserveState: true, replace: true }
        );
    };

    const SortIcon = ({ field }: { field: string }) => {
        if (filters.sort_by !== field) {
            return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
        }
        if (filters.sort_order === "asc") {
            return <ArrowUp className="h-4 w-4 text-primary-main ml-1" />;
        }
        return <ArrowDown className="h-4 w-4 text-primary-main ml-1" />;
    };

    return (
        <AuthenticatedLayout
            breadcrumbs={[
                { label: '系統管理', href: '#' },
                { label: '使用者管理', href: route('users.index'), isPage: true },
            ]}
        >
            <Head title="使用者管理" />

            <div className="container mx-auto p-6 max-w-7xl">
                <div className="flex items-center justify-between mb-6">
                    <div>
                        <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                            <Users className="h-6 w-6 text-primary-main" />
                            使用者管理
                        </h1>
                        <p className="text-gray-500 mt-1">
                            管理系統使用者帳號與角色分配
                        </p>
                    </div>
                </div>

                {/* Toolbar */}
                <div className="bg-white rounded-lg shadow-sm border p-4 mb-6">
                    <div className="flex flex-col md:flex-row gap-4">
                        {/* Search */}
                        <div className="flex-1 relative">
                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                            <Input
                                placeholder="搜尋姓名、Email、帳號..."
                                value={searchTerm}
                                onChange={(e) => handleSearchChange(e.target.value)}
                                className="pl-10 pr-10"
                            />
                            {searchTerm && (
                                <button
                                    onClick={handleClearSearch}
                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                                >
                                    <X className="h-4 w-4" />
                                </button>
                            )}
                        </div>

                        {/* Role Filter */}
                        <SearchableSelect
                            value={roleFilter}
                            onValueChange={handleRoleChange}
                            options={[
                                { label: "全部角色", value: "all" },
                                ...roles.map((role) => ({ label: role.display_name, value: role.id.toString() }))
                            ]}
                            placeholder="角色篩選"
                            className="w-full md:w-[180px]"
                        />

                        {/* Status Filter */}
                        <SearchableSelect
                            value={isActiveFilter}
                            onValueChange={handleIsActiveChange}
                            options={[
                                { label: "全部狀態", value: "all" },
                                { label: "啟用", value: "1" },
                                { label: "停用", value: "0" },
                            ]}
                            placeholder="狀態篩選"
                            className="w-full md:w-[120px]"
                        />

                        {/* Action Buttons */}
                        <div className="flex gap-2 w-full md:w-auto">
                            <Can permission="users.create">
                                <Link href={route('users.create')} className="w-full md:w-auto">
                                    <Button className="w-full md:w-auto button-filled-primary">
                                        <Plus className="h-4 w-4 mr-2" />
                                        新增使用者
                                    </Button>
                                </Link>
                            </Can>
                        </div>
                    </div>
                </div>

                <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <Table>
                        <TableHeader className="bg-gray-50">
                            <TableRow>
                                <TableHead className="w-[50px] text-center">#</TableHead>
                                <TableHead>
                                    <button
                                        onClick={() => handleSort('name')}
                                        className="flex items-center gap-1 hover:text-gray-900 transition-colors"
                                    >
                                        使用者 <SortIcon field="name" />
                                    </button>
                                </TableHead>
                                <TableHead>角色</TableHead>
                                <TableHead className="w-[150px] text-center">狀態</TableHead>
                                <TableHead>
                                    <button
                                        onClick={() => handleSort('created_at')}
                                        className="flex items-center gap-1 hover:text-gray-900 transition-colors"
                                    >
                                        加入時間 <SortIcon field="created_at" />
                                    </button>
                                </TableHead>
                                <TableHead className="text-center">操作</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {users.data.map((user, index) => (
                                <TableRow key={user.id}>
                                    <TableCell className="text-gray-500 font-medium text-center">
                                        {users.from + index}
                                    </TableCell>
                                    <TableCell>
                                        <div className="flex items-center gap-3">
                                            <div>
                                                <p className="font-medium text-gray-900">{user.name}</p>
                                                <div className="flex items-center text-xs text-gray-500">
                                                    <Mail className="h-3 w-3 mr-1" />
                                                    {user.email}
                                                </div>
                                            </div>
                                        </div>
                                    </TableCell>
                                    <TableCell>
                                        <div className="flex flex-wrap gap-2">
                                            {user.roles.length > 0 ? (
                                                user.roles.map(role => (
                                                    <div
                                                        key={role.id}
                                                        className={cn(
                                                            "inline-flex items-center px-2.5 py-1 rounded-md border",
                                                            role.name === 'super-admin'
                                                                ? "bg-purple-50 border-purple-200"
                                                                : "bg-gray-50 border-gray-200"
                                                        )}
                                                    >
                                                        <div className="flex items-center gap-1.5">
                                                            {role.name === 'super-admin' && <Shield className="h-3.5 w-3.5 text-purple-600" />}
                                                            <span className={cn(
                                                                "text-sm font-medium",
                                                                role.name === 'super-admin' ? "text-purple-700" : "text-gray-900"
                                                            )}>
                                                                {role.display_name}
                                                            </span>
                                                        </div>
                                                    </div>
                                                ))
                                            ) : (
                                                <span className="text-gray-400 text-sm italic">未分配角色</span>
                                            )}
                                        </div>
                                    </TableCell>
                                    <TableCell className="text-center">
                                        <div className="flex items-center justify-center gap-3">
                                            <div className={cn(
                                                "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border whitespace-nowrap",
                                                user.is_active
                                                    ? "bg-green-50 text-green-700 border-green-200"
                                                    : "bg-gray-100 text-gray-700 border-gray-200"
                                            )}>
                                                <span className={cn(
                                                    "w-1.5 h-1.5 rounded-full mr-1.5",
                                                    user.is_active ? "bg-green-500" : "bg-gray-400"
                                                )} />
                                                {user.is_active ? '啟用' : '停用'}
                                            </div>

                                            <Can permission="users.activate">
                                                <Switch
                                                    checked={user.is_active}
                                                    onCheckedChange={() => router.patch(route('users.toggle-active', user.id), {}, { preserveScroll: true })}
                                                    className="data-[state=checked]:bg-green-500"
                                                />
                                            </Can>
                                        </div>
                                    </TableCell>
                                    <TableCell className="text-gray-500 text-sm">
                                        {format(new Date(user.created_at), 'yyyy/MM/dd')}
                                    </TableCell>
                                    <TableCell className="text-center">
                                        <div className="flex items-center justify-center gap-2">
                                            <Can permission="users.edit">
                                                <Link href={route('users.edit', user.id)}>
                                                    <Button
                                                        variant="outline"
                                                        size="sm"
                                                        className="button-outlined-primary"
                                                        title="編輯"
                                                    >
                                                        <Pencil className="h-4 w-4" />
                                                    </Button>
                                                </Link>
                                            </Can>
                                            <Can permission="users.delete">
                                                <Button
                                                    variant="outline"
                                                    size="sm"
                                                    className="button-outlined-error"
                                                    title="刪除"
                                                    onClick={() => confirmDelete(user.id, user.name)}
                                                >
                                                    <Trash2 className="h-4 w-4" />
                                                </Button>
                                            </Can>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </div>

                {/* 分頁元件 - 統一樣式 */}
                <div className="mt-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                    <div className="flex items-center gap-2 text-sm text-gray-500">
                        <span>每頁顯示</span>
                        <SearchableSelect
                            value={perPage}
                            onValueChange={handlePerPageChange}
                            options={[
                                { label: "10", value: "10" },
                                { label: "20", value: "20" },
                                { label: "50", value: "50" },
                                { label: "100", value: "100" }
                            ]}
                            className="w-[100px] h-8"
                            showSearch={false}
                        />
                        <span>筆</span>
                    </div>
                    <div className="w-full sm:w-auto flex justify-center sm:justify-end">
                        <Pagination links={users.links} />
                    </div>
                </div>
            </div>

            <AlertDialog open={modelOpen} onOpenChange={setModelOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>確定要刪除此使用者嗎？</AlertDialogTitle>
                        <AlertDialogDescription>
                            您即將刪除使用者「{deleteName}」。此操作無法復原，請確認是否繼續。
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>取消</AlertDialogCancel>
                        <AlertDialogAction onClick={handleDelete} className="button-filled-error">
                            確認刪除
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </AuthenticatedLayout >
    );
}