import type { AuthStateValue } from "../shared/auth-messages";

export function renderLoggedOut(root: HTMLElement, error?: string | null): void {
  root.innerHTML = `
    <section data-popup-state="logged-out">
      <h1>Star Chart Search Enhancer</h1>
      <p>登录后才能使用星图增强功能</p>
      ${error ? `<p data-popup-error="true">${error}</p>` : ""}
      <button type="button" data-popup-sign-in="button">登录 Logto</button>
    </section>
  `;
}

export function renderLoggedIn(
  root: HTMLElement,
  authState: AuthStateValue
): void {
  const userInfo = authState.userInfo;

  root.innerHTML = `
    <section data-popup-state="logged-in">
      <h1>Star Chart Search Enhancer</h1>
      <p>已登录</p>
      <p>${userInfo?.name ?? userInfo?.username ?? "未知用户"}</p>
      <p>${userInfo?.email ?? ""}</p>
      <button type="button" data-popup-sign-out="button">退出登录</button>
    </section>
  `;
}

export function renderDevPanel(
  root: HTMLElement,
  authState: AuthStateValue
): void {
  const panel = root.ownerDocument.createElement("section");
  panel.dataset.popupDevPanel = "root";
  panel.innerHTML = `
    <h2>dev auth panel</h2>
    <p>resource: ${authState.resource ?? ""}</p>
    <p>scopes: ${(authState.scopes ?? []).join(", ")}</p>
    <p>token: ${authState.tokenAvailable ? "available" : "missing"}</p>
    <p>expires: ${authState.accessTokenExpiresAt ?? "unknown"}</p>
    <p>error: ${authState.lastError ?? ""}</p>
    <button type="button" data-popup-test-protected-api="button">测试受保护接口</button>
    <pre data-popup-protected-api-result="output"></pre>
  `;
  root.appendChild(panel);
}

export function setProtectedApiResult(root: HTMLElement, value: string): void {
  const output = root.querySelector(
    '[data-popup-protected-api-result="output"]'
  );

  if (!output) {
    return;
  }

  output.textContent = value;
}