---
import Layout from "@/layouts/Layout.astro"
import Item from "@/components/Item.astro"
import StreetSnap from "@/components/StreetSnap.astro"
import { getSsrArticle, getSsrStreetSnap } from "@/lib/api"
import { getI18n } from "@/i18n/utils"

// 按需 SSR：走秀(runway)与街拍(street snap)详情统一收口到 /item/[id]。
// 对外 id 带类型前缀（r=runway / s=snap，见后端 hashid.EncodeTyped），据此直接查对应表，无歧义、无需回落。
export const prerender = false

const { id } = Astro.params
const isSnap = !!id && id[0] === "s"

const { t } = getI18n(Astro)

let article = null
let articleErr = null
let snap = null
let snapErr = null
let preview = false
let imageTotal = 0

// await 必须位于 frontmatter 顶层（Astro 不支持块内顶层 await）
const data = isSnap
  ? await getSsrStreetSnap(id, Astro.currentLocale)
  : await getSsrArticle(id, Astro.currentLocale)

if (isSnap) {
  snap = data.snap
  snapErr = data.error
} else {
  article = data.article
  articleErr = data.error
}
preview = data.preview ?? false
imageTotal = data.imageTotal ?? 0

// 供客户端「收藏 / 历史」使用的精简元信息（服务端已拿到，直接透传，避免前端再发请求）。
const meta = isSnap
  ? { id: id ?? "", type: "street", title: snap?.title ?? "", cover: snap?.cover ?? "", brand: "" }
  : { id: id ?? "", type: "runway", title: article?.title ?? "", cover: article?.cover ?? "", brand: article?.brand_name ?? "" }
const saveLabel = t("save")
const savedLabel = t("saved")
---

<Layout>
  {article ? <Item article={article} error={articleErr} preview={preview} imageTotal={imageTotal} /> : <StreetSnap snap={snap} error={snapErr} preview={preview} imageTotal={imageTotal} />}
</Layout>

<style>
  #fav-fab.is-active .fav-heart { fill: currentColor; }
</style>

{(article || snap) && (
  <button id="fav-fab" type="button"
    data-id={meta.id}
    data-type={meta.type}
    data-title={meta.title}
    data-cover={meta.cover}
    data-brand={meta.brand}
    data-save-label={saveLabel}
    data-saved-label={savedLabel}
    class="fixed bottom-6 right-6 z-50 inline-flex items-center gap-2 rounded-full border border-black/40 bg-white/90 px-5 py-3 text-[11px] font-bold uppercase tracking-[0.2em] text-black shadow-sm backdrop-blur transition-colors hover:bg-black hover:text-white">
    <svg class="fav-heart h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21C12 21 4 14.5 4 8.8C4 6.1 6.1 4 8.7 4C10.3 4 11.5 4.8 12 6C12.5 4.8 13.7 4 15.3 4C17.9 4 20 6.1 20 8.8C20 14.5 12 21 12 21Z"/></svg>
    <span id="fav-label">{saveLabel}</span>
  </button>
)}

{/* 注意：不能用 define:vars 传 meta —— 它会把脚本包成内联 IIFE 并把 import 塞进函数体内，
    导致 SyntaxError（import 只能在模块顶层）。故改由 data-* 属性透传，脚本自行读取。 */}
<script>
  import { getUser } from "@/lib/api"
  import { isFavorited, toggleFavorite, checkFavorited, hydrateFavorited } from "@/lib/favorites"
  import { recordHistory } from "@/lib/history"

  const btn = document.getElementById("fav-fab")
  const label = document.getElementById("fav-label")
  if (btn) {
    const meta = {
      id: btn.dataset.id || "",
      type: btn.dataset.type || "",
      title: btn.dataset.title || "",
      cover: btn.dataset.cover || "",
      brand: btn.dataset.brand || "",
    }
    const saveLabel = btn.dataset.saveLabel || "save"
    const savedLabel = btn.dataset.savedLabel || "saved"

    if (meta.id) {
      // 浏览历史：点开文章详情即记一条（登录态；列表页不再记）。同一篇反复打开，后端 upsert 刷新时间。
      if (getUser()) recordHistory(meta.id)

      const sync = () => {
        const fav = isFavorited(meta.id)
        if (label) label.textContent = fav ? savedLabel : saveLabel
        btn.classList.toggle("is-active", fav)
      }
      sync()

      // 登录态：异步问服务端当前篇是否已收藏并写回本地（换浏览器/设备后，爱心状态与服务端一致）
      if (getUser()) {
        checkFavorited([meta.id])
          .then((set) => {
            if (set.has(meta.id)) hydrateFavorited(meta.id, meta.type as "runway" | "street", meta.title, meta.cover, meta.brand)
            sync()
          })
          .catch(() => {})
      }

      btn.addEventListener("click", () => {
        if (!getUser()) {
          window.location.href = "/login"
          return
        }
        toggleFavorite({
          id: meta.id,
          type: meta.type,
          title: meta.title,
          cover: meta.cover,
          brand: meta.brand,
        } as any)
        sync()
      })
    }
  }
</script>