export function renderHeader(currentHandle: string, isLoggedIn: boolean, userHandle?: string): string {
  const loginBtn = isLoggedIn
    ? `<button type="button" class="header-btn user-btn" id="user-btn" title="${userHandle}">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
        </svg>
      </button>`
    : `<button type="button" class="header-btn login-btn" id="login-btn" title="Login">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
          <polyline points="10 17 15 12 10 7"/>
          <line x1="15" y1="12" x2="3" y2="12"/>
        </svg>
      </button>`

  // Use logged-in user's handle for input if available
  const inputHandle = isLoggedIn && userHandle ? userHandle : currentHandle

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

export interface HeaderCallbacks {
  onBrowse: (handle: string) => void
  onLogin: () => void
  onLogout: () => void
}

export function mountHeader(
  container: HTMLElement,
  currentHandle: string,
  isLoggedIn: boolean,
  userHandle: string | undefined,
  callbacks: HeaderCallbacks,
  isStatic: boolean = false
): void {
  // For static pages, only update if login state requires it
  const existingLoginBtn = container.querySelector('#login-btn')
  const existingUserBtn = container.querySelector('#user-btn')
  const needsUpdate = !isStatic ||
    (isLoggedIn && existingLoginBtn) ||  // Need to show user button
    (!isLoggedIn && existingUserBtn)      // Need to show login button

  if (needsUpdate) {
    container.innerHTML = renderHeader(currentHandle, isLoggedIn, userHandle)
  }

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

  if (!form) return

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

  if (isLoggedIn) {
    const userBtn = document.getElementById('user-btn')
    userBtn?.addEventListener('click', async (e) => {
      e.preventDefault()
      e.stopPropagation()
      if (confirm('Logout?')) {
        await callbacks.onLogout()
      }
    })
  } else {
    const loginBtn = document.getElementById('login-btn')
    loginBtn?.addEventListener('click', (e) => {
      e.preventDefault()
      e.stopPropagation()
      callbacks.onLogin()
    })
  }
}