<template>
  <div class="container">
    <div class="theme-toggle show-animation" :style="{ animationDelay: '400ms' }">
      <div :class="['theme-toggle-bg', themeMode]"></div>
      <button
        :class="{ active: themeMode === 'light' }"
        @click="setAppTheme('light')"
        aria-label="Light theme"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
      </button>
      <button
        :class="{ active: themeMode === 'system' }"
        @click="setAppTheme('system')"
        aria-label="System theme"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/></svg>
      </button>
      <button
        :class="{ active: themeMode === 'dark' }"
        @click="setAppTheme('dark')"
        aria-label="Dark theme"
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
      </button>
    </div>

    <div class="row show-animation" :style="{ animationDelay: '0ms' }">
      <img src="/logo.svg" class="logo" alt="MōBrowser logo"/>
    </div>
    <h1 class="show-animation" :style="{ animationDelay: '80ms' }">Welcome to MōBrowser!</h1>
    <p class="show-animation" :style="{ animationDelay: '160ms' }">Please enter your name and click the button.</p>
    <div class="row show-animation" :style="{ animationDelay: '240ms' }">
      <div>
        <input v-model="name" placeholder="Your name" v-on:keyup.enter="sayHello"/>
        <button @click="sayHello">Greet</button>
      </div>
    </div>
    <p class="show-animation" :style="{ animationDelay: '320ms' }">{{ greetMessage }}</p>
    <div v-if="isMacOS" class="draggable"></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { ipc } from "./gen/ipc";

const name = ref("");
const greetMessage = ref("");
const isMacOS = ref(window.navigator.userAgent.indexOf('Mac') !== -1);
const themeMode = ref(localStorage.getItem("app-theme") || "system");

const applyTheme = () => {
  const root = window.document.documentElement;
  root.classList.remove("light", "dark");
  
  let isDark = false;
  if (themeMode.value === "system") {
    isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  } else {
    isDark = themeMode.value === "dark";
  }
  
  if (isDark) {
    root.classList.add("dark");
  } else {
    root.classList.add("light");
  }
};

const handleSystemThemeChange = (e) => {
  if (themeMode.value === "system") {
    const root = window.document.documentElement;
    root.classList.remove("light", "dark");
    if (e.matches) {
      root.classList.add("dark");
    } else {
      root.classList.add("light");
    }
  }
};

const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

onMounted(() => {
  applyTheme();
  mediaQuery.addEventListener("change", handleSystemThemeChange);
});

onUnmounted(() => {
  mediaQuery.removeEventListener("change", handleSystemThemeChange);
});

watch(themeMode, () => {
  applyTheme();
});

const setAppTheme = (newTheme) => {
  localStorage.setItem("app-theme", newTheme);
  ipc.app.SetTheme({ theme: newTheme }).then(() => {
    themeMode.value = newTheme;
  });
};

const sayHello = () => {
  ipc.greet.SayHello({ name: name.value }).then((message) => {
    greetMessage.value = message.value;
  });
};
</script>