"use client";

import type { ExmnMapFilters, ExmnMapJobType } from "./exmnMapTypes";

type Props = {
  jobType: ExmnMapJobType;
  filters: ExmnMapFilters;
  onFiltersChange: (filters: ExmnMapFilters) => void;
};

const GRADE_OPTIONS = ["", "1", "2", "3", "4", "5"];

/** 조사결과 레이어의 세 가지 자동 적용 필터다. */
export default function ExmnLayerSettingPanel({
  jobType,
  filters,
  onFiltersChange,
}: Props) {
  const updateFilter = (key: keyof ExmnMapFilters, value: string) => {
    onFiltersChange({
      ...filters,
      [key]: value.replace(/[^0-9]/g, ""),
    });
  };
  const selectClass =
    "h-[24px] w-[54px] rounded-[4px] border border-input bg-background px-2 text-[1rem] text-foreground outline-none focus:border-primary";
  const labelClass = "shrink-0 text-[1.05rem] font-medium text-label";

  return (
    <div className="w-full rounded-[6px] border border-border bg-background px-2 py-[9px] shadow-blur">
      <div className="mb-2 flex items-center gap-1">
        {/* 관로/맨홀 조사유형을 구분하는 지도 범례 의미색이므로 고정색을 유지한다. */}
        <span
          className={`h-2 w-2 rounded-full ${jobType === "PPL" ? "bg-[#facc15]" : "bg-[#8b5cf6]"}`}
        />
        <span className="text-[1.1rem] font-semibold text-label">
          {jobType === "PPL" ? "관로조사" : "맨홀조사"}
        </span>
      </div>
      <div className="space-y-1.5">
        <label className="flex min-h-[25px] items-center justify-between gap-2">
          <span className={labelClass}>사업차수</span>
          <input
            className={selectClass}
            type="text"
            inputMode="numeric"
            maxLength={10}
            placeholder="전체"
            value={filters.bizCycl}
            onChange={(event) => updateFilter("bizCycl", event.target.value)}
          />
        </label>
        <label className="flex min-h-[25px] items-center justify-between gap-2">
          <span className={labelClass}>구조적 상태등급</span>
          <select
            className={selectClass}
            value={filters.structuralGrade}
            onChange={(event) =>
              updateFilter("structuralGrade", event.target.value)
            }
          >
            {GRADE_OPTIONS.map((grade) => (
              <option key={grade || "all"} value={grade}>
                {grade || "전체"}
              </option>
            ))}
          </select>
        </label>
        <label className="flex min-h-[25px] items-center justify-between gap-2">
          <span className={labelClass}>운영적 상태등급</span>
          <select
            className={selectClass}
            value={filters.operationalGrade}
            onChange={(event) =>
              updateFilter("operationalGrade", event.target.value)
            }
          >
            {GRADE_OPTIONS.map((grade) => (
              <option key={grade || "all"} value={grade}>
                {grade || "전체"}
              </option>
            ))}
          </select>
        </label>
      </div>
    </div>
  );
}