// ==UserScript==
// @name         Bilibili Minimal (Google Style)
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Transform bilibili.com into a Google-style minimal search page
// @author       opencode
// @match        https://www.bilibili.com/*
// @match        https://search.bilibili.com/*
// @icon         https://www.bilibili.com/favicon.ico
// @grant        none
// ==/UserScript==

(function () {
    'use strict'

    const url = new URL(window.location.href)

     // Only redirect on www.bilibili.com homepage (not on /video/xxx etc.)
    if (url.hostname === 'www.bilibili.com' && url.searchParams.get('full') !== '1') {
        const path = url.pathname.replace(/\/+$/, '') || '/'
        if (path === '/') {
            window.location.replace('https://search.bilibili.com?minimal=1')
            return
        }
    }

    // Only inject on search.bilibili.com with ?minimal=1
    if (url.hostname !== 'search.bilibili.com' || url.searchParams.get('minimal') !== '1') {
        return
    }

    // Kill all remaining page activity
    window.stop()
    document.head.replaceChildren()
    document.body.replaceChildren()

    // ─── Styles ──────────────────────────────────────────────────────────
    const style = document.createElement('style')
    style.textContent = `
    * { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #ffffff;
      --text: #202124;
      --text-secondary: #5f6368;
      --border: #dfe1e5;
      --border-hover: #b8b8b8;
      --shadow: rgba(32,33,36,0.28);
      --btn-bg: #f8f9fa;
      --btn-hover: #f1f3f4;
      --btn-text: #3c4043;
      --link: #1a0dab;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #202124;
        --text: #e8eaed;
        --text-secondary: #9aa0a6;
        --border: #5f6368;
        --border-hover: #8e9198;
        --shadow: rgba(0,0,0,0.5);
        --btn-bg: #303134;
        --btn-hover: #3c4043;
        --btn-text: #e8eaed;
        --link: #8ab4f8;
      }
    }

    html, body {
      height: 100%;
      overflow: hidden;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .top-bar {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 10;
    }

    .login-btn {
      padding: 8px 20px;
      background: #00a1d6;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      font-weight: 500;
      transition: background 0.2s;
    }

    .login-btn:hover { background: #00b5e5; }

    .user-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      display: block; object-fit: cover;
    }

    .center {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 640px;
      padding: 18vh 20px 0;
    }

    .logo {
      font-size: 72px;
      font-weight: 700;
      color: #00a1d6;
      letter-spacing: -2px;
      margin-bottom: 28px;
      user-select: none;
    }

    .search-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 0 20px;
      transition: box-shadow 0.2s, border-color 0.2s;
      background: var(--bg);
    }

    .search-wrapper:hover,
    .search-wrapper:focus-within {
      box-shadow: 0 1px 6px var(--shadow);
      border-color: var(--border-hover);
    }

    .search-icon {
      width: 20px;
      height: 20px;
      fill: var(--text-secondary);
      flex-shrink: 0;
      margin-right: 12px;
    }

    .search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 16px;
      padding: 14px 0;
      color: var(--text);
    }

    .search-input::placeholder { color: var(--text-secondary); }

    .footer {
      padding: 12px;
      font-size: 12px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }
  `

    // ─── Build DOM ──────────────────────────────────────────────────────

    // Head
    const head = document.createElement('head')
    const meta = document.createElement('meta')
    meta.charset = 'UTF-8'
    const viewport = document.createElement('meta')
    viewport.name = 'viewport'
    viewport.content = 'width=device-width, initial-scale=1.0'
    const title = document.createElement('title')
    title.textContent = 'Bilibili'

    head.appendChild(meta)
    head.appendChild(viewport)
    head.appendChild(title)
    head.appendChild(style)
    document.documentElement.appendChild(head)

    // Body
    const body = document.createElement('body')

    // Top bar
    const topBar = document.createElement('div')
    topBar.className = 'top-bar'
    const loginBtn = document.createElement('button')
    loginBtn.className = 'login-btn'
    loginBtn.textContent = '登录'
    loginBtn.addEventListener('click', () => {
        const here = encodeURIComponent('https://search.bilibili.com?minimal=1')
        window.location.href = 'https://passport.bilibili.com/login?gourl=' + here
    })
    topBar.appendChild(loginBtn)

    // Center content
    const center = document.createElement('div')
    center.className = 'center'

    const logo = document.createElement('div')
    logo.className = 'logo'
    logo.textContent = 'Bilibili'

    // Search
    const sw = document.createElement('div')
    sw.className = 'search-wrapper'

    const svgNS = 'http://www.w3.org/2000/svg'
    const svg = document.createElementNS(svgNS, 'svg')
    svg.setAttribute('class', 'search-icon')
    svg.setAttribute('viewBox', '0 0 24 24')
    const path = document.createElementNS(svgNS, 'path')
    path.setAttribute('d', 'M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z')
    svg.appendChild(path)

    const input = document.createElement('input')
    input.className = 'search-input'
    input.type = 'text'

    const doSearch = (q) => {
        const query = q.trim()
        if (query) {
            window.location.href = 'https://search.bilibili.com/all?keyword=' + encodeURIComponent(query)
        }
    }

    input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') doSearch(input.value)
    })

    sw.appendChild(svg)
    sw.appendChild(input)

    // No buttons – just search bar

    // Footer
    const footer = document.createElement('div')
    footer.className = 'footer'

    center.appendChild(logo)
    center.appendChild(sw)

    body.appendChild(topBar)
    body.appendChild(center)
    body.appendChild(footer)
    document.documentElement.appendChild(body)

    input.focus()

    // ─── Login state detection ──────────────────────────────────────────
    ;(async () => {
        try {
            const res = await fetch('https://api.bilibili.com/x/web-interface/nav', {
                credentials: 'include'
            })
            const data = await res.json()
            if (data.code === 0 && data.data?.isLogin) {
                const u = data.data
                loginBtn.textContent = ''
                const avatar = document.createElement('img')
                avatar.className = 'user-avatar'
                avatar.src = u.face
                avatar.alt = ''
                avatar.title = u.uname
                loginBtn.appendChild(avatar)
            }
        } catch (_) {
            // ignore – stay as "登录"
        }
    })()
})()