'use client';

import * as React from 'react';

// Force dynamic rendering to avoid static generation issues with translations
export const dynamic = 'force-dynamic';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { DataTable, type DataTableColumn } from '@/components/admin/data-table';
// EN: Lazy load modal component / VI: Lazy load component modal
const UserDetailsModal = React.lazy(() => import('@/components/admin/user-details-modal').then(m => ({ default: m.UserDetailsModal })));
import type { User } from '@/components/admin/user-details-modal';
import { Filter, Download } from 'lucide-react';
import { useTranslation } from '@/hooks/use-translation';

/**
 * EN: User Management page component
 * VI: Component trang quản lý người dùng
 *
 * Features:
 * - Search bar
 * - Filter dropdowns
 * - User list table (will use DataTable component)
 * - Export functionality
 *
 * Tính năng:
 * - Thanh tìm kiếm
 * - Dropdowns lọc
 * - Bảng danh sách người dùng (sẽ sử dụng component DataTable)
 * - Chức năng export
 */
export default function UserManagementPage() {
  const { t } = useTranslation();
  const [searchQuery, setSearchQuery] = React.useState('');
  
  // EN: Mock data - replace with actual API calls / VI: Dữ liệu mock - thay thế bằng API calls thực tế
  const [users] = React.useState<User[]>([]);
  const [currentPage, setCurrentPage] = React.useState(1);
  const [selectedRows, setSelectedRows] = React.useState<string[]>([]);
  const [selectedUser, setSelectedUser] = React.useState<User | null>(null);
  
  // EN: Mock columns - replace with actual data / VI: Columns mock - thay thế bằng dữ liệu thực tế
  const columns: DataTableColumn<User>[] = [
    { key: 'email', header: t('admin.users.email'), sortable: true },
    { key: 'name', header: t('admin.users.name'), sortable: true },
    { key: 'role', header: t('admin.users.role'), sortable: true },
    { key: 'status', header: t('admin.users.status'), sortable: true },
    { key: 'actions', header: t('common.actions'), sortable: false },
  ];
  
  const handleBulkActivate = (ids: string[]) => {
    console.log('Activate users:', ids);
  };
  
  const handleBulkDeactivate = (ids: string[]) => {
    console.log('Deactivate users:', ids);
  };
  
  const handleBulkDelete = (ids: string[]) => {
    console.log('Delete users:', ids);
  };

  return (
    <div className="space-y-6">
      {/* EN: Page header / VI: Header trang */}
      <div>
        <h1 className="text-3xl font-bold text-text-primary">
          {t('admin.users.title')}
        </h1>
        <p className="mt-1 text-sm text-text-tertiary">
          {t('admin.users.description')}
        </p>
      </div>

      {/* EN: Search and filters card / VI: Card tìm kiếm và lọc */}
      <Card>
        <CardHeader>
          <CardTitle>{t('admin.users.searchAndFilters')}</CardTitle>
          <CardDescription>
            {t('admin.users.searchAndFiltersDesc')}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            {/* EN: Search input / VI: Input tìm kiếm */}
            <div className="md:col-span-2">
              <Input
                type="search"
                placeholder={t('admin.users.searchPlaceholder')}
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full"
              />
            </div>

            {/* EN: Filter buttons / VI: Nút lọc */}
            <div className="flex gap-2">
              <Button variant="secondary" size="md" className="flex-1">
                <Filter className="h-4 w-4 mr-2" />
                {t('admin.users.filters')}
              </Button>
              <Button variant="secondary" size="md">
                <Download className="h-4 w-4" />
              </Button>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* EN: User list table / VI: Bảng danh sách người dùng */}
      <DataTable
        data={users}
        columns={columns}
        currentPage={currentPage}
        itemsPerPage={10}
        onPageChange={setCurrentPage}
        selectable
        selectedRows={selectedRows}
        onSelectionChange={setSelectedRows}
        getRowId={(row) => row.id}
        bulkActions={[
          {
            label: t('admin.users.activate'),
            action: handleBulkActivate,
            variant: 'primary',
          },
          {
            label: t('admin.users.deactivate'),
            action: handleBulkDeactivate,
            variant: 'secondary',
          },
          {
            label: t('common.delete'),
            action: handleBulkDelete,
            variant: 'danger',
          },
        ]}
        exportable
        onExport={() => console.log('Export users')}
      />

      {/* EN: User details modal / VI: Modal chi tiết người dùng */}
      {selectedUser && (
        <React.Suspense fallback={null}>
          <UserDetailsModal
            user={selectedUser}
            open={!!selectedUser}
            onOpenChange={(open) => !open && setSelectedUser(null)}
            onEdit={(user) => {
              console.log('Edit user:', user);
              // EN: TODO: Implement edit / VI: TODO: Implement edit
            }}
            onDelete={(userId) => {
              console.log('Delete user:', userId);
              setSelectedUser(null);
              // EN: TODO: Implement delete / VI: TODO: Implement delete
            }}
            onDeactivate={(userId) => {
              console.log('Deactivate user:', userId);
              setSelectedUser(null);
              // EN: TODO: Implement deactivate / VI: TODO: Implement deactivate
            }}
          />
        </React.Suspense>
      )}
    </div>
  );
}
