'use client';

import React, { useEffect, useState } from 'react';
import styles from '@/app/admin/page.module.css';

interface PlatformAnalyticsCardProps {
  onClick: () => void;
}

interface SummaryResponse {
  traffic: { current: number; previous: number; changePercent: number };
}

function formatCount(n: number): string {
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`;
  return n.toString();
}

export function PlatformAnalyticsCard({ onClick }: PlatformAnalyticsCardProps) {
  const [summary, setSummary] = useState<SummaryResponse | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      try {
        const res = await fetch('/api/admin/performance?period=30d');
        const body = await res.json();
        if (!cancelled && res.ok) {
          setSummary(body);
        }
      } catch {
        // Card stays clickable; panel surfaces the real error on open.
      } finally {
        if (!cancelled) setLoading(false);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, []);

  const traffic = summary?.traffic;

  return (
    <button
      type="button"
      onClick={onClick}
      className={`${styles.adminToolCard} ${styles.adminToolCardButton}`}
    >
      <div className={`${styles.adminToolIcon} ${styles.platformAnalyticsIcon}`} aria-hidden="true">
        <svg
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <line x1="18" y1="20" x2="18" y2="10" />
          <line x1="12" y1="20" x2="12" y2="4" />
          <line x1="6" y1="20" x2="6" y2="14" />
          <line x1="2" y1="20" x2="22" y2="20" />
        </svg>
      </div>
      <div className={styles.adminToolInfo}>
        <h3>Platform Analytics</h3>
        <p className={loading ? styles.platformLoading : undefined}>
          {traffic ? (
            <>
              {formatCount(traffic.current)} visits{' '}
              <span
                className={traffic.changePercent >= 0 ? styles.platformTrendUp : styles.platformTrendDown}
                aria-label={`${traffic.changePercent >= 0 ? 'up' : 'down'} ${Math.abs(traffic.changePercent).toFixed(1)}% vs last month`}
              >
                {traffic.changePercent >= 0 ? '↑' : '↓'} {Math.abs(traffic.changePercent).toFixed(1)}%
              </span>{' '}
              last 30 days
            </>
          ) : loading ? (
            'Loading platform metrics…'
          ) : (
            'Platform-wide traffic and engagement'
          )}
        </p>
      </div>
    </button>
  );
}