import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Field } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import {
  DEFAULT_STUDENT_MEMBER_SEARCH_FIELD,
  STUDENT_MEMBERS_PATH,
  STUDENT_MEMBER_SEARCH_FIELD_OPTIONS,
  buildStudentMemberHref,
  type StudentMemberQuery,
} from '@/lib/domain/student-member-query';

interface StudentSearchBarProps {
  query: StudentMemberQuery;
}

/**
 * 검색 영역 — 순수 `<form method="get">` GET 제출로 URL을 갱신한다(자바스크립트 없이도
 * 동작). 현재 `sort`·`pageSize`는 hidden input으로 함께 제출해 검색 후에도 유지되게 하고,
 * 검색 자체는 항상 1페이지로 돌아간다(hidden page 필드를 두지 않아 parseStudentMemberQuery의
 * 기본값 1로 자연스럽게 떨어진다). "초기화"는 폼 제출이 아니라 기본값으로 되돌린 링크라
 * 현재 입력값과 무관하게 동작한다. 상호작용이 전부 네이티브 폼 제출/링크 내비게이션이라
 * 클라이언트 자바스크립트가 필요 없다 — Server Component로 유지한다.
 */
export function StudentSearchBar({ query }: StudentSearchBarProps) {
  const resetHref = buildStudentMemberHref(query, {
    searchField: DEFAULT_STUDENT_MEMBER_SEARCH_FIELD,
    keyword: '',
    page: 1,
  });

  return (
    <form
      method="get"
      action={STUDENT_MEMBERS_PATH}
      className="flex flex-wrap items-end gap-3"
    >
      <input type="hidden" name="sort" value={query.sort} />
      <input type="hidden" name="pageSize" value={query.pageSize} />

      <Field label="검색 대상">
        <Select name="searchField" defaultValue={query.searchField}>
          {STUDENT_MEMBER_SEARCH_FIELD_OPTIONS.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </Select>
      </Field>

      <Field label="검색어">
        <Input
          type="text"
          name="keyword"
          defaultValue={query.keyword}
          placeholder="검색어를 입력하세요"
        />
      </Field>

      <Button type="submit" variant="secondary">
        검색
      </Button>
      <Link
        href={resetHref}
        className="text-body-md text-foreground-muted underline-offset-2 hover:underline"
      >
        초기화
      </Link>
    </form>
  );
}