'use client';
import { useState, useEffect } from 'react';
import api from '@/lib/api';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Cell } from 'recharts';

export default function AdminAnalytics() {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  function load() {
    setLoading(true);
    setError('');
    api.get('/analytics/dashboard')
      .then((r) => setData(r.data?.data || r.data))
      .catch(() => setError('Failed to load analytics.'))
      .finally(() => setLoading(false));
  }
  useEffect(load, []);

  if (loading) {
    return (
      <div className="grid h-64 place-items-center text-muted">
        <span className="h-8 w-8 animate-spin rounded-full border-2 border-brand-500 border-t-transparent" />
      </div>
    );
  }
  if (error) {
    return (
      <div className="rounded-card border border-red-200 bg-red-50 p-6 text-sm text-red-700 dark:border-red-500/30 dark:bg-red-500/10">
        {error} <button onClick={load} className="ml-2 font-semibold underline">Retry</button>
      </div>
    );
  }

  const topArticles = data?.topArticles || [];
  const counts = data?.stats || {};
  const chartData = topArticles.map((a: any) => ({
    name: a.title.length > 22 ? a.title.slice(0, 22) + '…' : a.title,
    views: a.views || 0,
  }));
  const maxViews = topArticles[0]?.views || 1;

  const TILES = [
    { label: 'Total Articles', value: counts.totalArticles || 0 },
    { label: 'Published', value: counts.publishedArticles || 0 },
    { label: 'Comments', value: counts.totalComments || 0 },
    { label: 'Subscribers', value: counts.totalSubscribers || 0 },
  ];

  return (
    <div className="space-y-6">
      <div>
        <h2 className="font-serif text-2xl font-bold">Analytics</h2>
        <p className="text-sm text-muted">Traffic and engagement across your content.</p>
      </div>

      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
        {TILES.map(({ label, value }) => (
          <div key={label} className="rounded-card border border-surface bg-surface p-5">
            <p className="text-sm text-muted">{label}</p>
            <p className="mt-1 text-3xl font-bold tabular-nums text-brand-900 dark:text-brand-300">{value.toLocaleString()}</p>
          </div>
        ))}
      </div>

      <div className="rounded-card border border-surface bg-surface p-6">
        <h3 className="mb-4 font-serif font-bold">Top Articles by Views</h3>
        {chartData.length > 0 ? (
          <ResponsiveContainer width="100%" height={320}>
            <BarChart data={chartData} margin={{ top: 5, right: 20, bottom: 60, left: 0 }}>
              <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
              <XAxis dataKey="name" angle={-30} textAnchor="end" interval={0} tick={{ fontSize: 11, fill: 'var(--text-muted)' }} stroke="var(--border)" />
              <YAxis tick={{ fontSize: 11, fill: 'var(--text-muted)' }} stroke="var(--border)" />
              <Tooltip
                cursor={{ fill: 'var(--surface-sunken)' }}
                contentStyle={{ background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 8, color: 'var(--text)' }}
              />
              <Bar dataKey="views" radius={[4, 4, 0, 0]}>
                {chartData.map((_: any, i: number) => (
                  <Cell key={i} fill={i === 0 ? '#e11d2a' : '#0c2a5f'} />
                ))}
              </Bar>
            </BarChart>
          </ResponsiveContainer>
        ) : (
          <p className="py-8 text-center text-sm text-muted">No view data yet.</p>
        )}
      </div>

      <div className="rounded-card border border-surface bg-surface p-6">
        <h3 className="mb-4 font-serif font-bold">Leaderboard</h3>
        {topArticles.length === 0 ? (
          <p className="py-6 text-sm text-muted">No data yet.</p>
        ) : (
          <div className="space-y-4">
            {topArticles.map((a: any, i: number) => (
              <div key={a.id} className="flex items-center gap-4">
                <span className="w-6 font-serif text-xl font-black text-[var(--border)]">{i + 1}</span>
                <div className="min-w-0 flex-1">
                  <p className="truncate text-sm font-medium">{a.title}</p>
                  <div className="mt-1.5 h-1.5 w-full overflow-hidden rounded-full bg-surface-sunken">
                    <div
                      className="h-full rounded-full bg-brand-700"
                      style={{ width: `${Math.min(100, ((a.views || 0) / maxViews) * 100)}%` }}
                    />
                  </div>
                </div>
                <span className="w-20 text-right text-sm font-semibold tabular-nums text-muted">
                  {(a.views || 0).toLocaleString()}
                </span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}