imphnen-frontend-service/apps/backoffice/src/app/(protected)/hackathon-users/page.tsx

import {
  FC,
  ReactElement,
  useState,
  useEffect,
  useMemo,
  useCallback,
} from 'react';
import ModalUserDetail from './_components/modal-user-detail';
import {
  BackofficeWrapper,
  DataTable,
} from '@imphnen-frontend-service/ui/organisms';
import { ColumnDef } from '@tanstack/react-table';
import { Button } from '@imphnen-frontend-service/ui/atoms';
import { cn } from '@imphnen-frontend-service/utils';
import {
  EditOutlined,
  UserOutlined,
  SearchOutlined,
  FilterOutlined,
  PlusOutlined,
  LoadingOutlined,
} from '@ant-design/icons';
import { CityFilterSelect } from '../../../components/city-filter-select';
import { useQuery } from '@tanstack/react-query';
import {
  getAdminUsers,
  TAdminUserItem,
} from '@imphnen-frontend-service/service';
import { useSearchParams } from 'react-router-dom';

type UserType = TAdminUserItem;

// Skills options for filter
const skillsOptions = [
  'Frontend Developer',
  'Backend Developer',
  'Full Stack Developer',
  'DevOps Engineer',
  'UI/UX Designer',
  'Product Manager',
  'Data Scientist',
  'Mobile Developer',
];

