"use client"

import { useEffect, useMemo, useState } from "react"

type Tx = {
  id?: string | number
  amount?: string | number
  mode?: "sandbox" | "live" | string
}

function toNumber(n: unknown) {
  const v = typeof n === "string" ? Number.parseFloat(n) : typeof n === "number" ? n : 0
  return Number.isFinite(v) ? v : 0
}

export default function AdminDashboardPage() {
  // Move to client fetch to avoid server-side relative fetch errors in production
  const [txs, setTxs] = useState<Tx[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    let mounted = true
    async function load() {
      setLoading(true)
      try {
        const res = await fetch("/api/transactions?per_page=100", { cache: "no-store" })
        const data = res.ok ? await res.json() : null
        if (!mounted) return
        const rows = Array.isArray(data?.data) ? data.data : Array.isArray(data) ? data : []
        setTxs(rows)
      } finally {
        if (mounted) setLoading(false)
      }
    }
    load()
    return () => {
      mounted = false
    }
  }, [])

  const totals = useMemo(() => {
    const totalCount = txs.length
    const totalAmount = txs.reduce((sum, t) => sum + toNumber(t.amount), 0)
    const sandboxCount = txs.filter((t) => (t.mode ?? "").toLowerCase() === "sandbox").length
    const liveCount = txs.filter((t) => (t.mode ?? "").toLowerCase() === "live").length
    return { totalCount, totalAmount, sandboxCount, liveCount }
  }, [txs])

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-semibold">Dashboard</h1>
        <p className="text-sm text-muted-foreground">Overview of your transactions totals.</p>
      </div>

      {loading ? (
        <div className="text-sm text-muted-foreground">Loading...</div>
      ) : (
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <div className="rounded-lg border p-4">
            <div className="text-sm text-muted-foreground">Total Transactions</div>
            <div className="mt-2 text-3xl font-semibold tabular-nums">{totals.totalCount}</div>
          </div>
          <div className="rounded-lg border p-4">
            <div className="text-sm text-muted-foreground">Total Amount</div>
            <div className="mt-2 text-3xl font-semibold tabular-nums">{totals.totalAmount.toLocaleString()}</div>
          </div>
          <div className="rounded-lg border p-4">
            <div className="text-sm text-muted-foreground">Sandbox Transactions</div>
            <div className="mt-2 text-3xl font-semibold tabular-nums">{totals.sandboxCount}</div>
          </div>
          <div className="rounded-lg border p-4">
            <div className="text-sm text-muted-foreground">Live Transactions</div>
            <div className="mt-2 text-3xl font-semibold tabular-nums">{totals.liveCount}</div>
          </div>
        </div>
      )}
    </div>
  )
}