'use client';

import { useRouter } from 'next/navigation';
import type { ChangeEvent } from 'react';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import {
  STUDENT_MEMBERS_EXCEL_PATH,
  STUDENT_MEMBER_PAGE_SIZE_OPTIONS,
  STUDENT_MEMBER_SORT_OPTIONS,
  buildStudentMemberHref,
  type StudentMemberPageSize,
  type StudentMemberQuery,
  type StudentMemberSortOption,
} from '@/lib/domain/student-member-query';

interface StudentListToolbarProps {
  query: StudentMemberQuery;
}

/**
 * 목록 툴바 — 정렬/페이지 크기 select는 변경 즉시 URL을 갱신해 서버 데이터를 다시 조회하게
 * 한다(select의 onChange가 필요해 이 컴포넌트만 최말단 클라이언트 경계로 분리했다). 두 값 모두
 * 바뀌면 1페이지로 되돌린다(기존 페이지 번호가 새 정렬·크기 기준으로는 의미가 달라지므로).
 * 엑셀다운로드는 이번 범위에서 버튼 배치만 하고 동작은 구현하지 않는다(사용자 지시) —
 * disabled로 두어 클릭해도 아무 일도 일어나지 않게 한다.
 *
 * 정렬 select는 URL의 `sort`만 바꾸고, 그 값을 어떻게 만족시킬지는 Repository가 정한다 —
 * 가입일순은 백엔드의 고정 순서와 같아 그대로 받아오고, 이름순은 백엔드에 정렬 파라미터가 없어
 * 전체를 받아 서버에서 정렬한다. 화면은 그 차이를 알 필요가 없다.
 */
export function StudentListToolbar({ query }: StudentListToolbarProps) {
  const router = useRouter();

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

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

  return (
    <div className="flex flex-wrap items-center justify-between gap-3">
      {/* 네이티브 GET 폼 제출 — 응답이 첨부파일(Content-Disposition: attachment)이라 브라우저가
          현재 화면을 그대로 둔 채 파일만 내려받는다. 라우터 내비게이션(router.push)으로는
          첨부파일 응답을 처리할 수 없고, Button은 <button>이라 링크로 쓸 수 없어 폼으로 감쌌다.
          검색·페이징 값을 hidden으로 싣지 않는 것이 사양이다 — 파일은 항상 전체 데이터다. */}
      <form action={STUDENT_MEMBERS_EXCEL_PATH} method="get">
        <Button type="submit" variant="primary">
          엑셀다운로드
        </Button>
      </form>

      <div className="flex items-center gap-3">
        <Select
          name="sort"
          aria-label="정렬"
          defaultValue={query.sort}
          onChange={handleSortChange}
        >
          {STUDENT_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}
        >
          {STUDENT_MEMBER_PAGE_SIZE_OPTIONS.map((size) => (
            <option key={size} value={size}>
              {size}개씩
            </option>
          ))}
        </Select>
      </div>
    </div>
  );
}