import { formatDate, formatNumber } from '@navi/ui';
import { AccessDenied } from '../../../components/AccessDenied';
import { EmptyState, MetricCard, PageHeader, StatusBadge } from '../../../components/DashboardPrimitives';
import { dashboardApi } from '../../../lib/api';
import type { DashboardEngagement } from '../../../lib/dashboardTypes';
import { requireDashboardRoute } from '../../../lib/permissions';

export default async function EngagementPage() {
  const gate = await requireDashboardRoute('/engagement');
  if (!gate.allowed) return <AccessDenied required={gate.required} />;

  const engagement = await dashboardApi<DashboardEngagement>('/engagement/dashboard');

  if (!engagement) {
    return (
      <div className="stack">
        <PageHeader title="User behavior" eyebrow="Search, clicks, saves, favourites" />
        <EmptyState
          title="No engagement access"
          body="This account cannot read product behavior data. Use an admin, operations, or reporting role."
        />
      </div>
    );
  }

  return (
    <div className="stack">
      <PageHeader title="User behavior" eyebrow="Live Phase One product signals">
        <span className="muted">Updated {formatDate(engagement.generatedAt, 'en', { dateStyle: 'medium', timeStyle: 'short' })}</span>
      </PageHeader>

      <div className="metric-grid">
        <MetricCard label="Events" value={formatNumber(engagement.totals.events)} hint="Last 30 days" />
        <MetricCard label="Searches" value={formatNumber(engagement.totals.searches)} />
        <MetricCard label="Clicks" value={formatNumber(engagement.totals.resultClicks)} />
        <MetricCard label="Saved / favourites" value={formatNumber(engagement.totals.saves)} />
        <MetricCard label="Removed saves" value={formatNumber(engagement.totals.unsaves)} />
        <MetricCard label="Trips generated" value={formatNumber(engagement.totals.tripGenerations)} />
        <MetricCard label="Known users" value={formatNumber(engagement.totals.uniqueUsers)} />
      </div>

      <div className="two-col">
        <section className="card">
          <h3 style={{ marginTop: 0 }}>Top searches</h3>
          {engagement.topSearches.length ? (
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr><th>Query</th><th>Count</th><th>Latest</th></tr>
                </thead>
                <tbody>
                  {engagement.topSearches.map((item) => (
                    <tr key={item.query}>
                      <td>{item.query}</td>
                      <td>{formatNumber(item.count)}</td>
                      <td>{formatDate(item.latestAt, 'en', { dateStyle: 'short', timeStyle: 'short' })}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <EmptyState title="No searches yet" body="Searches from the mobile Discover screen will appear here." />
          )}
        </section>

        <section className="card">
          <h3 style={{ marginTop: 0 }}>Most interesting results</h3>
          {engagement.topEntities.length ? (
            <div className="table-wrap">
              <table className="table">
                <thead>
                  <tr><th>Item</th><th>Type</th><th>Views</th><th>Clicks</th><th>Saves</th></tr>
                </thead>
                <tbody>
                  {engagement.topEntities.map((item) => (
                    <tr key={`${item.entityType}-${item.entityId}`}>
                      <td>{item.title}</td>
                      <td><StatusBadge value={item.entityType} /></td>
                      <td>{formatNumber(item.views)}</td>
                      <td>{formatNumber(item.clicks)}</td>
                      <td>{formatNumber(item.saves)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <EmptyState title="No result engagement yet" body="Listing views, clicks, and saves will appear once users browse the app." />
          )}
        </section>
      </div>

      <section className="card">
        <h3 style={{ marginTop: 0 }}>Recent event stream</h3>
        {engagement.recentEvents.length ? (
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr><th>Time</th><th>User</th><th>Event</th><th>Screen</th><th>Query</th><th>Entity</th></tr>
              </thead>
              <tbody>
                {engagement.recentEvents.map((event) => (
                  <tr key={event.id}>
                    <td>{formatDate(event.createdAt, 'en', { dateStyle: 'short', timeStyle: 'short' })}</td>
                    <td>{event.user ? `${event.user.fullName} (${event.user.email})` : 'Guest or anonymous'}</td>
                    <td><StatusBadge value={event.eventType} /></td>
                    <td>{event.screen ?? '-'}</td>
                    <td>{event.query ?? '-'}</td>
                    <td>{event.entityType && event.entityId ? `${event.entityType}: ${event.entityId}` : '-'}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        ) : (
          <EmptyState title="No events yet" body="Use the mobile app: search, open results, save items, and generate a trip." />
        )}
      </section>
    </div>
  );
}