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 {
  ADMIN_MEMBERS_PATH,
  ADMIN_MEMBER_SEARCH_FIELD_OPTIONS,
  DEFAULT_ADMIN_MEMBER_SEARCH_FIELD,
  buildAdminMemberHref,
  type AdminMemberQuery,
} from '@/lib/domain/admin-member-query';

interface AdminMemberSearchBarProps {
  query: AdminMemberQuery;
}

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

  return (
    <form
      method="get"
      action={ADMIN_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}>
          {ADMIN_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>
  );
}