import Link from 'next/link';
import { formatNumber } from '@navi/ui';
import { AccessDenied } from '../../../components/AccessDenied';
import { EmptyState, MetricCard, NotAvailable, PageHeader, StatusBadge } from '../../../components/DashboardPrimitives';
import { dashboardApi } from '../../../lib/api';
import type { DashboardOverview } from '../../../lib/dashboardTypes';
import { requireDashboardRoute } from '../../../lib/permissions';

export default async function Partners() {
  const gate = await requireDashboardRoute('/partners');
  if (!gate.allowed) return <AccessDenied required={gate.required} />;
  const overview = await dashboardApi<DashboardOverview>('/dashboard/overview');

  return (
    <div className="stack">
      <PageHeader title="Partners" eyebrow="Partner operations">
        <Link className="btn-secondary" href="/businesses">Open businesses</Link>
      </PageHeader>

      <div className="metric-grid">
        <MetricCard
          label="Visible partners"
          value={overview ? formatNumber(overview.recent.businesses.length) : <NotAvailable />}
          hint="Latest businesses returned by your scoped API access"
        />
        <MetricCard
          label="Pending review"
          value={overview?.metrics.pendingPartnerReviews == null ? <NotAvailable /> : formatNumber(overview.metrics.pendingPartnerReviews)}
        />
        <MetricCard
          label="Published listings"
          value={overview?.metrics.publishedListings == null ? <NotAvailable /> : formatNumber(overview.metrics.publishedListings)}
        />
        <MetricCard label="Dashboard scope" value={overview?.scope ?? 'limited'} />
      </div>

      <div className="card">
        <h3 style={{ marginTop: 0 }}>Latest partner businesses</h3>
        {overview?.recent.businesses.length ? (
          <div className="table-wrap">
            <table className="table">
              <thead><tr><th>Business</th><th>Type</th><th>Status</th><th>Contact</th></tr></thead>
              <tbody>
                {overview.recent.businesses.map((business) => (
                  <tr key={business.id}>
                    <td>{business.legalName}</td>
                    <td>{business.type}</td>
                    <td><StatusBadge value={business.status} /></td>
                    <td>{business.contactEmail}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState title="No partner rows visible" body="Approved or pending partner businesses will appear here when your role can read them." />
        )}
      </div>
    </div>
  );
}