CRUD一覧画面（追加・編集・削除）

/* ===== CRUD一覧画面 — style.css ===== */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --color-primary: #2B7FE8;
  --color-danger:  #D64545;
  --color-text:    #1E293B;
  --color-muted:   #64748B;
  --color-border:  #D0D7E0;
  --color-bg:      #F4F6F9;
  --color-card:    #FFFFFF;
  --color-th-bg:   #F1F5F9;
}

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

/* ===== 画面レイアウト ===== */
.crud-screen {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.screen-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.screen-title {
  font-size: 22px;
  margin: 0;
}

.demo-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-muted);
}

.result-count {
  margin: 16px 0 8px;
  font-size: 13px;
  color: var(--color-muted);
}

/* ===== テーブル一覧 ===== */
/* スマホ幅では横スクロールで対応する */
.table-wrapper {
  overflow-x: auto;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.data-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #E6EBF1;
}

.data-table thead th {
  background: var(--color-th-bg);
  font-size: 13px;
  color: var(--color-muted);
  white-space: nowrap;
}

.data-table tbody tr:last-child td { border-bottom: none; }

/* ===== 行操作ボタン（編集・削除） ===== */
.row-actions {
  white-space: nowrap;
}

.row-actions button {
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  background: var(--color-card);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.btn-row-edit {
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  margin-right: 8px;
}

.btn-row-edit:hover {
  background: var(--color-primary);
  color: #fff;
}

/* 削除は赤系アウトライン（確認ダイアログ側だけ塗りにする） */
.btn-danger-outline {
  color: var(--color-danger);
  border: 1.5px solid var(--color-danger);
}

.btn-danger-outline:hover {
  background: var(--color-danger);
  color: #fff;
}

/* ===== 空状態（0件のとき表示） ===== */
.empty-state {
  padding: 48px 20px;
  text-align: center;
  background: var(--color-card);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
}

.empty-message {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--color-muted);
}

