"use client";

import {
  Card,
  CardContent,
  Stack,
  TextField,
  Typography,
  Box,
  InputAdornment,
} from "@mui/material";
import { useFormContext, Controller } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { WarehouseInputs } from "@/app/api/warehouse/actions";

const WarehouseDetail: React.FC = () => {
  const { t } = useTranslation("warehouse");
  const {
    register,
    control,
    formState: { errors },
  } = useFormContext<WarehouseInputs>();

  return (
    <Card>
      <CardContent component={Stack} spacing={4}>
        <Typography variant="overline" display="block" marginBlockEnd={1}>
          {t("Warehouse Detail")}
        </Typography>
        <Box
          sx={{
            display: "flex",
            alignItems: "flex-start",
            gap: 1,
            flexWrap: "nowrap",
            justifyContent: "flex-start",
          }}
        >
          {/* 樓層 field with F inside on the right - F is automatically generated */}
          <Controller
            name="store_id"
            control={control}
            rules={{ required: t("store_id") + " " + t("is required") }}
            render={({ field }) => (
              <TextField
                {...field}
                label={t("store_id")}
                size="small"
                sx={{ width: "150px", minWidth: "120px" }}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">F</InputAdornment>
                  ),
                }}
                onChange={(e) => {
                  // Automatically remove "F" if user tries to type it (F is auto-generated)
                  const value = e.target.value.replace(/F/gi, "").trim();
                  field.onChange(value);
                }}
                error={Boolean(errors.store_id)}
                helperText={errors.store_id?.message}
              />
            )}
          />
          <Typography variant="body1" sx={{ mx: 0.5, mt: 1.5 }}>
            -
          </Typography>
          {/* 倉庫 field */}
          <Controller
            name="warehouse"
            control={control}
            rules={{ required: t("warehouse") + " " + t("is required") }}
            render={({ field }) => (
              <TextField
                {...field}
                label={t("warehouse")}
                size="small"
                sx={{ width: "150px", minWidth: "120px" }}
                error={Boolean(errors.warehouse)}
                helperText={errors.warehouse?.message}
              />
            )}
          />
          <Typography variant="body1" sx={{ mx: 0.5, mt: 1.5 }}>
            -
          </Typography>
          {/* 區域 field */}
          <Controller
            name="area"
            control={control}
            rules={{ required: t("area") + " " + t("is required") }}
            render={({ field }) => (
              <TextField
                {...field}
                label={t("area")}
                size="small"
                sx={{ width: "150px", minWidth: "120px" }}
                error={Boolean(errors.area)}
                helperText={errors.area?.message}
              />
            )}
          />
          <Typography variant="body1" sx={{ mx: 0.5, mt: 1.5 }}>
            -
          </Typography>
          {/* 儲位 field */}
          <Controller
            name="slot"
            control={control}
            rules={{ required: t("slot") + " " + t("is required") }}
            render={({ field }) => (
              <TextField
                {...field}
                label={t("slot")}
                size="small"
                sx={{ width: "150px", minWidth: "120px" }}
                error={Boolean(errors.slot)}
                helperText={errors.slot?.message}
              />
            )}
          />
          {/* stockTakeSection field in the same row */}
          <Box sx={{ flex: 1, minWidth: "150px", ml: 2 }}>
            <TextField
              label={t("stockTakeSection")}
              fullWidth
              size="small"
              {...register("stockTakeSection")}
              error={Boolean(errors.stockTakeSection)}
              helperText={errors.stockTakeSection?.message}
            />
          </Box>
        </Box>
      </CardContent>
    </Card>
  );
};

export default WarehouseDetail;