import { isLoggedIn, getLoggedInDid } from '../lib/auth'

export function renderHeader(currentHandle: string): string {
  const loggedIn = isLoggedIn()
  const did = getLoggedInDid()

  const loginBtn = loggedIn
    ? `<button type="button" class="header-btn user-btn" id="logout-btn" title="Logout (${did?.slice(0, 20)}...)">✓</button>`
    : `<button type="button" class="header-btn login-btn" id="login-btn" title="Login">↗</button>`

  return `
    <header id="header">
      <form class="header-form" id="header-form">
        <input
          type="text"
          class="header-input"
          id="header-input"
          placeholder="handle (e.g., syui.ai)"
          value="${currentHandle}"
        >
        <button type="submit" class="header-btn at-btn" title="Browse">@</button>
        ${loginBtn}
      </form>
    </header>
  `
}

export function mountHeader(
  container: HTMLElement,
  currentHandle: string,
  onBrowse: (handle: string) => void
): void {
  container.innerHTML = renderHeader(currentHandle)

  const form = document.getElementById('header-form') as HTMLFormElement
  const input = document.getElementById('header-input') as HTMLInputElement

  form?.addEventListener('submit', (e) => {
    e.preventDefault()
    const handle = input.value.trim()
    if (handle) {
      onBrowse(handle)
    }
  })
}