'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import {
  getPlatformOverview,
  PlatformOverview,
} 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 { Building2, CreditCard, Package, Store, Users } from 'lucide-react'

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

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

  if (error) return <ErrorState message={error} />
  if (!data) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-10 w-64" />
        <div className="grid gap-4 md:grid-cols-3">
          <Skeleton className="h-28 w-full" />
          <Skeleton className="h-28 w-full" />
          <Skeleton className="h-28 w-full" />
        </div>
        <Skeleton className="h-56 w-full" />
      </div>
    )
  }

  const m = data.metrics
  const byStatus = m.businesses_by_status
  const recent = data.recent_businesses || []

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Platform Overview</h1>
        <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
          Cross-tenant control plane for IMBARAGA. Generated {new Date(data.generated_at).toLocaleString()}.
        </p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
              <Building2 className="h-4 w-4" /> Businesses
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-gray-900 dark:text-white">{m.businesses_total}</p>
            <p className="mt-1 text-xs text-gray-500">
              {byStatus.pending ?? 0} pending · {byStatus.active ?? 0} active · {byStatus.suspended ?? 0} suspended
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
              <Users className="h-4 w-4" /> Team
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-gray-900 dark:text-white">{m.members}</p>
            <p className="mt-1 text-xs text-gray-500">{m.platform_admins} platform admins</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
              <Package className="h-4 w-4" /> Operations
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-gray-900 dark:text-white">{m.orders}</p>
            <p className="mt-1 text-xs text-gray-500">
              {m.products} products · {m.published_stores} published storefronts
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
              <Store className="h-4 w-4" /> Storefronts live
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-gray-900 dark:text-white">{m.published_stores}</p>
            <p className="mt-1 text-xs text-gray-500">public URLs in /shop/published</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
              <CreditCard className="h-4 w-4" /> Confirmed payments
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-3xl font-bold text-gray-900 dark:text-white">{m.confirmed_invoices}</p>
            <p className="mt-1 text-xs text-gray-500">
              {m.collected_revenue.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })}{' '}
              collected
            </p>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="text-lg">Recently created</CardTitle>
        </CardHeader>
        <CardContent>
          {recent.length === 0 ? (
            <p className="text-sm text-gray-500">No businesses created yet.</p>
          ) : (
            <ul className="divide-y divide-gray-200 dark:divide-gray-700">
              {recent.map(b => (
                <li key={b.id} className="py-3 flex items-center justify-between gap-4">
                  <div className="min-w-0">
                    <Link
                      href={`/platform/businesses/${b.id}`}
                      className="font-medium text-indigo-600 hover:underline dark:text-indigo-400 truncate"
                    >
                      {b.name}
                    </Link>
                    <p className="text-xs text-gray-500">
                      {b.slug} · {new Date(b.created_at).toLocaleDateString()}
                    </p>
                  </div>
                  <span
                    className={
                      'inline-flex rounded-full px-2 py-0.5 text-xs font-semibold uppercase tracking-wide ' +
                      (b.status === 'active'
                        ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300'
                        : b.status === 'suspended'
                          ? 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
                          : 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300')
                    }
                  >
                    {b.status}
                  </span>
                </li>
              ))}
            </ul>
          )}
        </CardContent>
      </Card>
    </div>
  )
}