/* ===== ボタン共通 ===== */
.btn-primary,
.btn-secondary,
.btn-danger {
  padding: 10px 20px;
  font-size: 14px;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.btn-primary {
  color: #fff;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn-primary:hover { background: #1D6AD0; }

.btn-secondary {
  color: var(--color-muted);
  background: var(--color-card);
  border: 1.5px solid var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg);
  border-color: #9AA5B4;
}

/* 削除確認のOKボタンは赤の塗り（誤操作防止のためここだけ強調） */
.btn-danger {
  color: #fff;
  background: var(--color-danger);
  border: 1.5px solid var(--color-danger);
}

.btn-danger:hover { background: #B93838; }

/* ===== モーダル（追加・編集／削除確認で共通） ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  animation: fade-in 0.15s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  position: relative;
  width: calc(100% - 48px);
  max-width: 420px;
  padding: 24px 24px 20px;
  background: var(--color-card);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-title {
  margin: 0 0 18px;
  font-size: 17px;
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  font-size: 20px;
  line-height: 1;
  color: var(--color-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.modal-close-btn:hover { background: var(--color-bg); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.confirm-message {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
}

/* ===== フォームフィールド ===== */
.form-field {
  margin-bottom: 16px;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.required-mark { color: var(--color-danger); }

.form-field input[type="text"],
.form-field select {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.form-field input:focus-visible,
.form-field select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}

/* バリデーションエラー時は入力枠を赤くする */
.form-field .is-invalid { border-color: var(--color-danger); }

.field-error {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-danger);
}

/* ===== トースト ===== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  padding: 12px 20px;
  font-size: 14px;
  color: #fff;
  background: #1E293B;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  animation: toast-in 0.2s ease;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* hidden 属性を確実に効かせる（display 指定との競合対策） */
.crud-screen [hidden] { display: none !important; }

/* ===== レスポンシブ（768px以下） ===== */
@media (max-width: 768px) {
  .screen-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* =====================================================
   CRUD一覧画面のスクリプト

   仕組み：データ配列 items を唯一の情報源にし、追加・更新・
   削除はすべて「配列を書き換える → render() で全再描画」の
   流れに統一する（件数表示・空状態との食い違いを防ぐ）。

   追加と編集はモーダルフォームを1つ共用し、editingId が
   null なら追加・IDが入っていれば編集として保存する。
   行の生成は createElement + textContent（XSS対策）。
   ===================================================== */

// ===== 設定値 =====
var NAME_MAX_LENGTH   = 50;   // 名前の最大文字数
var TOAST_DURATION_MS = 3000; // トーストの表示時間

// ===== サンプルデータ（8件） =====
var items = [
  { id: 1, name: 'サンプルアイテムA', category: 'タイプ1', updatedAt: '2026-06-01' },
  { id: 2, name: 'サンプルアイテムB', category: 'タイプ2', updatedAt: '2026-05-28' },
  { id: 3, name: 'サンプルアイテムC', category: 'タイプ3', updatedAt: '2026-05-25' },
  { id: 4, name: 'サンプルアイテムD', category: 'タイプ1', updatedAt: '2026-05-20' },
  { id: 5, name: 'サンプルアイテムE', category: 'タイプ2', updatedAt: '2026-05-18' },
  { id: 6, name: 'サンプルアイテムF', category: 'タイプ1', updatedAt: '2026-05-12' },
  { id: 7, name: 'サンプルアイテムG', category: 'タイプ3', updatedAt: '2026-05-08' },
  { id: 8, name: 'サンプルアイテムH', category: 'タイプ2', updatedAt: '2026-05-02' }
];

// ===== DOM要素 =====
var addBtn       = document.getElementById('addBtn');
var emptyAddBtn  = document.getElementById('emptyAddBtn');
var resultCount  = document.getElementById('resultCount');
var tableWrapper = document.getElementById('tableWrapper');
var tableBody    = document.getElementById('tableBody');
var emptyState   = document.getElementById('emptyState');

var formOverlay    = document.getElementById('formOverlay');
var formTitle      = document.getElementById('formTitle');
var formCloseBtn   = document.getElementById('formCloseBtn');
var nameInput      = document.getElementById('nameInput');
var nameError      = document.getElementById('nameError');
var categorySelect = document.getElementById('categorySelect');
var categoryError  = document.getElementById('categoryError');
var formCancelBtn  = document.getElementById('formCancelBtn');
var formSaveBtn    = document.getElementById('formSaveBtn');

var confirmOverlay   = document.getElementById('confirmOverlay');
var confirmMessage   = document.getElementById('confirmMessage');
var confirmCancelBtn = document.getElementById('confirmCancelBtn');
var confirmOkBtn     = document.getElementById('confirmOkBtn');
var toastEl          = document.getElementById('toast');

// 編集中のレコードID（null のときは新規追加モード）
var editingId = null;

// 削除確認中のレコードID
var deleteTargetId = null;

// ===== 描画 =====
// items の内容をそのまま画面に反映する（件数・空状態もここで切り替え）
function render() {
  resultCount.textContent = '全' + items.length + '件';

  var isEmpty = (items.length === 0);
  tableWrapper.hidden = isEmpty;
  resultCount.hidden = isEmpty;
  emptyState.hidden = !isEmpty;

  tableBody.textContent = '';
  items.forEach(function (item) {
    tableBody.appendChild(createRow(item));
  });
}

// 1行分の tr を生成する
function createRow(item) {
  var tr = document.createElement('tr');
  tr.appendChild(createCell(item.id));
  tr.appendChild(createCell(item.name));
  tr.appendChild(createCell(item.category));
  tr.appendChild(createCell(item.updatedAt));

  var td = document.createElement('td');
  td.className = 'row-actions';
  td.appendChild(createActionButton('編集', 'btn-row-edit', function () { openForm(item.id); }));
  td.appendChild(createActionButton('削除', 'btn-danger-outline', function () { openConfirm(item); }));
  tr.appendChild(td);
  return tr;
}

// テキストセルを生成する
function createCell(text) {
  var td = document.createElement('td');
  td.textContent = text;
  return td;
}

// 行操作ボタン（編集・削除）を生成する
function createActionButton(label, className, onClick) {
  var button = document.createElement('button');
  button.type = 'button';
  button.className = className;
  button.textContent = label;
  button.addEventListener('click', onClick);
  return button;
}

// ===== 追加・編集モーダル（共用） =====
// 「＋ 新規追加」 → 空のフォームを「新規追加」タイトルで開く
addBtn.addEventListener('click', function () { openForm(null); });
emptyAddBtn.addEventListener('click', function () { openForm(null); });

// id が null なら新規追加、IDが入っていれば該当レコードの編集として開く
function openForm(id) {
  editingId = id;

  if (editingId === null) {
    formTitle.textContent = '新規追加';
    nameInput.value = '';
    categorySelect.value = '';
  } else {
    var item = findItem(editingId);
    formTitle.textContent = '編集';
    nameInput.value = item.name;
    categorySelect.value = item.category;
  }

  clearFormErrors();
  formOverlay.hidden = false;
  document.body.style.overflow = 'hidden'; // 背景のスクロールを止める
  nameInput.focus();
}

function closeForm() {
  formOverlay.hidden = true;
  document.body.style.overflow = '';
}

// 「保存する」 → バリデーション → editingId の有無で追加か更新かを切り替える
formSaveBtn.addEventListener('click', function () {
  if (!validateForm()) { return; } // エラーあり：モーダルは開いたまま

  if (editingId === null) {
    // 新規追加：IDは既存IDの最大値+1で採番（length+1 だと削除後に重複する）
    items.unshift({
      id: nextId(),
      name: nameInput.value.trim(),
      category: categorySelect.value,
      updatedAt: today()
    });
    showToast('追加しました');
  } else {
    var item = findItem(editingId);
    item.name = nameInput.value.trim();
    item.category = categorySelect.value;
    item.updatedAt = today();
    showToast('更新しました');
  }

  closeForm();
  render();
});

formCancelBtn.addEventListener('click', closeForm);
formCloseBtn.addEventListener('click', closeForm);

// ===== バリデーション =====
// 名前（必須・50文字以内）とカテゴリ（必須）を検証し、結果を true/false で返す
function validateForm() {
  clearFormErrors();
  var valid = true;

  if (nameInput.value.trim() === '') {
    showFieldError(nameInput, nameError, '名前を入力してください');
    valid = false;
  } else if (nameInput.value.length > NAME_MAX_LENGTH) {
    showFieldError(nameInput, nameError, NAME_MAX_LENGTH + '文字以内で入力してください');
    valid = false;
  }

  if (categorySelect.value === '') {
    showFieldError(categorySelect, categoryError, 'カテゴリを選択してください');
    valid = false;
  }

  return valid;
}

// フィールド直下にエラーを表示し、入力枠を赤くする
function showFieldError(input, errorEl, message) {
  input.classList.add('is-invalid');
  errorEl.textContent = message;
  errorEl.hidden = false;
}

// フォーム内のエラー表示をすべて消す
function clearFormErrors() {
  nameInput.classList.remove('is-invalid');
  categorySelect.classList.remove('is-invalid');
  nameError.hidden = true;
  categoryError.hidden = true;
}

// ===== 削除フロー =====
// 行の「削除」 → 対象名を明示した確認ダイアログを開く
function openConfirm(item) {
  deleteTargetId = item.id;
  confirmMessage.textContent = '『' + item.name + '』を削除しますか？この操作は取り消せません。';
  confirmOverlay.hidden = false;
  document.body.style.overflow = 'hidden';
  confirmCancelBtn.focus(); // 誤操作防止のため初期フォーカスはキャンセル側
}

function closeConfirm() {
  confirmOverlay.hidden = true;
  document.body.style.overflow = '';
  deleteTargetId = null;
}

// 「削除する」 → 配列から除去して再描画（0件になれば render() が空状態を出す）
confirmOkBtn.addEventListener('click', function () {
  items = items.filter(function (item) { return item.id !== deleteTargetId; });
  closeConfirm();
  render();
  showToast('削除しました');
});

confirmCancelBtn.addEventListener('click', closeConfirm);

// ===== モーダル共通の閉じる操作 =====
// オーバーレイ自体のクリックだけで閉じる（モーダル内クリックの貫通を防ぐ）
formOverlay.addEventListener('click', function (e) {
  if (e.target === formOverlay) { closeForm(); }
});

confirmOverlay.addEventListener('click', function (e) {
  if (e.target === confirmOverlay) { closeConfirm(); }
});

// ESCキー → 開いているモーダルを閉じる
document.addEventListener('keydown', function (e) {
  if (e.key !== 'Escape') { return; }
  if (!formOverlay.hidden) { closeForm(); }
  if (!confirmOverlay.hidden) { closeConfirm(); }
});

// ===== ヘルパー =====
// IDからレコードを探す
function findItem(id) {
  for (var i = 0; i < items.length; i++) {
    if (items[i].id === id) { return items[i]; }
  }
  return null;
}

// 新規IDを採番する（既存IDの最大値+1。配列が空でも 1 になる）
function nextId() {
  return items.reduce(function (max, item) { return Math.max(max, item.id); }, 0) + 1;
}

// 当日の日付を YYYY-MM-DD 形式で返す
function today() {
  var d = new Date();
  var month = String(d.getMonth() + 1).padStart(2, '0');
  var day = String(d.getDate()).padStart(2, '0');
  return d.getFullYear() + '-' + month + '-' + day;
}

// ===== トースト =====
var toastTimerId = null;

// 3秒で自動的に消える。連続表示のときはタイマーを張り直す
function showToast(message) {
  toastEl.textContent = message;
  toastEl.hidden = false;
  if (toastTimerId) { clearTimeout(toastTimerId); }
  toastTimerId = setTimeout(function () {
    toastEl.hidden = true;
    toastTimerId = null;
  }, TOAST_DURATION_MS);
}

// ===== 初期化 =====
render();