/**
 * テストページコンポーネント
 * 白紙の状態で表示されるテスト用のページ
 */
import React, { useState, useEffect } from 'react';
import { stockApi, stuffApi } from '../services/api';
import { Stock, StockUpdateRequest, Stuff } from '../types/types';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from "@mui/material";
import {
  Container,
  Typography,
  Tooltip,
  Fab,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button,
  Box,
  Checkbox,
  FormControlLabel,
  FormGroup,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
} from '@mui/material';
import { GENERAL_ERRORS, STOCK_ERRORS } from '../constants/errorMessages';
import { Add as AddIcon } from '@mui/icons-material';
/*import DatePicker, { registerLocale } from 'react-datepicker';
import { ja } from 'date-fns/locale/ja'; // date-fnsの日本語ロケールをインポート*/
import { useMessage } from '../components/MessageContext';
import BuyExpDateSelect from '../components/BuyExpDateSelect';

/*// 日付をyyyy-MM-dd形式で返す関数
const formatDateLocal = (date: Date) => {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  return `${year}-${month}-${day}`;
};*/

// 新規在庫の初期状態
const EMPTY_STOCK: Omit<Stock, 'stockId' | 'stuffId'> & { stuffId: number | null } & { newAddition: boolean } = {
  stuffId: null,
  stuffName: '',
  amount: 1,
  buyAmount: 1,
  price: 0,
  shop: '',
  lastUpdate: '',
  buyDate: new Date().toISOString(),
  expDate: '',
  category: '',
  newAddition: false, // 材料を新規作成するか否か
  // shop '',
}

// 日本語ロケールを登録
//registerLocale('ja', ja);

