/**
 * 화면명: 관로조사 레이어 설정
 * 사업차수와 조사 종류·상태등급별 지도 표시 조건을 설정한다.
 */
"use client";

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

type Props = {
  jobType: ExmnMapJobType;
  filters: ExmnMapFilters;
  onFiltersChange: (filters: ExmnMapFilters) => void;
  enabled?: boolean;
  onEnabledChange?: (enabled: boolean) => void;
  onClose?: () => void;
};

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

/** 조사결과 레이어의 세 가지 자동 적용 필터다. */
export default function ExmnLayerSettingPanel({
  jobType,
  filters,
  onFiltersChange,
  enabled = true,
  onEnabledChange = () => {},
  onClose = () => {},
}: Props) {
  const updateFilter = (key: keyof ExmnMapFilters, value: string) => {
    onFiltersChange({
      ...filters,
      [key]: value.replace(/[^0-9]/g, ""),
    });
  };
  const selectClass =
    "h-[26px] w-full rounded border border-input bg-background px-2 py-0 text-center text-[12px] leading-none text-foreground outline-none focus:border-primary";
  const labelClass = "shrink-0 text-[1.15rem] font-medium text-label";
  const title = jobType === "PPL" ? "관로조사" : "맨홀조사";

  return (
    <LayerSettingCard
      title={title}
      enabled={enabled}
      onEnabledChange={onEnabledChange}
      onClose={onClose}
    >
      <div className="space-y-[6px]">
        <label className="flex min-h-[24px] flex-col items-stretch gap-1">
          <span className={`flex items-center gap-1 ${labelClass}`}>
            <span
              className={`h-2 w-2 rounded-full ${jobType === "PPL" ? "bg-[#facc15]" : "bg-[#8b5cf6]"}`}
            />
            사업차수
          </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-[24px] flex-col items-stretch gap-1">
          <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-[24px] flex-col items-stretch gap-1">
          <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>
    </LayerSettingCard>
  );
}