<style>
  .highlight {
      background-color: yellow;
  }

  .goal-highlight {
      background-color: lightblue;
  }

  .both-highlight {
      background-color: red;
  }
</style>

<h1>オフラインカレンダー</h1>
<div>
  <label for="dateInput">設定日:</label>
  <input type="date" id="dateInput">
  <label for="timeInput">設定時間:</label>
  <input type="time" id="timeInput">
  <button id="setDateTimeButton">変更</button>
</div>
<p id="setDate">[設定した年月日]</p>
<p id="setTime">[設定した時間]</p>
<p id="currentDate">[設定からの年月日]</p>
<p id="currentTime">[設定からの時間]</p>
<div>
  <label for="goalDateInput">目標日付:</label>
  <input type="date" id="goalDateInput">
  <label for="goalTimeInput">目標時間:</label>
  <input type="time" id="goalTimeInput">
  <button id="setGoalButton">目標設定</button>
</div>
<p id="goalDate">[目標の日付]</p>
<p id="goalTime">[目標の時間]</p>
<p id="remainingTime">[目標までの残り日時間]</p>
<div class="calendar-container">
  <table border="1">
      <thead>
          <tr>
              <th>日</th>
              <th>月</th>
              <th>火</th>
              <th>水</th>
              <th>木</th>
              <th>金</th>
              <th>土</th>
          </tr>
      </thead>
      <tbody id="calendarBody"></tbody>
  </table>
