import { For, Show, createSignal, onMount } from "solid-js";

import { SURVEY_RUNNABLES } from "../survey-runnables";
import { getRelevantRunnables } from "../util";
import {
  scrollToFirstRequiredQuestion,
  submitCheckAndSaveWork,
  submitSaveWork,
} from "../util/survey-utils/actions";
import { getProjectTitle } from "../util/survey-utils/page-info";
import { TSurveyRunnable } from "../util/types";
import mainStylesheet from "./FloatingActionBar.css?inline";

// Checks whether `dateString` (eg. "8/7/2025") falls within the current calendar week
// (Sunday-Saturday), used to warn if the survey's service date looks stale.
function isDateWithinThisWeek(dateString: string): boolean {
  const date = new Date(dateString);
  const now = new Date();

  const startOfWeek = new Date(now);
  startOfWeek.setDate(now.getDate() - now.getDay());
  startOfWeek.setHours(0, 0, 0, 0);

  const endOfWeek = new Date(now);
  endOfWeek.setDate(now.getDate() + (6 - now.getDay()));
  endOfWeek.setHours(23, 59, 59, 999);

  return date >= startOfWeek && date <= endOfWeek;
}

export function FloatingActionBar() {
  const [isCurrentlyRunning, setIsCurrentlyRunning] = createSignal(false);
  const [isRunError, setIsRunError] = createSignal(false);
  const [errorMessages, setErrorMessages] = createSignal<string[]>([]);

  const surveyRunnables = getRelevantRunnables(SURVEY_RUNNABLES, getProjectTitle());
  const mountedRunnableNames = new Set<string>();

  function handleRunnableClick(runnable: TSurveyRunnable) {
    console.clear();

    if (mountedRunnableNames.has(runnable.runnableName) && runnable.reMountRequest) {
      console.log(`Runnable '${runnable.runnableName}' already mounted. Requesting re-mount.`);
      runnable.reMountRequest();
      return;
    }

    console.log(`Runnable clicked: ${runnable.runnableName}`);

    setIsCurrentlyRunning(true);
    setIsRunError(false);

    runnable
      .callback(runnable.kwargs)
      .then(() => {
        console.log(`Runnable '${runnable.runnableName}' executed successfully.`);
        mountedRunnableNames.add(runnable.runnableName);
        setIsRunError(false);
      })
      .catch((error) => {
        console.error(`Error executing runnable '${runnable.runnableName}':`, error);
        setIsRunError(true);
        setErrorMessages((prev) => [
          ...prev,
          error instanceof Error ? error.message : String(error),
        ]);
      })
      .finally(() => {
        setIsCurrentlyRunning(false);
      });
  }

  onMount(() => {
    const serviceDateElement = document.querySelector<HTMLElement>("#timeDisplayData > tr > td");
    if (serviceDateElement === null) {
      console.error("Service date element not found.");
      setErrorMessages((prev) => [...prev, "Service date element not found."]);
      return;
    }

    if (!isDateWithinThisWeek(serviceDateElement.innerText.trim())) {
      setErrorMessages((prev) => [...prev, "Service date must be within this week."]);
    }
  });

  return (
    <div id="mm-actions" style={"max-width: 230px; width: 230px;"}>
      <style>{mainStylesheet}</style>
      <h1 id="mm-actions-header">Quick Actions</h1>
      <div id="mm-action-status-info" classList={{ "visually-hidden": !isCurrentlyRunning() }}>
        Running...
      </div>
      <div id="mm-action-status-alert">
        <Show when={isRunError()}>
          <p class="mm-action-status-error">
            Error running action. Please check console for details.
          </p>
        </Show>
        <For each={errorMessages()}>
          {(message) => <p class="mm-action-status-error">{message}</p>}
        </For>
      </div>
      <button class="mm-btn" onclick={submitSaveWork} style="background: #888f95">
        Save Work
      </button>
      <button class="mm-btn" onclick={submitCheckAndSaveWork} style="background: #888f95">
        Check Answers and Save
      </button>
      <hr style="width: 100%;" />
      <button class="mm-btn" onclick={scrollToFirstRequiredQuestion} style="background: #db4747d4;">
        Find * Required warnings
      </button>

      <Show when={surveyRunnables.length !== 0}>
        <hr style="width: 100%;" />
        <For each={surveyRunnables}>
          {(runnable) => (
            <button class="mm-btn" onclick={() => handleRunnableClick(runnable)}>
              {runnable.runnableName}
            </button>
          )}
        </For>
      </Show>
    </div>
  );
}