import { createUiBindings } from "./ui-runtime.js";

/* Deliberate, user-triggered illustration states. No timers or product connections. */
const focusCards = Object.freeze({
  all: {
    source: "Your task queue",
    icon: "i-layout",
    label: "Everything, together",
    count: "All tasks",
    title: "A clear view of your next steps",
    time: "Updated today",
    action: "View tasks",
  },
  approvals: {
    source: "Inbox",
    icon: "i-inbox",
    label: "Waiting on you",
    count: "13 approvals",
    title: "13 approvals ready for your review",
    time: "2 hrs ago",
    action: "View approvals",
  },
  connections: {
    source: "USAA Bank",
    icon: "i-sync",
    label: "Connection needs attention",
    count: "Connections",
    title: "Reconnect to see recent transactions",
    time: "Just now",
    action: "View connection",
  },
  agents: {
    source: "Bank Recommendations",
    icon: "i-spark",
    label: "Ready for review",
    count: "Agent runs",
    title: "Suggested matches, ready for a closer look",
    time: "2 days ago",
    action: "View run",
  },
});

const examples = Object.freeze([
  {
    status: "Pending review",
    source: "Bank Recommendations",
    title: "Run ready for review",
    action: "Review",
    outcome: "Waiting on you",
  },
  {
    status: "Reviewed",
    source: "Bank Recommendations",
    title: "Recommendations reviewed",
    action: "Next",
    outcome: "Review complete",
  },
  {
    status: "Pending review",
    source: "Daily activity",
    title: "Activity summary ready",
    action: "Review",
    outcome: "Waiting on you",
  },
  {
    status: "Reviewed",
    source: "Daily activity",
    title: "Activity summary reviewed",
    action: "Restart",
    outcome: "Review complete",
  },
]);

export function chooseFocus(key) {
  return { ...focusCards[Object.hasOwn(focusCards, key) ? key : "all"] };
}

export function advanceExample(step) {
  const next =
    Number.isInteger(step) && step >= 0 && step < examples.length
      ? (step + 1) % examples.length
      : 0;
  return { ...examples[next], step: next };
}

function fillText(root, selector, value) {
  const element = root.querySelector(selector);
  if (element) element.textContent = value;
}

function bindFocus(document, ui) {
  const section = document.getElementById("selector");
  if (!section) return;
  const choices = [...section.querySelectorAll("[data-sel-choice]")];
  const stage = section.querySelector("#selector-stage");
  choices.forEach((button) =>
    ui.listen(button, "click", (event) => {
      if (button.getAttribute("aria-pressed") === "true") return;
      const key = button.dataset.selChoice;
      const card = chooseFocus(key);
      choices.forEach((choice) =>
        choice.setAttribute("aria-pressed", String(choice === button)),
      );
      stage.dataset.focus = key;
      ["source", "label", "count", "title", "time"].forEach((field) =>
        fillText(stage, `[data-sel-${field}]`, card[field]),
      );
      const action = stage.querySelector("[data-sel-action]");
      action.firstChild.textContent = `${card.action} `;
      stage
        .querySelector("[data-sel-icon]")
        .setAttribute("href", `#${card.icon}`);
      settleIntoPlace(ui, stage.querySelector(".sel-main-card"), event);
    }),
  );
}

function bindControl(document, ui) {
  const section = document.getElementById("control");
  const button = section?.querySelector("[data-control-update]");
  if (!button) return;
  let step = 0;
  ui.listen(button, "click", (event) => {
    const next = advanceExample(step);
    step = next.step;
    const frame = section.querySelector("#control-example");
    frame.dataset.reviewState =
      next.status === "Reviewed" ? "reviewed" : "pending";
    ["source", "status", "title", "outcome"].forEach((field) =>
      fillText(section, `[data-control-${field}]`, next[field]),
    );
    button.firstChild.textContent = next.action;
    settleIntoPlace(ui, section.querySelector(".control-approval-card"), event);
  });
}

function settleIntoPlace(ui, element, event) {
  ui.animate(
    element,
    event,
    [
      { opacity: 0.72, transform: "translateY(4px)" },
      { opacity: 1, transform: "translateY(0)" },
    ],
    { duration: 200, easing: "cubic-bezier(.2,.7,.2,1)" },
  );
}

export function initializeFocusScenes(document, env = window) {
  const ui = createUiBindings(document, env);
  bindFocus(document, ui);
  bindControl(document, ui);
  return () => ui.dispose();
}