"use client";

import React from "react";
import {
  FormHelperText,
  Grid,
  MenuItem,
  TextField,
} from "@mui/material";

export type QcItemFilter = "measurable" | "non_measurable";

export const REP010_DEFAULT_CRITERIA: Record<string, string> = {
  qcItemFilter: "measurable",
};

interface ItemQcReportFiltersProps {
  criteria: Record<string, string>;
  onFieldChange: (name: string, value: string) => void;
}

const gridSize = { xs: 12, sm: 6 };

export default function ItemQcReportFilters({
  criteria,
  onFieldChange,
}: ItemQcReportFiltersProps) {
  const qcItemFilter = (criteria.qcItemFilter || "measurable") as QcItemFilter;

  return (
    <Grid container spacing={3}>
      <Grid item {...gridSize}>
        <TextField
          fullWidth
          label="QC 檢測日期:由 Last In Date Start"
          type="date"
          value={criteria.lastInDateStart || ""}
          onChange={(e) => onFieldChange("lastInDateStart", e.target.value)}
          InputLabelProps={{ shrink: true }}
        />
      </Grid>
      <Grid item {...gridSize}>
        <TextField
          fullWidth
          label="QC 檢測日期:至 Last In Date End"
          type="date"
          value={criteria.lastInDateEnd || ""}
          onChange={(e) => onFieldChange("lastInDateEnd", e.target.value)}
          InputLabelProps={{ shrink: true }}
        />
      </Grid>
      <Grid item {...gridSize}>
        <TextField
          fullWidth
          select
          label="QC 類型"
          value={criteria.qcType || ""}
          onChange={(e) => onFieldChange("qcType", e.target.value)}
        >
          <MenuItem value="">全部</MenuItem>
          <MenuItem value="IQC">IQC</MenuItem>
          <MenuItem value="EPQC">EPQC</MenuItem>
        </TextField>
      </Grid>
      <Grid item {...gridSize}>
        <TextField
          fullWidth
          label="貨品編號 Item Code"
          value={criteria.itemCode || ""}
          onChange={(e) => onFieldChange("itemCode", e.target.value)}
          placeholder="e.g. MJ0364"
        />
      </Grid>
      <Grid item {...gridSize}>
        <TextField
          fullWidth
          select
          label="溫濕度數據篩選"
          value={qcItemFilter}
          onChange={(e) => onFieldChange("qcItemFilter", e.target.value)}
        >
          <MenuItem value="measurable">只包含溫度濕度</MenuItem>
          <MenuItem value="non_measurable">不包含溫度濕度</MenuItem>
        </TextField>
        <FormHelperText>
          {qcItemFilter === "measurable"
            ? "僅匯出已填寫實測值的溫度/濕度 QC 項目。"
            : "僅匯出非溫度/濕度之其他 QC 檢驗項目。"}
        </FormHelperText>
      </Grid>
    </Grid>
  );
}