export const HackathonUsersPage: FC = (): ReactElement => {
  const [searchParams, setSearchParams] = useSearchParams();
  const currentPage = Math.max(
    1,
    parseInt(searchParams.get('page') || '1', 10)
  );
  const searchQuery = searchParams.get('search') || '';
  const perPage = parseInt(searchParams.get('per_page') || '10', 10);
  const [showDetailModal, setShowDetailModal] = useState(false);
  const [showNewUserModal, setShowNewUserModal] = useState(false);
  const [selectedUser, setSelectedUser] = useState<UserType | null>(null);
  const [globalFilter, setGlobalFilter] = useState(searchQuery);

  // Advanced filtering states
  const [statusFilter, setStatusFilter] = useState('all');
  const [cityFilter, setCityFilter] = useState('all');
  const [skillsFilter, setSkillsFilter] = useState<string[]>([]);

  // Fetch users from API
  const {
    data: usersResponse,
    isLoading,
    isFetching,
  } = useQuery({
    queryKey: [
      'admin-users',
      currentPage,
      perPage,
      cityFilter,
      statusFilter,
      searchQuery,
    ],
    queryFn: () =>
      getAdminUsers({
        page: currentPage,
        per_page: perPage,
        search: searchQuery || undefined,
      }),
    staleTime: 30000, // 30 seconds cache
    gcTime: 5 * 60 * 1000, // 5 minutes
  });

  const totalData = usersResponse?.meta?.total_data || 0;
  const totalPages = usersResponse?.meta?.total_page || 1;

  // Handle page change - update URL query params
  const handlePageChange = useCallback(
    (newPage: number) => {
      const params = new URLSearchParams();
      params.set('page', newPage.toString());
      if (perPage !== 10) params.set('per_page', perPage.toString());
      if (searchQuery) params.set('search', searchQuery);
      setSearchParams(params);
      window.scrollTo({ top: 0, behavior: 'smooth' });
    },
    [setSearchParams, perPage, searchQuery]
  );

  // Validate page number doesn't exceed total pages
  useEffect(() => {
    if (!isLoading && totalPages > 0 && currentPage > totalPages) {
      setSearchParams({ page: totalPages.toString() });
    }
  }, [currentPage, totalPages, setSearchParams, isLoading]);

  // Sync globalFilter with URL search param on mount
  useEffect(() => {
    setGlobalFilter(searchQuery);
  }, [searchQuery]);

  // Handle search users
  const handleSearch = useCallback(() => {
    const params = new URLSearchParams();
    params.set('page', '1');
    if (perPage !== 10) params.set('per_page', perPage.toString());
    if (globalFilter.trim()) {
      params.set('search', globalFilter.trim());
    }
    setSearchParams(params);
  }, [globalFilter, setSearchParams, perPage]);

  // Handle Enter key press in search input
  const handleSearchKeyPress = useCallback(
    (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (e.key === 'Enter') {
        handleSearch();
      }
    },
    [handleSearch]
  );

  // Handle per page change
  const handlePerPageChange = useCallback(
    (newPerPage: number) => {
      const params = new URLSearchParams();
      params.set('page', '1');
      params.set('per_page', newPerPage.toString());
      if (searchQuery) params.set('search', searchQuery);
      setSearchParams(params);
    },
    [setSearchParams, searchQuery]
  );

  // Memoize the callback to prevent recreation
  const handleShowDetailModal = useCallback((user: UserType) => {
    setSelectedUser(user);
    setShowDetailModal(true);
  }, []);

  const handleCloseDetailModal = useCallback(() => {
    setShowDetailModal(false);
    setSelectedUser(null);
  }, []);

  const handleShowNewUserModal = useCallback(() => {
    setShowNewUserModal(true);
  }, []);

  const handleCloseNewUserModal = useCallback(() => {
    setShowNewUserModal(false);
  }, []);

  // Filter data based on current filter states
  const filteredData = useMemo(() => {
    const usersData = usersResponse?.data || [];
    return usersData.filter((user: UserType) => {
      // Status filter
      if (statusFilter !== 'all') {
        const isActive = statusFilter === 'active';
        if (user.is_active !== isActive) return false;
      }

      // Skills filter
      if (skillsFilter.length > 0) {
        const userSkills = user.skills || [];
        const hasMatchingSkill = skillsFilter.some((skill) =>
          userSkills.includes(skill)
        );
        if (!hasMatchingSkill) return false;
      }

      return true;
    });
  }, [usersResponse, statusFilter, skillsFilter]);

  // Memoize columns to prevent recreation on every render
  const columns: ColumnDef<UserType>[] = useMemo(
    () => [
      {
        accessorKey: 'fullname',
        header: 'User',
        cell: ({ row }) => (
          <div className="flex items-center gap-3">
            {/* Avatar */}
            <div className="w-10 h-10 rounded-full bg-neutral-200 flex items-center justify-center overflow-hidden shrink-0">
              {row.original.avatar ? (
                <img
                  src={row.original.avatar}
                  alt={row.original.fullname}
                  className="w-full h-full object-cover"
                />
              ) : (
                <UserOutlined className="text-neutral-500 text-lg" />
              )}
            </div>
            {/* Name only */}
            <div className="min-w-0 flex-1">
              <p className="font-medium text-neutral-900 truncate">
                {row.original.fullname}
              </p>
            </div>
          </div>
        ),
        enableSorting: true,
      },
      {
        accessorKey: 'skills',
        header: 'Skills',
        cell: ({ row }) => {
          const skills = row.original.skills || [];
          return (
            <div className="flex flex-wrap gap-1 max-w-xs">
              {skills.length > 0 ? (
                <>
                  {skills.slice(0, 2).map((skill, index) => (
                    <span
                      key={index}
                      className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-100 text-success-800"
                    >
                      {skill.replace(' Developer', '').replace(' Engineer', '')}
                    </span>
                  ))}
                  {skills.length > 2 && (
                    <span className="inline-flex items-center px-2 py-1 rounded-2xl text-xs font-medium bg-success-200 text-success-700">
                      +{skills.length - 2}
                    </span>
                  )}
                </>
              ) : (
                <span className="text-neutral-400">-</span>
              )}
            </div>
          );
        },
        enableSorting: false,
      },
      {
        accessorKey: 'location',
        header: 'Location',
        cell: ({ row }) => (
          <span className="text-neutral-700">{row.original.location}</span>
        ),
        enableSorting: true,
      },
      {
        accessorKey: 'is_active',
        header: 'Status',
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <div
              className={cn(
                'w-2 h-2 rounded-full',
                row.original.is_active ? 'bg-success-500' : 'bg-neutral-400'
              )}
            />
            <span
              className={cn(
                'text-sm font-medium',
                row.original.is_active ? 'text-success-700' : 'text-neutral-500'
              )}
            >
              {row.original.is_active ? 'Active' : 'Inactive'}
            </span>
          </div>
        ),
        enableSorting: true,
        sortingFn: (rowA, rowB) => {
          const aActive = rowA.original.is_active;
          const bActive = rowB.original.is_active;
          if (aActive && !bActive) return -1;
          if (!aActive && bActive) return 1;
          return 0;
        },
      },
      {
        accessorKey: 'created_at',
        header: 'Joined',
        cell: ({ row }) => (
          <span className="text-neutral-900 text-sm">
            {new Date(row.original.created_at).toLocaleDateString('en-US', {
              year: 'numeric',
              month: 'short',
              day: 'numeric',
            })}
          </span>
        ),
        enableSorting: true,
        sortingFn: 'datetime',
      },
      {
        id: 'actions',
        header: 'Actions',
        meta: { cellClassName: cn('w-48') },
        cell: ({ row }) => (
          <div className="flex items-center gap-2">
            <Button
              variant="primary"
              size="sm"
              className="flex items-center gap-2 text-sm px-4 py-2"
              onClick={() => handleShowDetailModal(row.original)}
            >
              <EditOutlined className="text-sm" />
              Manage
            </Button>
            {/* <Button
              variant="secondary"
              size="sm"
              className="text-sm px-4 py-2"
              onClick={() => {
                // Toggle user status - implement later
                console.log(`Toggle status for ${row.original.fullname}`);
              }}
            >
              {row.original.is_active ? 'Deactivate' : 'Activate'}
            </Button> */}
          </div>
        ),
        enableSorting: false,
      },
    ],
    [handleShowDetailModal]
  );

  return (
    <BackofficeWrapper title="IMPHNEN x Kolosal.ai Hackathon 2025">
      <h1 className="mb-8 text-p1 font-semibold text-neutral-700">
        User Management
      </h1>
      {/* Filters and actions */}
      <section className="bg-white rounded-md shadow p-8 flex flex-col gap-6">
        <div className="flex flex-wrap gap-3 items-center justify-between">
          {/* Left side - Search & filters */}
          <div className="flex flex-wrap gap-3 items-center">
            {/* Search bar */}
            <div className="relative">
              <SearchOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm" />
              <input
                type="text"
                className="border border-neutral-200 rounded-lg pl-10 pr-4 py-2.5 text-sm w-full sm:w-80 focus:border-primary-500 focus:outline-none"
                placeholder="Search users by name or location..."
                value={globalFilter}
                onChange={(e) => setGlobalFilter(e.target.value)}
                onKeyPress={handleSearchKeyPress}
              />
            </div>

            {/* Per Page Dropdown */}
            <div className="relative">
              <select
                className="border border-neutral-200 rounded-lg px-4 py-2.5 text-sm w-28 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
                value={perPage}
                onChange={(e) =>
                  handlePerPageChange(parseInt(e.target.value, 10))
                }
              >
                <option value={10}>10 / page</option>
                <option value={20}>20 / page</option>
                <option value={50}>50 / page</option>
                <option value={100}>100 / page</option>
              </select>
            </div>

            {/* Status Filter */}
            {/* <div className="relative">
              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
              <select
                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-36 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
              >
                <option value="all">All Status</option>
                <option value="active">Active</option>
                <option value="inactive">Inactive</option>
              </select>
            </div> */}

            {/* City Filter */}
            {/* <CityFilterSelect
              value={cityFilter}
              onChange={setCityFilter}
              className="w-full sm:w-44"
              placeholder="Search cities..."
              allOptionLabel="All Cities"
            />
            {cityFilter !== 'all' && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
                Location: {cityFilter}
                <button
                  onClick={() => setCityFilter('all')}
                  className="text-green-600 hover:text-green-800 cursor-pointer"
                >
                  ✕
                </button>
              </span>
            )} */}

            {/* Skills Filter with Icon */}
            {/* <div className="relative">
              <FilterOutlined className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400 text-sm pointer-events-none z-10" />
              <select
                className="border border-neutral-200 rounded-lg pl-10 pr-10 py-2.5 text-sm w-full sm:w-44 focus:border-primary-500 focus:outline-none appearance-none bg-white cursor-pointer"
                value=""
                onChange={(e) => {
                  if (
                    e.target.value &&
                    !skillsFilter.includes(e.target.value)
                  ) {
                    setSkillsFilter((prev) => [...prev, e.target.value]);
                  }
                }}
              >
                <option value="">Add Skill Filter</option>
                {skillsOptions.map((skill) => (
                  <option
                    key={skill}
                    value={skill}
                    disabled={skillsFilter.includes(skill)}
                  >
                    {skill}
                  </option>
                ))}
              </select>
            </div> */}
          </div>

          {/* Right side - Add User Button */}
          <div className="flex items-center gap-3">
            <Button
              variant="primary"
              size="md"
              className="flex items-center gap-2 px-4 py-2"
              onClick={handleShowNewUserModal}
            >
              <PlusOutlined className="text-sm" />
              Add User
            </Button>
          </div>
        </div>

        {/* Active filters display */}
        {(skillsFilter.length > 0 ||
          statusFilter !== 'all' ||
          cityFilter !== 'all') && (
          <div className="flex flex-wrap gap-2 items-center">
            <span className="text-sm text-neutral-600">Active filters:</span>

            {/* Status filter badge */}
            {statusFilter !== 'all' && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-info-100 text-info-800 rounded-2xl text-sm">
                Status: {statusFilter}
                <button
                  onClick={() => setStatusFilter('all')}
                  className="text-info-600 hover:text-info-800 cursor-pointer"
                >
                  ✕
                </button>
              </span>
            )}

            {/* Location filter badge */}
            {cityFilter !== 'all' && (
              <span className="inline-flex items-center gap-1 px-2 py-1 bg-green-100 text-green-800 rounded-2xl text-sm">
                City: {cityFilter}
                <button
                  onClick={() => setCityFilter('all')}
                  className="text-green-600 hover:text-green-800 cursor-pointer"
                >
                  ✕
                </button>
              </span>
            )}

            {/* Skills filter badges */}
            {skillsFilter.map((skill) => (
              <span
                key={skill}
                className="inline-flex items-center gap-1 px-2 py-1 bg-purple-100 text-purple-800 rounded-2xl text-sm"
              >
                {skill.replace(' Developer', '').replace(' Engineer', '')}
                <button
                  onClick={() =>
                    setSkillsFilter((prev) => prev.filter((s) => s !== skill))
                  }
                  className="text-purple-600 hover:text-purple-800 cursor-pointer"
                >
                  ✕
                </button>
              </span>
            ))}

            {/* Clear all filters */}
            <Button
              variant="secondary"
              size="sm"
              onClick={() => {
                setStatusFilter('all');
                setCityFilter('all');
                setSkillsFilter([]);
                setGlobalFilter('');
              }}
              className="text-sm text-neutral-600"
            >
              Clear All
            </Button>
          </div>
        )}

        {/* Loading & results display */}
        {isLoading ? (
          <div className="flex items-center justify-center py-12">
            <LoadingOutlined className="text-3xl text-primary-500 animate-spin" />
            <span className="ml-3 text-neutral-600">Loading users...</span>
          </div>
        ) : filteredData.length > 0 ? (
          <>
            <div className="text-sm text-neutral-600">
              Showing {filteredData.length} of {totalData} users (Page{' '}
              {currentPage} of {totalPages})
              {isFetching && (
                <span className="ml-2 text-primary-500">(Updating...)</span>
              )}
            </div>
            <DataTable
              data={filteredData}
              columns={columns}
              pageSize={perPage}
              manualPagination={true}
              pageCount={totalPages}
              currentPage={currentPage}
              onPageChange={handlePageChange}
            />
          </>
        ) : (
          <div className="text-center py-12 text-neutral-500">
            No users found. Try adjusting your filters.
          </div>
        )}
      </section>

      {/* Modals component */}
      <ModalUserDetail
        isOpen={showDetailModal}
        onClose={handleCloseDetailModal}
        user={selectedUser}
      />

      {/* New User Modal */}
      <ModalUserDetail
        isOpen={showNewUserModal}
        onClose={handleCloseNewUserModal}
        user={null} // null indicates creating new user
      />
    </BackofficeWrapper>
  );
};

export default HackathonUsersPage;