OpenFlare/frontend/app/(main)/admin/users/page.tsx

'use client';

import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Switch } from '@/components/ui/switch';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Badge } from '@/components/ui/badge';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Eye, Layers, Pencil, Plus, UserRound, UserX } from 'lucide-react';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';

import type { AdminUser } from '@/lib/services/admin';
import { formatDateTime } from '@/lib/utils';
import { EmptyStateWithBorder } from '@/components/layout/empty';
import { LoadingStateWithBorder } from '@/components/layout/loading';
import { ErrorInline } from '@/components/layout/error';
import { useAdminUsers } from '@/contexts/admin-users-context';
import { CreateUserModal } from './components/create-user-modal';
import { UserFilterBar } from './components/user-filter-bar';
import { UserDetailSheet } from './components/user-detail-sheet';
import { EditUserModal } from './components/edit-user-modal';

export default function UsersPage() {
  const { users, loading, error, fetchUsers, getUserDetail, updateUserStatus } =
    useAdminUsers();

  const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);
  const [detailLoading, setDetailLoading] = useState(false);
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [editTarget, setEditTarget] = useState<AdminUser | null>(null);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  const handleStatusToggle = async (user: AdminUser) => {
    await updateUserStatus(user);

    if (selectedUser?.id === user.id) {
      setSelectedUser((prev) =>
        prev ? { ...prev, is_active: !prev.is_active } : null,
      );
    }
  };

  const handleShowDetail = async (user: AdminUser) => {
    setSelectedUser(user);
    setDetailOpen(true);
    setDetailLoading(true);

    try {
      const detail = await getUserDetail(user.id);
      setSelectedUser(detail);
    } catch {
      setSelectedUser(user);
    } finally {
      setDetailLoading(false);
    }
  };

  return (
    <div className='py-6 space-y-4'>
      {/* 顶部标题栏 */}
      <div className='flex items-center justify-between pb-2'>
        <div className='flex items-center gap-2'>
          <UserRound className='size-5 text-primary' />
          <div>
            <h1 className='text-2xl font-semibold tracking-tight'>用户管理</h1>
          </div>
        </div>
        <Button
          variant='secondary'
          size='sm'
          className='h-7 text-xs'
          onClick={() => setCreateModalOpen(true)}
        >
          <Plus className='size-3.5 mr-1' />
          新增用户
        </Button>
      </div>

      {/* 筛选与分页栏 (已拆分为独立自治组件) */}
      <UserFilterBar />

      {error ? (
        <div className='p-8 border border-dashed rounded-lg'>
          <ErrorInline
            error={error}
            onRetry={() => fetchUsers(true)}
            className='justify-center'
          />
        </div>
      ) : loading && users.length === 0 ? (
        <LoadingStateWithBorder icon={Layers} description='加载用户列表中...' />
      ) : users.length === 0 ? (
        <EmptyStateWithBorder icon={UserX} description='暂无用户数据' />
      ) : (
        <div className='border border-dashed shadow-none rounded-lg overflow-hidden'>
          <TooltipProvider delayDuration={0}>
            <Table className='w-full caption-bottom text-sm min-w-full'>
              <TableHeader className='sticky top-0 z-20 bg-background'>
                <TableRow className='border-b border-dashed hover:bg-transparent'>
                  <TableHead className='w-[90px] whitespace-nowrap py-2 h-8'>
                    ID
                  </TableHead>
                  <TableHead className='w-[120px] whitespace-nowrap py-2 h-8'>
                    用户
                  </TableHead>
                  <TableHead className='whitespace-nowrap min-w-[160px] py-2 h-8 pl-4'>
                    邮箱
                  </TableHead>
                  <TableHead className='whitespace-nowrap min-w-[140px] py-2 h-8'>
                    上次登陆
                  </TableHead>
                  <TableHead className='whitespace-nowrap min-w-[140px] py-2 h-8'>
                    注册时间
                  </TableHead>
                  <TableHead className='whitespace-nowrap min-w-[140px] py-2 h-8'>
                    上次更新
                  </TableHead>
                  <TableHead className='sticky right-0 text-center bg-background z-10 w-[110px] py-2 h-8'>
                    操作
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {users.map((user) => (
                  <TableRow
                    key={user.id}
                    className='border-dashed hover:bg-muted/30 cursor-pointer group'
                    onClick={() => handleShowDetail(user)}
                  >
                    <TableCell className='font-mono text-[11px] text-muted-foreground py-1'>
                      {user.id}
                    </TableCell>
                    <TableCell className='py-1'>
                      <div className='flex items-center gap-2'>
                        <Avatar className='h-7 w-7 rounded-sm border'>
                          <AvatarImage src={user.avatar_url} />
                          <AvatarFallback className='rounded-sm text-[10px]'>
                            {user.username.substring(0, 2).toUpperCase()}
                          </AvatarFallback>
                        </Avatar>
                        <div className='flex flex-col gap-0'>
                          <div className='flex items-center gap-1.5'>
                            <span
                              className='font-medium text-[11px] leading-tight max-w-[100px] truncate'
                              title={user.nickname}
                            >
                              {user.nickname}
                            </span>
                            {user.is_admin && (
                              <Badge
                                variant='secondary'
                                className='text-[9px] h-3.5 px-0.5 rounded-[2px] font-normal leading-none tracking-tighter'
                              >
                                ADM
                              </Badge>
                            )}
                          </div>
                          <div className='flex items-center gap-1.5'>
                            <span className='text-[10px] text-muted-foreground font-mono leading-tight'>
                              @{user.username}
                            </span>
                          </div>
                        </div>
                      </div>
                    </TableCell>

                    <TableCell className='text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1 pl-4'>
                      {user.email || '-'}
                    </TableCell>

                    <TableCell className='text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1 pl-4'>
                      {formatDateTime(user.last_login_at)}
                    </TableCell>
                    <TableCell className='text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1'>
                      {formatDateTime(user.created_at)}
                    </TableCell>
                    <TableCell className='text-[10px] text-muted-foreground font-mono whitespace-nowrap py-1'>
                      {formatDateTime(user.updated_at)}
                    </TableCell>
                    <TableCell
                      className='sticky right-0 text-center bg-background z-10 py-1'
                      onClick={(e) => e.stopPropagation()}
                    >
                      <div className='flex items-center justify-center gap-0.5'>
                        <Tooltip>
                          <TooltipTrigger asChild>
                            <div>
                              <Switch
                                checked={user.is_active}
                                onCheckedChange={() => handleStatusToggle(user)}
                                disabled={user.is_admin}
                                className='scale-75'
                              />
                            </div>
                          </TooltipTrigger>
                          <TooltipContent side='top' className='text-xs'>
                            {user.is_admin
                              ? '管理员账户'
                              : user.is_active
                                ? '禁用账户'
                                : '启用账户'}
                          </TooltipContent>
                        </Tooltip>

                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              variant='ghost'
                              size='icon'
                              className='h-6 w-6 text-muted-foreground hover:text-foreground'
                              onClick={() => handleShowDetail(user)}
                            >
                              <Eye className='size-3' />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent side='top' className='text-xs'>
                            查看详情
                          </TooltipContent>
                        </Tooltip>

                        <Tooltip>
                          <TooltipTrigger asChild>
                            <Button
                              variant='ghost'
                              size='icon'
                              className='h-6 w-6 text-muted-foreground hover:text-foreground'
                              onClick={() => setEditTarget(user)}
                            >
                              <Pencil className='size-3' />
                            </Button>
                          </TooltipTrigger>
                          <TooltipContent side='top' className='text-xs'>
                            编辑用户
                          </TooltipContent>
                        </Tooltip>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TooltipProvider>
        </div>
      )}

      {/* 用户详情侧拉抽屉 (已拆分为独立子组件) */}
      <UserDetailSheet
        selectedUser={selectedUser}
        isOpen={detailOpen}
        onOpenChange={setDetailOpen}
        detailLoading={detailLoading}
        onStatusToggle={handleStatusToggle}
      />

      {/* 编辑用户弹窗 */}
      <EditUserModal
        user={editTarget}
        isOpen={!!editTarget}
        onClose={() => setEditTarget(null)}
      />

      {/* 新建用户模态弹窗 */}
      <CreateUserModal
        isOpen={createModalOpen}
        onClose={() => setCreateModalOpen(false)}
      />
    </div>
  );
}