</div>
<p id="message"></p>
<script>
  let selectedDateTime = null;
  let goalDateTime = null;
  let isPastGoalError = false; // フラグを追加
  let currentYear = null;
  let currentMonth = null;

  document.getElementById("setDateTimeButton").addEventListener("click", function() {
      const dateValue = document.getElementById("dateInput").value;
      const timeValue = document.getElementById("timeInput").value;

      if (!dateValue || !timeValue) {
          document.getElementById("message").textContent = "日付と時間を設定してください。";
          return;
      }

      // タイムゾーンを考慮しないDateオブジェクトを作成
      const [year, month, day] = dateValue.split('-').map(Number);
      const [hours, minutes] = timeValue.split(':').map(Number);
      selectedDateTime = new Date(year, month - 1, day, hours, minutes, 0);

      document.getElementById("setDate").textContent = "[設定した年月日] " + dateValue;
      document.getElementById("setTime").textContent = "[設定した時間] " + timeValue;
      document.getElementById("currentDate").textContent = "[設定からの年月日] " + dateValue;
      document.getElementById("currentTime").textContent = "[設定からの時間] " + timeValue;
      document.getElementById("message").textContent = "";
      goalDateTime = null;
      isPastGoalError = false; // フラグをリセット
      currentYear = selectedDateTime.getFullYear();
      currentMonth = selectedDateTime.getMonth();
      generateCalendar(currentYear, currentMonth);
  });

  document.getElementById("setGoalButton").addEventListener("click", function() {
      const goalDateValue = document.getElementById("goalDateInput").value;
      const goalTimeValue = document.getElementById("goalTimeInput").value;

      if (!goalDateValue || !goalTimeValue) {
          document.getElementById("message").textContent = "目標の日付と時間を設定してください。";
          return;
      }

      // タイムゾーンを考慮しないDateオブジェクトを作成
      const [year, month, day] = goalDateValue.split('-').map(Number);
      const [hours, minutes] = goalTimeValue.split(':').map(Number);
      goalDateTime = new Date(year, month - 1, day, hours, minutes, 0);

      if (!selectedDateTime) {
          document.getElementById("message").textContent = "設定日を入れてください。";
          return;
      }

      if (selectedDateTime && goalDateTime < selectedDateTime) {
          document.getElementById("message").textContent = "過去の目標時間は設定できません。";
          isPastGoalError = true; // フラグを設定
          return;
      }

      document.getElementById("goalDate").textContent = "[目標の日付] " + goalDateValue;
      document.getElementById("goalTime").textContent = "[目標の時間] " + goalTimeValue;
      document.getElementById("message").textContent = "";
      isPastGoalError = false; // フラグをリセット
      generateCalendar(currentYear, currentMonth);
  });

  function generateCalendar(year, month) {
      const calendarBody = document.getElementById("calendarBody");
      calendarBody.innerHTML = "";
      const firstDay = new Date(year, month, 1).getDay();
      const lastDate = new Date(year, month + 1, 0).getDate();
      let date = 1;
      for (let i = 0; i < 6; i++) {
          let row = document.createElement("tr");
          for (let j = 0; j < 7; j++) {
              let cell = document.createElement("td");
              if (i === 0 && j < firstDay) {
                  row.appendChild(cell);
              } else if (date > lastDate) {
                  row.appendChild(cell);
              } else {
                  cell.textContent = date;
                  // タイムゾーンを考慮しないDateオブジェクトを作成して比較
                  const currentDate = new Date(year, month, date);
                  const selectedDateOnly = selectedDateTime ? new Date(selectedDateTime.getFullYear(), selectedDateTime.getMonth(), selectedDateTime.getDate()) : null;
                  const goalDateOnly = goalDateTime ? new Date(goalDateTime.getFullYear(), goalDateTime.getMonth(), goalDateTime.getDate()) : null;

                  cell.className = "";
                  if (selectedDateOnly && currentDate.toDateString() === selectedDateOnly.toDateString()) {
                      cell.classList.add("highlight");
                  }
                  if (goalDateOnly && currentDate.toDateString() === goalDateOnly.toDateString()) {
                      cell.classList.add("goal-highlight");
                  }
                  if (selectedDateOnly && goalDateOnly && currentDate.toDateString() === selectedDateOnly.toDateString() && currentDate.toDateString() === goalDateOnly.toDateString()) {
                      cell.classList.add("both-highlight");
                  }
                  row.appendChild(cell);
                  date++;
              }
          }
          calendarBody.appendChild(row);
          if (date > lastDate) break;
      }
  }

  setInterval(() => {
      if (selectedDateTime && !isPastGoalError) { // フラグをチェック
          selectedDateTime.setSeconds(selectedDateTime.getSeconds() + 1);

          // 日付が変わったときの処理を修正
          const currentDateText = `${selectedDateTime.getFullYear()}-${String(selectedDateTime.getMonth() + 1).padStart(2, '0')}-${String(selectedDateTime.getDate()).padStart(2, '0')}`;
          const currentTimeText = `${String(selectedDateTime.getHours()).padStart(2, '0')}:${String(selectedDateTime.getMinutes()).padStart(2, '0')}:${String(selectedDateTime.getSeconds()).padStart(2, '0')}`;
          document.getElementById("currentDate").textContent = "[設定からの年月日] " + currentDateText;
          document.getElementById("currentTime").textContent = "[設定からの時間] " + currentTimeText;

          // 日付が変わったかチェック
          if (selectedDateTime.getFullYear() !== currentYear || selectedDateTime.getMonth() !== currentMonth) {
              currentYear = selectedDateTime.getFullYear();
              currentMonth = selectedDateTime.getMonth();
              generateCalendar(currentYear, currentMonth);
          }

          // 目標までの残り時間を計算して表示
          if (goalDateTime) {
              const remainingTime = goalDateTime.getTime() - selectedDateTime.getTime();
              if (remainingTime > 0) {
                  const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
                  const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                  const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
                  const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);

                  document.getElementById("remainingTime").textContent = "[目標までの残り日時間] " + days + "日 " + String(hours).padStart(2, '0') + "時間 " + String(minutes).padStart(2, '0') + "分 " + String(seconds).padStart(2, '0') + "秒";

              } else {
                  document.getElementById("remainingTime").textContent = "[目標までの残り日時間] 0日 00時間 00分 00秒";
                  document.getElementById("message").textContent = "目標時間になりました！";
              }
          } else {
              document.getElementById("remainingTime").textContent = "[目標までの残り日時間] --日 --時間 --分 --秒";
          }
      }
  }, 1000);
</script>

const lastDate = new Date(year, month + 1, 0).getDate();