'use client'

import { useEffect, useState } from 'react'
import { getPlatformPayments, PlatformPayments } from '@/lib/api/platform'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Skeleton } from '@/components/ui/Skeleton'
import { ErrorState } from '@/components/ui/ErrorState'
import { formatCurrency } from '@/lib/types'
import { cn } from '@/lib/utils'

function statusBadge(status: string | null): string {
  switch (status) {
    case 'confirmed':
      return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
    case 'initiated':
    case 'pending':
      return 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300'
    case 'failed':
      return 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
    case 'refunded':
      return 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
    default:
      return 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300'
  }
}

export default function PlatformPaymentsPage() {
  const [data, setData] = useState<PlatformPayments | null>(null)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    getPlatformPayments().then(res => {
      if (res.success) setData(res.data)
      else setError(res.message)
    })
  }, [])

  if (error) return <ErrorState message={error} />
  if (!data) return <Skeleton className="h-56 w-full" />

  const invoices = data.invoices
  const intents = data.payment_intents

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Payments</h1>
        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
          Cross-tenant payment records — invoices and payment attempts as stored,
          never guessed.
        </p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <Card>
          <CardHeader><CardTitle className="text-sm text-gray-500 dark:text-gray-400">Invoices</CardTitle></CardHeader>
          <CardContent><p className="text-3xl font-bold">{data.counts.invoices}</p></CardContent>
        </Card>
        <Card>
          <CardHeader><CardTitle className="text-sm text-gray-500 dark:text-gray-400">Payment attempts</CardTitle></CardHeader>
          <CardContent><p className="text-3xl font-bold">{data.counts.payment_intents}</p></CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Payment intents</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          {intents.length === 0 ? (
            <p className="px-4 py-8 text-center text-sm text-gray-500">
              No payment attempts have been recorded yet.
            </p>
          ) : (
            <ul className="divide-y divide-gray-200 dark:divide-gray-700">
              {intents.map(p => (
                <li key={p.id} className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
                  <div className="min-w-0">
                    <p className="text-sm font-medium truncate">
                      {data.businesses[p.business_id] || p.business_id.slice(0, 8)}
                    </p>
                    <p className="text-xs text-gray-500">
                      {p.provider || '—'} {p.phone ? `· ${p.phone}` : ''} · {new Date(p.created_at).toLocaleString()}
                      {p.provider_ref ? ` · ref ${p.provider_ref}` : ''}
                      {p.error ? ` · ${p.error}` : ''}
                    </p>
                  </div>
                  <div className="flex shrink-0 items-center gap-3">
                    {p.amount != null && (
                      <span className="text-sm font-semibold">
                        {formatCurrency(p.amount)}
                      </span>
                    )}
                    <span className={cn('inline-flex rounded-full px-2 py-0.5 text-xs font-semibold uppercase', statusBadge(p.status))}>
                      {p.status}
                    </span>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Invoices</CardTitle>
        </CardHeader>
        <CardContent className="p-0">
          {invoices.length === 0 ? (
            <p className="px-4 py-8 text-center text-sm text-gray-500">
              No invoices have been issued yet.
            </p>
          ) : (
            <ul className="divide-y divide-gray-200 dark:divide-gray-700">
              {invoices.map(inv => (
                <li key={inv.id} className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
                  <div className="min-w-0">
                    <p className="text-sm font-medium">
                      {inv.invoice_number}
                    </p>
                    <p className="text-xs text-gray-500">
                      {data.businesses[inv.business_id] || inv.business_id.slice(0, 8)} ·{' '}
                      {new Date(inv.created_at).toLocaleString()}
                    </p>
                  </div>
                  <div className="flex shrink-0 items-center gap-3">
                    <span className="text-sm font-semibold">
                      {formatCurrency(inv.total)}
                    </span>
                    <span className={cn('inline-flex rounded-full px-2 py-0.5 text-xs font-semibold uppercase', statusBadge(inv.payment_status))}>
                      {inv.payment_status}
                    </span>
                  </div>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  )
}