<script lang="ts">
  import { onMount } from "svelte";
  import { api } from "./api.js";

  interface LoginInfo {
    orgSlug: string;
    devLoginEnabled: boolean;
  }

  let info = $state<LoginInfo | null>(null);
  let loadFailed = $state(false);

  onMount(async () => {
    try {
      info = await api<LoginInfo>("/database/api/login-info");
    } catch {
      loadFailed = true;
    }
  });
</script>

<div class="flex min-h-full items-center justify-center p-6">
  <div class="w-full max-w-[380px] rounded-2xl border border-line-soft bg-panel p-9 shadow-[0_4px_20px_rgba(26,26,24,.07)]">
    <div class="text-center text-[26px] font-semibold tracking-wide text-ink">文件库</div>
    <p class="mt-2.5 mb-8 text-center text-[13px] text-ink-3">课程资源与教研文件,一处安放,随处可查</p>

    {#if info}
      <a
        href="/auth/feishu/{encodeURIComponent(info.orgSlug)}"
        class="flex w-full items-center justify-center rounded-lg bg-accent px-4 py-3 text-sm font-medium text-white transition hover:bg-accent-hover"
      >使用飞书登录</a>

      {#if info.devLoginEnabled}
        <div class="my-5 flex items-center gap-2.5 text-[11px] text-ink-3">
          <span class="flex-1 border-t border-line-soft"></span>开发模式
          <span class="flex-1 border-t border-line-soft"></span>
        </div>
        <a href="/app/dev-login-teacher" class="flex w-full items-center justify-center rounded-lg border border-line bg-panel px-4 py-2 text-[12.5px] font-medium text-ink transition hover:bg-hover">⚡ 一键登录(老师)</a>
        <p class="mt-2.5 text-center text-[11px] text-ink-3">仅开发环境可见 · 跳过飞书 OAuth</p>
      {/if}
    {:else if loadFailed}
      <p class="text-center text-[12.5px] text-danger">无法加载登录配置,请稍后重试</p>
    {:else}
      <p class="text-center text-[12.5px] text-ink-3">加载中…</p>
    {/if}
  </div>
</div>