const StockPage: React.FC = () => {

  const [stocks, setStocks] = useState<Stock[]>([]);
  // セル選択の表示状態
  const [selectedRow, setSelectedRow] = useState<Stock | null>(null);
  // 追加ダイアログボックスの表示状態
  const [isAddOpen, setIsAddOpen] = useState(false);
  // 在庫追加に使う状態
  const [newStock, setNewStock] = useState(EMPTY_STOCK);
  const [stuffs, setStuffs] = useState<Stuff[]>([]);
  // 編集ダイアロボックスの表示状態
  const [isEditOpen, setIsEditOpen] = useState(false);
  // 削除メッセージダイアログの表示状態
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
  // 在庫の編集状態
  const [editStock, setEditStock] = useState<Stock | null>(null);

  const { showErrorMessage, showWarningMessage } = useMessage();

  // コンポーネントマウント時にタスク一覧を取得
  useEffect(() => {
    fetchStocks();
  }, []);

  /**
   * APIから在庫一覧を取得する関数
   * 取得したタスクをstate(tasks)に設定
   */
  const fetchStocks = async () => {
    try {
      const stocks = await stockApi.getStocks();
      console.log('Stocks=', stocks)
      setStocks(stocks);
    } catch (error) {
      console.error(`${STOCK_ERRORS.FETCH_FAILED}:`, error);
      showErrorMessage(STOCK_ERRORS.FETCH_FAILED);
    }
  };

  /**
   * 在庫リストに新規食材を作成するハンドラー
   */
  const handleCreateStock = async () => {
    try {
      if (newStock.newAddition) {
        newStock.stuffId = null;
      }
      if (isNaN(newStock.amount)) return;
      if (newStock.price === null || isNaN(newStock.price)) return;

      if (newStock.buyAmount !== null && isNaN(newStock.buyAmount)) {
        newStock.buyAmount = null;
      }
      newStock.shop = newStock.shop || null;

      console.log(newStock)

      // 購入日と消費・賞味期限の整合性チェック
      if (newStock.expDate !== null) {
        const buy = new Date(newStock.buyDate);
        const exp = new Date(newStock.expDate);
        // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
        const buyDateOnly = new Date(buy);
        buyDateOnly.setHours(0, 0, 0, 0);
        const expDateOnly = new Date(exp);
        expDateOnly.setHours(0, 0, 0, 0);

        // console.log("新規作成buy:", buy);
        // console.log("新規作成exp:", exp);
        // console.log("新規作成buyDateOnly:", buyDateOnly);
        // console.log("新規作成expDateOnly:", expDateOnly);

        if (buyDateOnly.getTime() > expDateOnly.getTime()) {
          // alert("購入日は消費・賞味期限より前の日付を設定してください。");
          showErrorMessage('購入日は消費・賞味期限より前の日付を設定してください．');
          return;
        }
      }

      const today = new Date().toISOString().substring(0, 10);

      const updatedStock = { ...newStock, lastUpdate: today }; // lastUpdate に today を設定
      console.log("送信するデータ:", updatedStock); // 送信前のデータを確認
      await stockApi.addStock(updatedStock); // 修正したオブジェクトを API に送信


      // await stockApi.addStock(newStock);
      setIsAddOpen(false); // ダイアログを閉じる
      setNewStock(EMPTY_STOCK); // 入力内容をリセット
      fetchStocks(); // 作成後のタスク一覧を再取得
    } catch (error) {
      console.error(`${STOCK_ERRORS.CREATE_FAILED}:`, error);
      showErrorMessage(STOCK_ERRORS.CREATE_FAILED);
    }
  };

  /**
   * 在庫リストを編集するハンドラー
   */
  const handleUpdateStock = async (request: StockUpdateRequest) => {
    try {
      await stockApi.updateStock(request);
      fetchStocks(); // 削除後の買うもの一覧を再取得
    } catch (error) {
      console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error);
      showErrorMessage(STOCK_ERRORS.UPDATE_FAILED);
    }
  };

  /**
     * 在庫を削除するハンドラー
     * 指定されたIDのタスクをAPIを通じて削除
     */
  const handleDeleteStock = async (stockId: number) => {
    try {
      await stockApi.deleteStock(stockId);
      fetchStocks(); // 削除後の買うもの一覧を再取得
    } catch (error) {
      console.error(`${STOCK_ERRORS.DELETE_FAILED}:`, error);
      showErrorMessage(STOCK_ERRORS.DELETE_FAILED);
    }
  };

  /**
   * カテゴリー選択
   */
  const onChangeCategory = async (category: string) => {
    setNewStock({ ...newStock, category })
    const result = await stuffApi.getStuffs(category)
    setStuffs(result)
  }

  /**
   * 文字列(ISO 8601形式)をyyyy/MM/ddに変換する関数
   */
  const formatDate = (isoString: string): string => {
    const date = new Date(isoString);
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月は0始まりなので+1
    const day = date.getDate().toString().padStart(2, "0");
    return `${year}/${month}/${day}`;
  };
  /* Date型をyyyy/MM/ddに変換する関数
  const formatDate = (date: Date): string => {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月は0始まりなので+1
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}/${month}/${day}`;
  };
  */

  /** 追加ボタンを押したときにダイアログを開く */
  const handleOpenAdd = () => {
    setIsAddOpen(true);
  };
  /** 追加ダイアログを閉じる */
  const handleCloseAdd = () => {
    setIsAddOpen(false);
  };

  /**
   * セルを選択して編集画面
   */
  const handleRowClick = (stock: Stock) => {
    setSelectedRow(stock);           // 行選択
    setEditStock({ ...stock });      // 編集対象にセット
    setIsEditOpen(true);             // 編集ダイアログを開く
  };

  // 変更を適用. 数量に0を入力したとき、削除ダイアログに飛ぶ機能を追加
  const handleApplyChanges = async () => {
    if (!editStock) return;

    const { stockId, amount, buyAmount, price, shop, buyDate, expDate, lastUpdate } = editStock;
    if (expDate !== null) {
      // 購入日が消費・賞味期限より未来の場合はエラー表示
      const buy = new Date(buyDate);
      const exp = new Date(expDate);
      // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
      const buyDateOnly = new Date(buy);
      buyDateOnly.setHours(0, 0, 0, 0);
      const expDateOnly = new Date(exp);
      expDateOnly.setHours(0, 0, 0, 0);
      // console.log("編集buy:", buy);
      // console.log("編集exp:", exp);
      // console.log("編集buyDateOnly:", buyDateOnly);
      // console.log("編集expDateOnly:", expDateOnly);

      if (buy > exp) {
        // alert("購入日は消費・賞味期限より前の日付を設定してください。");
        showErrorMessage('購入日は消費・賞味期限より前の日付を設定してください．');
        return;
      }
    }

    try {
      // Number型に変換した変数を用意
      const numericAmount = Number(amount);
      const numericBuyAmount = Number(buyAmount);
      const numericPrice = Number(price);

      if (numericAmount === 0) {
        // 数量が 0 の場合は削除処理へ誘導
        // setIsEditOpen(false);         // 編集ダイアログを閉じる
        setSelectedRow(editStock);    // 削除対象をセット
        setIsDeleteOpen(true);        // 削除ダイアログを開く
        return;
      }
      if (!numericAmount || !numericBuyAmount) {
        showErrorMessage(GENERAL_ERRORS.INVALID_AMOUNT);
        return;
      }
      if (!numericPrice) {
        showErrorMessage(GENERAL_ERRORS.INVALID_PRICE);
        return;
      }

      const lastUpdate = new Date().toISOString().substring(0, 10);

      const updateRequest = {
        stockId,
        amount,
        buyAmount,
        price,
        shop,
        buyDate,
        expDate,
        lastUpdate,
      }

      console.log('updateRequest:', updateRequest);

      await handleUpdateStock(updateRequest);

      setSelectedRow(editStock); // 更新後に選択行を反映
      fetchStocks();             // 最新データを取得
      setSelectedRow(null);      // 選択解除
    } catch (error) {
      console.error(`${STOCK_ERRORS.UPDATE_FAILED}:`, error);
      showErrorMessage(STOCK_ERRORS.UPDATE_FAILED);
    }

    setIsEditOpen(false); // 編集ダイアログを閉じる
  };

  // ダイアログを開く際に `selectedRow` の値を `editStock` にコピー
  useEffect(() => {
    if (selectedRow) {
      setEditStock({ ...selectedRow });
    }
  }, [selectedRow]); // `selectedRow` が変更されたら `editStock` に反映

  // テキストフィールドの変更を検知
  // 負の値を入力できないように書き換え
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;

    // 数値項目に対して負の値をブロック
    const numericFields = ['amount', 'buyAmount', 'price'];
    const numericValue = Number(value);
    const isNumericField = numericFields.includes(name);
    if (isNumericField && numericValue < 0) {
      return; // 無視して更新しない
    }

    if (editStock) {
      setEditStock({
        ...editStock,
        [name]: value,
      });
    }
  };

  /** 編集ダイアログを閉じる */
  const handleCloseEdit = () => {
    setIsEditOpen(false);
    setSelectedRow(null);
  };

  /** 削除ボタンを押したときにダイアログを開く */
  const handleOpenDelete = () => {
    if (selectedRow) {
      setIsDeleteOpen(true);
    } else {
      // showWarningMessage("削除する食材を選択してください。");
      showErrorMessage('削除する食材を選択してください．');
    }
  };
  /** 削除ダイアログを閉じる */
  const handleCloseDelete = () => {
    setIsDeleteOpen(false);
  };

  /** テーブルを表示する関数 */
  const StockTable = (stocks: Stock[], categories: string[]) => {
    const filteredStocks = stocks.filter(stock => categories.includes(stock.category));

    if (filteredStocks.length === 0) return null;

    return (
      <>
        <TableContainer component={Paper}>
          <Table>
            <TableHead sx={{ backgroundColor: "#dcdcdc", color: "#333" }}>
              <TableRow>
                <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>食材名</TableCell>
                <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>数量</TableCell>
                <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>消費・賞味期限</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {filteredStocks.map(stock => {
                let daysLeft = null;

                if (stock.expDate !== null) {
                  const today = new Date();
                  const expDate = new Date(stock.expDate);
                  // 時間をリセットして純粋な“日付のみ”のタイムスタンプを取得
                  const todayDateOnly = new Date(today);
                  todayDateOnly.setHours(0, 0, 0, 0);
                  const expDateOnly = new Date(expDate);
                  expDateOnly.setHours(0, 0, 0, 0);
                  const timeDiff = expDateOnly.getTime() - todayDateOnly.getTime();
                  daysLeft = Math.ceil(timeDiff / (1000 * 60 * 60 * 24));

                  // console.log("テーブルtoday:", today);
                  // console.log("テーブルexp:", expDate);
                  // console.log("テーブルtodayDateOnly:", todayDateOnly);
                  // console.log("テーブルexpDateOnly:", expDateOnly);
                  // console.log("日数差:", daysLeft);
                }

                return (
                  <TableRow
                    key={stock.stockId}
                    onClick={() => handleRowClick(stock)}
                    style={{ backgroundColor: selectedRow?.stockId === stock.stockId ? "yellow" : "white", cursor: "pointer" }}
                  >
                    <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}>{stock.stuffName}</TableCell>
                    <TableCell align="center" sx={{ width: '20%', fontSize: '16px' }}>{stock.amount}</TableCell>
                    <TableCell align="center" sx={{ width: '40%', fontSize: '16px' }}
                      style={daysLeft !== null && daysLeft <= 3 ? { color: "red", fontWeight: "bold" } : {}}
                    >
                      {stock.expDate && formatDate(stock.expDate)}
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>

        {/* 編集ダイアログ */}
        <Dialog open={isEditOpen} onClose={handleCloseEdit} fullWidth maxWidth="sm">
          <DialogTitle>
            <Typography variant="h5" >
              在庫の編集
            </Typography>
          </DialogTitle>
          <DialogContent>
            {editStock && (
              <>

                {/* 材料の詳細 */}
                <Typography variant="h4">【{editStock.stuffName}】</Typography>

                {/* 現在の数量フィールド */}
                <TextField
                  label="現在の数量"
                  fullWidth
                  margin="normal"
                  name="amount"
                  type="number"
                  value={editStock.amount}
                  onChange={handleChange}
                  inputProps={{ min: 0 }}
                  onKeyDown={(e) => {
                    if (e.key === '-' || e.key === 'e' || e.key === 'E') {
                      e.preventDefault();
                    }
                  }}
                />

                {/* 購入時数量フィールド */}
                <TextField
                  label="購入時の数量"
                  fullWidth
                  margin="normal"
                  name="buyAmount"
                  type="number"
                  value={editStock.buyAmount}
                  onChange={handleChange}
                  inputProps={{ min: 0 }}
                  onKeyDown={(e) => {
                    if (e.key === '-' || e.key === 'e' || e.key === 'E') {
                      e.preventDefault();
                    }
                  }}
                />

                {/* 購入価格フィールド */}
                <TextField
                  label="購入価格"
                  fullWidth
                  margin="normal"
                  name="price"
                  type="number"
                  value={editStock.price}
                  onChange={handleChange}
                  inputProps={{ min: 0 }}
                  onKeyDown={(e) => {
                    if (e.key === '-' || e.key === 'e' || e.key === 'E') {
                      e.preventDefault();
                    }
                  }}
                />

                {/* 購入店舗フィールド */}
                <TextField
                  label="購入店舗"
                  fullWidth
                  margin="normal"
                  name="shop"
                  type="text"
                  value={editStock.shop}
                  onChange={handleChange}
                />

                {/* 購入日・賞味期限入力 */}
                <BuyExpDateSelect newStock={editStock} setNewStock={({ buyDate, expDate }) => setEditStock({ ...editStock, buyDate, expDate })} />

                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
                  <Button onClick={() => { setIsEditOpen(false); setSelectedRow(null); }}>
                    キャンセル
                  </Button>
                  <Button variant="contained" color="success" onClick={handleApplyChanges} sx={{ mt: 3, mb: 2 }}>
                    変更を適用
                  </Button>
                  <Button variant="contained" color="error" onClick={handleOpenDelete} sx={{ mt: 3, mb: 2 }}>削除</Button>
                </Box>
              </>
            )}
          </DialogContent>
        </Dialog>

        {/* 削除ダイアログ */}
        <Dialog open={isDeleteOpen}
          onClose={handleCloseDelete}
          fullWidth
          maxWidth="sm"
          sx={{ overflow: "hidden" }}
        >
          <DialogTitle>
            <Typography variant="h5" >
              食材の削除
            </Typography>
          </DialogTitle>
          <DialogContent>
            {selectedRow && (
              <>
                <Typography variant="h4">【{selectedRow.stuffName}】を削除します。</Typography>
                <Typography variant="body1" color="error">⚠️ 注意: 削除すると復元できません。</Typography>

                <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, mt: 3, mb: 2 }}>
                  <Button onClick={() => {
                    setIsDeleteOpen(false);
                    // setSelectedRow(null);
                  }}>
                    キャンセル
                  </Button>
                  <Button
                    variant="contained"
                    color="error"
                    onClick={() => {
                      handleDeleteStock(selectedRow.stockId);
                      setIsDeleteOpen(false);
                      setSelectedRow(null);
                      setIsEditOpen(false);
                    }}
                  >
                    削除
                  </Button>
                </Box>
              </>
            )}
          </DialogContent>
        </Dialog>
      </>
    );
  };

  return (
    <Container>
      <Typography variant="h3" component="h1" sx={{ mb: 4 }} >
        在庫リスト
      </Typography>

      <Box
        sx={{
          position: 'fixed',     // ← sticky から fixed に変更
          bottom: 55,             // ← 下に固定
          left: 0,
          right: 0,
          zIndex: 1300,          // ダイアログよりは低く
          backgroundColor: '#f5f5f5',
          // backgroundColor: 'white',
          // padding: 2,
          px: 2,
          py: 1,
          display: 'flex',
          justifyContent: 'flex-end', // ← 左寄せ
          boxShadow: 'none', // 軽めの上向きシャドウ
        }}
      >

        {/* 在庫の食材追加ボタン */}
        <Box sx={{
          display: 'flex', flexDirection: 'column', alignItems: 'flex-end',
          mr: 2
        }}>
          <Typography variant="caption" color="textSecondary">
            食材の追加
          </Typography>
          <Fab color="primary" onClick={handleOpenAdd} >
            <AddIcon />
          </Fab>
        </Box>

        {/* 新規タスク作成ダイアログ */}
        <Dialog open={isAddOpen} onClose={handleCloseAdd} disableScrollLock={true}>
          <Box display="flex" alignItems="center" >
            <DialogTitle sx={{ flexGrow: 1 }}>
              <Typography variant="h5" >
                在庫に食材を追加
              </Typography>
            </DialogTitle>
            <FormGroup row>
              <FormControlLabel
                control={<Checkbox />}
                label="食材を新規追加"
                checked={newStock.newAddition}
                onChange={(e) => setNewStock({ ...newStock, newAddition: (e.target as HTMLInputElement).checked })}
              />
            </FormGroup>
          </Box>
          <DialogContent>
            <Box sx={{ pt: 1 }}>
              {/*材料カテゴリ選択 */}

              <FormControl sx={{ width: "50%", marginBottom: 2 }}>
                <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
                <Select
                  labelId="demo-simple-select-label"
                  value={newStock.category}
                  onChange={(e) => onChangeCategory(e.target.value)}
                >
                  <MenuItem value="乳製品">乳製品</MenuItem>
                  <MenuItem value="魚・肉">魚・肉</MenuItem>
                  <MenuItem value="野菜">野菜</MenuItem>
                  <MenuItem value="調味料">調味料</MenuItem>
                  <MenuItem value="その他">その他</MenuItem>
                </Select>
              </FormControl>

              {!newStock.newAddition && <FormControl sx={{ width: "100%", marginBottom: 2 }}>
                <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
                <Select
                  labelId="demo-simple-select-label"
                  value={newStock.stuffId}
                  onChange={(e) => setNewStock({ ...newStock, stuffId: Number(e.target.value) })}
                >
                  {stuffs.map((stuff) => (
                    <MenuItem key={stuff.stuffId} value={stuff.stuffId}>
                      {stuff.stuffName}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>}

              {/* タスクタイトル入力フィールド */}
              {newStock.newAddition && <TextField
                autoFocus
                margin="dense"
                label="材料名"
                fullWidth
                value={newStock.stuffName}
                onChange={(e) => setNewStock({ ...newStock, stuffName: e.target.value })}
                sx={{ marginBottom: 2 }}
              />}
              {/* 現在の数量入力フィールド */}
              <TextField
                margin="dense"
                label="現在の数量"
                fullWidth
                value={newStock.amount}
                onChange={(e) => {
                  const value = e.target.value;
                  const parsedValue = parseInt(value, 10); // 数値に変換
                  if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
                    setNewStock({ ...newStock, amount: parsedValue }); // number型で保存
                  }
                }}
                // sx={{ width: "50%" }}
                type="number"
                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
              />
              {/* 購入時数量入力フィールド */}
              <TextField
                margin="dense"
                label="購入時の数量"
                fullWidth
                value={newStock.buyAmount}
                onChange={(e) => {
                  const value = e.target.value;
                  const parsedValue = parseInt(value, 10); // 数値に変換
                  if (isNaN(parsedValue) || parsedValue >= 1) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は1以上のみOK
                    setNewStock({ ...newStock, buyAmount: parsedValue }); // number型で保存
                  }
                }}
                // sx={{ width: "50%" }}
                type="number"
                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
              />
              {/* 購入価格入力フィールド */}
              <TextField
                margin="dense"
                label="購入価格"
                fullWidth
                value={newStock.price}
                onChange={(e) => {
                  const value = e.target.value;
                  const parsedValue = parseInt(value, 10); // 数値に変換
                  if (isNaN(parsedValue) || parsedValue >= 0) { // 入力欄をいったん空欄にできるようにする，ただし空欄でない場合は0以上のみOK
                    setNewStock({ ...newStock, price: parsedValue }); // number型で保存
                  }
                }}
                // sx={{ width: "50%" }}
                type="number"
                inputProps={{ inputMode: "numeric", pattern: "[0-9]*" }} // ここで整数のみ許可
              />
              {/* 購入店舗入力フィールド */}
              <TextField
                margin="dense"
                label="購入店舗"
                fullWidth
                value={newStock.shop}
                onChange={(e) => setNewStock({ ...newStock, shop: e.target.value })}
              />

              {/* 購入日・賞味期限入力 */}
              <BuyExpDateSelect newStock={newStock} setNewStock={({ buyDate, expDate }) => setNewStock({ ...newStock, buyDate, expDate })} />

            </Box>
          </DialogContent>
          <DialogActions>
            <Button onClick={() => setIsAddOpen(false)}>キャンセル</Button>
            <Button onClick={handleCreateStock} variant="contained">
              追加
            </Button>
          </DialogActions>
        </Dialog>
      </Box>

      {/* 在庫一覧リスト */}
      {/* 乳製品 */}
      <Typography variant="h4" component="h1" gutterBottom>乳製品</Typography>
      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
        {StockTable(stocks, ["乳製品"])}
      </div>

      {/* 肉・魚 */}
      <Typography variant="h4" component="h1" gutterBottom>魚・肉</Typography>
      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
        {StockTable(stocks, ["魚・肉"])}
      </div>

      {/* 野菜 */}
      <Typography variant="h4" component="h1" gutterBottom>野菜</Typography>
      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
        {StockTable(stocks, ["野菜"])}
      </div>

      {/* 調味料 */}
      <Typography variant="h4" component="h1" gutterBottom>調味料</Typography>
      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
        {StockTable(stocks, ["調味料"])}
      </div>

      {/* その他 */}
      <Typography variant="h4" component="h1" gutterBottom>その他</Typography>
      <div style={{ border: '3px solid black', borderRadius: '8px', backgroundColor: '#add8e6', height: 'auto', padding: '20px', marginBottom: "20px" }}>
        {StockTable(stocks, ["その他"])}
      </div>
      <Box sx={{ height: '80px' }} /> {/* フッターの高さと同じくらいに調整 */}
    </Container>
  );
};

export default StockPage;