'use client';

import { useRouter } from 'next/navigation';
import { useState, type ChangeEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import {
  ADMIN_MEMBER_PAGE_SIZE_OPTIONS,
  ADMIN_MEMBER_SORT_OPTIONS,
  buildAdminMemberHref,
  type AdminMemberPageSize,
  type AdminMemberQuery,
  type AdminMemberSortOption,
} from '@/lib/domain/admin-member-query';
import { AdminMemberCreateModal } from './admin-member-create-modal';

interface AdminMemberListToolbarProps {
  query: AdminMemberQuery;
}

const EXCEL_UNSUPPORTED_NOTE = '엑셀 다운로드는 추후 제공됩니다.';

/**
 * 목록 툴바(시안 ADM_ADM_101 ②③) — 정렬/페이지 크기 select는 변경 즉시 URL을 갱신해 서버
 * 데이터를 다시 조회하게 한다. 두 값 모두 바뀌면 1페이지로 되돌린다(기존 페이지 번호가 새 정렬·
 * 크기 기준으로는 의미가 달라지므로).
 *
 * **엑셀다운로드는 버튼만 배치하고 동작은 구현하지 않는다**(사용자 지시 — 추후 진행).
 * disabled로 두어 클릭해도 아무 일도 일어나지 않게 한다. 학생 회원 목록처럼 백엔드에 엑셀 API가
 * 있으면 라우트 핸들러로 중계하면 되지만, 관리자 쪽에는 그 API가 아직 없다
 * (`/api/v1/mngr/admin/**`에 목록 조회 하나뿐).
 *
 * [신규 등록]은 시안대로 등록 팝업을 연다 — 팝업 열림 상태를 이 컴포넌트가 소유한다.
 */
export function AdminMemberListToolbar({ query }: AdminMemberListToolbarProps) {
  const router = useRouter();
  const [isCreateOpen, setIsCreateOpen] = useState(false);

  function handleSortChange(event: ChangeEvent<HTMLSelectElement>) {
    const sort = event.target.value as AdminMemberSortOption;
    router.replace(buildAdminMemberHref(query, { sort, page: 1 }));
  }

  function handlePageSizeChange(event: ChangeEvent<HTMLSelectElement>) {
    const pageSize = Number(event.target.value) as AdminMemberPageSize;
    router.replace(buildAdminMemberHref(query, { pageSize, page: 1 }));
  }

  return (
    <div className="flex flex-wrap items-center justify-end gap-3">
      <Button
        type="button"
        variant="success"
        disabled
        title={EXCEL_UNSUPPORTED_NOTE}
      >
        엑셀다운로드
      </Button>

      <Button
        type="button"
        variant="primary"
        onClick={() => setIsCreateOpen(true)}
      >
        신규 등록
      </Button>

      <Select
        name="sort"
        aria-label="정렬"
        defaultValue={query.sort}
        onChange={handleSortChange}
      >
        {ADMIN_MEMBER_SORT_OPTIONS.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </Select>

      <Select
        name="pageSize"
        aria-label="페이지 크기"
        defaultValue={query.pageSize}
        onChange={handlePageSizeChange}
      >
        {ADMIN_MEMBER_PAGE_SIZE_OPTIONS.map((size) => (
          <option key={size} value={size}>
            {size}개씩
          </option>
        ))}
      </Select>

      {isCreateOpen && (
        <AdminMemberCreateModal onClose={() => setIsCreateOpen(false)} />
      )}
    </div>
  );
}