قیمت طلا در React و Next.js؛ پیاده‌سازی تابلو قیمت لحظه‌ای طلا و سکه

// app/api/gold/route.ts
import { NextResponse } from "next/server"

const SYMBOLS = "g18,g24,mesghal,ounce,emami,bahar,nim,rob"

export async function GET() {
  const res = await fetch(`https://api.ezrate.me/v1/rates?symbols=${SYMBOLS}&lang=fa`, {
    headers: { "X-API-Key": process.env.EZRATE_KEY! },
    next: { revalidate: 60 },          // کش سمت سرور: حداکثر یک درخواست در دقیقه
  })
  if (!res.ok) {
    return NextResponse.json({ error: res.status }, { status: 502 })
  }
  const { data, meta } = await res.json()
  return NextResponse.json({ data, as_of: meta.as_of })
}

// app/components/GoldBoard.tsx
"use client"
import { useEffect, useState } from "react"

type Rate = { symbol: string; name: string; buy: number; sell: number; change_pct: number; quote: string }
const fmt = new Intl.NumberFormat("fa-IR")

export default function GoldBoard() {
  const [rates, setRates] = useState<Rate[]>([])
  const [asOf, setAsOf] = useState("")

  useEffect(() => {
    const load = () =>
      fetch("/api/gold").then(r => r.ok ? r.json() : null).then(j => {
        if (j) { setRates(j.data); setAsOf(j.as_of) }   // در خطا عدد قبلی می‌ماند
      })
    load()
    const t = setInterval(load, 60_000)
    return () => clearInterval(t)
  }, [])

  return (
    <table dir="rtl">
      <thead><tr><th>نوع</th><th>خرید</th><th>فروش</th><th>تغییر</th></tr></thead>
      <tbody>
        {rates.map(r => (
          <tr key={r.symbol}>
            <td>{r.name}</td>
            <td>{fmt.format(r.buy)}</td>
            <td>{fmt.format(r.sell)}</td>
            <td style={{ color: r.change_pct >= 0 ? "#0B8A55" : "#D1343F" }}>
              {r.change_pct >= 0 ? "▲" : "▼"} {fmt.format(Math.abs(r.change_pct))}٪
            </td>
          </tr>
        ))}
      </tbody>
      <caption>به‌روزرسانی: {asOf && new Date(asOf).toLocaleTimeString("fa-IR")}</caption>
    </table>
  )
}

// app/gold/page.tsx — داده‌ی اولیه روی سرور، به‌روزرسانی روی کلاینت
async function getRates() {
  const r = await fetch(`https://api.ezrate.me/v1/rates?symbols=g18,emami&lang=fa`, {
    headers: { "X-API-Key": process.env.EZRATE_KEY! }, next: { revalidate: 60 } })
  return r.ok ? (await r.json()).data : []
}
export default async function Page() {
  const initial = await getRates()
  return <GoldBoardLive initial={initial} />   // همان کامپوننت با مقدار اولیه
}

function Row({ r, prev }: { r: Rate; prev?: Rate }) {
  const dir = prev && r.sell !== prev.sell ? (r.sell > prev.sell ? "up" : "dn") : ""
  return (
    <tr key={`${r.symbol}-${r.sell}`} className={dir ? `flash-${dir}` : ""}>
      <td>{r.name}</td><td>{fmt.format(r.sell)}</td>
    </tr>
  )
}
/* CSS:
.flash-up { animation: up 1.2s }  @keyframes up { from { background:#E3F4EC } }
.flash-dn { animation: dn 1.2s }  @keyframes dn { from { background:#FBE7E8 } } */

useEffect(() => {
  let lock: any
  ;(navigator as any).wakeLock?.request("screen").then((l: any) => (lock = l)).catch(() => {})
  return () => lock?.release()
}, [])