'use client'

import { useEffect, useState } from 'react'
import { formatCurrencyFcfa } from '@/lib/utils'

type RevenueStats = {
  todayAmount: number
  monthAmount: number
  totalAmount: number
  todayCount: number
  monthCount: number
  totalCount: number
}

export function AdminDashboard() {
  const [data, setData] = useState<RevenueStats | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)

  async function load() {
    setLoading(true)
    setError(null)

    const response = await fetch('/api/admin/stats/revenue', {
      cache: 'no-store',
    })

    const payload = (await response.json()) as
      | RevenueStats
      | { error: string }

    if (!response.ok || 'error' in payload) {
      setError('error' in payload ? payload.error : 'Erreur de chargement')
      setLoading(false)
      return
    }

    setData(payload)
    setLoading(false)
  }

  useEffect(() => {
    void load()
  }, [])

  if (loading) {
    return <div className="muted">Chargement…</div>
  }

  if (error) {
    return <div className="error">{error}</div>
  }

  if (!data) {
    return <div className="muted">Aucune donnée.</div>
  }

  return (
    <div className="container-stack">
      <div className="topbar">
        <div>
          <h1>Dashboard admin</h1>
          <p>Suivi du chiffre d’affaires abonnement SenKredi.</p>
        </div>
      </div>

      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: '1rem',
        }}
      >
        <StatsCard
          title="Aujourd’hui"
          value={formatCurrencyFcfa(data.todayAmount)}
          subtitle={`${data.todayCount} paiement(s) approuvé(s)`}
        />

        <StatsCard
          title="Ce mois"
          value={formatCurrencyFcfa(data.monthAmount)}
          subtitle={`${data.monthCount} paiement(s) approuvé(s)`}
        />

        <StatsCard
          title="Total"
          value={formatCurrencyFcfa(data.totalAmount)}
          subtitle={`${data.totalCount} paiement(s) approuvé(s)`}
        />
      </div>
    </div>
  )
}

function StatsCard(props: {
  title: string
  value: string
  subtitle: string
}) {
  return (
    <section className="card container-stack">
      <div className="muted">{props.title}</div>
      <div style={{ fontSize: '1.6rem', fontWeight: 800 }}>{props.value}</div>
      <div className="muted">{props.subtitle}</div>
    </section>
  )
}