import { useEffect, useState } from 'react'

import { formatInrFromPaise, formatEventDate } from '../../utils/format'
import { adminApi, normalizeAdminError } from '../api'
import { AdminPageHeader } from '../components/AdminPageHeader'
import { AdminTable } from '../components/AdminTable'

export function AdminPaymentsPage() {
  const [rows, setRows] = useState([])
  const [error, setError] = useState('')

  useEffect(() => {
    adminApi.get('/api/admin/payments').then((res) => setRows(res.data)).catch((err) => setError(normalizeAdminError(err).message))
  }, [])

  return (
    <>
      <AdminPageHeader title="Payments" description="Provider references tied to orders." />
      {error ? <p className="text-accent">{error}</p> : null}
      <AdminTable
        columns={[
          { key: 'order_id', label: 'Order' },
          { key: 'status', label: 'Status' },
          { key: 'total_paise', label: 'Amount', render: (r) => formatInrFromPaise(r.total_paise) },
          { key: 'provider_payment_id', label: 'Payment ID' },
          { key: 'paid_at', label: 'Paid', render: (r) => (r.paid_at ? formatEventDate(r.paid_at) : '—') },
        ]}
        rows={rows}
      />
    </>
  )
}