import { device } from "@shared/device";
import { column, render, type Node } from "@busy-app/busy-lib";
import manifest from "./appmeta/manifest.json";

const APP = manifest.id;
const API = "https://api.frankfurter.dev/v1/latest";
const CURRENCIES = ["USD", "EUR", "GBP", "JPY", "CHF", "CNY"];
const SETTINGS_VERSION = 1; // "version" in settings.json
const SAVED_KEY = "quote";

const GREY = "#FFFFFF80";
const WHITE = "#FFFFFFFF";
const GREEN = "#3DDC84FF";

type Settings = { base: string; refreshMinutes: number };
const DEFAULTS: Settings = { base: "EUR", refreshMinutes: 10 };

let settings: Settings = DEFAULTS;
let quotes = CURRENCIES.filter((c) => c !== DEFAULTS.base);
let index = 0;
let rates: Record<string, number> = {};
let status = "Loading";

let refreshTimer: ReturnType<typeof setInterval> | undefined;
let saveTimer: ReturnType<typeof setTimeout> | undefined;
let stopped = false;

const report = (err: unknown) =>
  console.error(`${APP}: ${err instanceof Error ? err.message : String(err)}`);

// ---------- Screen ----------

function frame(): Node {
  const quote = quotes[index];
  const rate = rates[quote];
  const text = rate === undefined ? status : rate.toFixed(rate >= 100 ? 2 : 4);
  // gap: 2 keeps the two lines from touching.
  return column({ justify: "center", align: "center", gap: 2 }, [
    { type: "text", id: "pair", text: `${settings.base}/${quote}`, font: "small", color: GREY },
    { type: "text", id: "rate", text, font: "bold", color: rate === undefined ? WHITE : GREEN },
  ]);
}

let drawing = false; // a frame is on its way
let dirty = false;   // something changed while it was

function draw(): void {
  if (drawing) {
    dirty = true;
    return;
  }
  drawing = true;
  dirty = false;

  const done = () => {
    drawing = false;
    if (dirty) draw(); // send only the latest state
  };

  device
    .DisplayDraw({ application_name: APP, priority: 50, elements: render(frame()) })
    .then(done, (err) => {
      report(err);
      done();
    });
}

// ---------- Data ----------

// Read the values when the app starts. If anything goes wrong, fall back to the defaults.
async function loadSettings(): Promise<Settings> {
  try {
    const { version, values } = await device.AppsSettingsGet({ app_id: APP });
    if (version !== SETTINGS_VERSION) return DEFAULTS;
    return {
      base: typeof values.base === "string" ? values.base : DEFAULTS.base,
      refreshMinutes: typeof values.refresh_minutes === "number" ? values.refresh_minutes : DEFAULTS.refreshMinutes,
    };
  } catch (err) {
    report(err);
    return DEFAULTS;
  }
}

async function fetchRates(): Promise<void> {
  try {
    const res = await fetch(`${API}?base=${settings.base}&symbols=${quotes.join(",")}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = (await res.json()) as { rates: Record<string, number> };
    rates = data.rates;
  } catch (err) {
    // Keep the last good rates on screen and try again on the next refresh.
    report(err);
    if (Object.keys(rates).length === 0) status = "No data";
  }
  if (!stopped) draw();
}

function restoreChoice(): void {
  const i = quotes.indexOf(localStorage.getItem(SAVED_KEY) ?? "");
  index = i >= 0 ? i : 0;
}

function saveChoice(): void {
  saveTimer = undefined;
  localStorage.setItem(SAVED_KEY, quotes[index]);
}

// Writing goes to flash memory, so save a few seconds after the wheel stops.
function saveChoiceSoon(): void {
  if (saveTimer !== undefined) clearTimeout(saveTimer);
  saveTimer = setTimeout(saveChoice, 3000);
}

// ---------- App ----------

function main(): void {
  draw();

  const stop = () => {
    stopped = true;
    if (refreshTimer !== undefined) clearInterval(refreshTimer);
    if (saveTimer !== undefined) {
      clearTimeout(saveTimer);
      saveChoice();
    }
    // Removing the last listener closes the app. Do it after this handler returns.
    setTimeout(unbind, 0);
  };

  const unbind = listen("input", (event) => {
    if (stopped) return;

    if (event.key === "encoder") {
      // One click of the wheel: delta is 1 clockwise, -1 counterclockwise.
      index = (index + event.delta + quotes.length) % quotes.length;
      saveChoiceSoon();
      draw();
      return;
    }

    if (event.key === "ok" && event.action === "short") {
      void fetchRates();
      return;
    }

    if (event.key === "back" && event.action === "short") {
      stop();
    }
  });

  void (async () => {
    settings = await loadSettings();
    quotes = CURRENCIES.filter((c) => c !== settings.base);
    restoreChoice();
    draw();

    await fetchRates();
    if (stopped) return;
    // Refresh on a timer. The timer also keeps the app running.
    refreshTimer = setInterval(() => void fetchRates(), settings.refreshMinutes * 60 * 1000);
  })();
}

main();

{
  "format_version": 1,
  "version": 1,
  "fields": {
    "base": {
      "label": "Base currency",
      "type": "enum",
      "default": "EUR",
      "options": [
        { "value": "EUR", "label": "Euro" },
        { "value": "USD", "label": "US dollar" },
        { "value": "GBP", "label": "Pound sterling" }
      ]
    },
    "refresh_minutes": {
      "label": "Refresh, minutes",
      "type": "integer",
      "default": 10,
      "min": 5,
      "max": 60,
      "step": 5
    }
  }
}