'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { FiTrendingUp, FiEye, FiUsers, FiClock } from 'react-icons/fi';
import StatsCard from '@/components/admin/StatsCard';

const categoryData = [
  { name: 'Acción', value: 85, color: '#E6007A' },
  { name: 'Drama', value: 72, color: '#00d4ff' },
  { name: 'Comedia', value: 58, color: '#22c55e' },
  { name: 'Thriller', value: 45, color: '#eab308' },
  { name: 'Sci-Fi', value: 38, color: '#a855f7' },
  { name: 'Romance', value: 32, color: '#ec4899' },
  { name: 'Horror', value: 25, color: '#f97316' },
  { name: 'Animación', value: 20, color: '#06b6d4' },
];

const mostWatched = [
  { rank: 1, title: 'Los Herederos', type: 'Serie', views: 89000, trend: 12 },
  { rank: 2, title: 'El Último Horizonte', type: 'Película', views: 67800, trend: 8 },
  { rank: 3, title: 'Reinos Olvidados', type: 'Serie', views: 56700, trend: -3 },
  { rank: 4, title: 'Cuentos de Luna', type: 'Película', views: 52100, trend: 15 },
  { rank: 5, title: 'Sombras de Guerra', type: 'Serie', views: 48300, trend: 5 },
  { rank: 6, title: 'Mundos Paralelos', type: 'Serie', views: 45200, trend: -1 },
  { rank: 7, title: 'El Último Horizonte', type: 'Película', views: 45230, trend: 20 },
  { rank: 8, title: 'El Protocolo', type: 'Película', views: 41200, trend: 7 },
  { rank: 9, title: 'Tormenta de Fuego', type: 'Película', views: 34500, trend: 3 },
  { rank: 10, title: 'Noches de Cristal', type: 'Película', views: 32100, trend: -5 },
];

const weeklyViews = [
  { day: 'Lun', views: 12500 },
  { day: 'Mar', views: 15200 },
  { day: 'Mié', views: 13800 },
  { day: 'Jue', views: 16400 },
  { day: 'Vie', views: 21000 },
  { day: 'Sáb', views: 28500 },
  { day: 'Dom', views: 25800 },
];

const maxWeeklyViews = Math.max(...weeklyViews.map(d => d.views));

export default function AdminStatsPage() {
  const maxCategoryValue = Math.max(...categoryData.map(c => c.value));

  return (
    <div className="space-y-6">
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
      >
        <h1 className="text-2xl md:text-3xl font-bold text-white">📊 Estadísticas</h1>
        <p className="text-white/40 text-sm mt-1">Análisis de uso y contenido de la plataforma</p>
      </motion.div>

      {/* Overview stats */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <StatsCard icon={<FiEye size={22} />} value="156,200" label="Vistas Totales (mes)" trend={{ value: 18, label: 'vs. mes anterior' }} color="primary" />
        <StatsCard icon={<FiUsers size={22} />} value="892" label="Usuarios Activos" trend={{ value: 5, label: 'vs. semana anterior' }} color="accent" />
        <StatsCard icon={<FiClock size={22} />} value="2.4h" label="Tiempo Promedio" trend={{ value: 12, label: 'por usuario' }} color="success" />
        <StatsCard icon={<FiTrendingUp size={22} />} value="94.2%" label="Uptime del Servidor" trend={{ value: 0.3, label: 'mejora' }} color="warning" />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Weekly views chart */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="glass-card p-6 rounded-xl"
        >
          <h2 className="text-lg font-bold text-white mb-6">📈 Vistas Semanales</h2>
          <div className="flex items-end justify-between gap-2 h-48">
            {weeklyViews.map((item, idx) => (
              <motion.div
                key={item.day}
                initial={{ height: 0 }}
                animate={{ height: `${(item.views / maxWeeklyViews) * 100}%` }}
                transition={{ delay: idx * 0.1, duration: 0.5 }}
                className="flex-1 flex flex-col items-center justify-end gap-2"
              >
                <span className="text-xs text-white/40 font-medium">
                  {(item.views / 1000).toFixed(1)}K
                </span>
                <div
                  className="w-full rounded-t-lg bg-gradient-to-t from-primary to-primary/50 hover:from-primary hover:to-primary/70 transition-colors cursor-pointer relative group"
                  style={{ height: '100%', minHeight: '8px' }}
                >
                  <div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-dark-300 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
                    {item.views.toLocaleString()} vistas
                  </div>
                </div>
                <span className="text-xs text-white/50 font-medium">{item.day}</span>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* Category distribution */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="glass-card p-6 rounded-xl"
        >
          <h2 className="text-lg font-bold text-white mb-6">📁 Distribución por Categoría</h2>
          <div className="space-y-4">
            {categoryData.map((cat, idx) => (
              <motion.div
                key={cat.name}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: idx * 0.05 }}
              >
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-sm text-white/80 font-medium">{cat.name}</span>
                  <span className="text-sm text-white/40">{cat.value} títulos</span>
                </div>
                <div className="w-full h-2.5 bg-white/5 rounded-full overflow-hidden">
                  <motion.div
                    initial={{ width: 0 }}
                    animate={{ width: `${(cat.value / maxCategoryValue) * 100}%` }}
                    transition={{ delay: idx * 0.05 + 0.3, duration: 0.6 }}
                    className="h-full rounded-full"
                    style={{ backgroundColor: cat.color }}
                  />
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>

      {/* Most watched content */}
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3 }}
        className="glass-card p-6 rounded-xl"
      >
        <h2 className="text-lg font-bold text-white mb-6">🏆 Contenido Más Visto</h2>
        <div className="overflow-x-auto">
          <table className="admin-table">
            <thead>
              <tr>
                <th className="w-12">#</th>
                <th>Título</th>
                <th>Tipo</th>
                <th>Vistas</th>
                <th>Tendencia</th>
              </tr>
            </thead>
            <tbody>
              {mostWatched.map((item, idx) => (
                <motion.tr
                  key={item.rank}
                  initial={{ opacity: 0, x: -10 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: idx * 0.04 }}
                >
                  <td>
                    <span className={`text-lg font-bold ${item.rank <= 3 ? 'text-primary' : 'text-white/30'}`}>
                      {item.rank}
                    </span>
                  </td>
                  <td className="text-white font-medium">{item.title}</td>
                  <td>
                    <span className={`badge text-xs ${item.type === 'Serie' ? 'badge-accent' : 'badge-primary'}`}>
                      {item.type}
                    </span>
                  </td>
                  <td className="text-white/60">{item.views.toLocaleString()}</td>
                  <td>
                    <span className={`flex items-center gap-1 text-sm font-medium ${item.trend > 0 ? 'text-green-400' : item.trend < 0 ? 'text-red-400' : 'text-white/40'}`}>
                      {item.trend > 0 ? '↑' : item.trend < 0 ? '↓' : '→'}
                      {Math.abs(item.trend)}%
                    </span>
                  </td>
                </motion.tr>
              ))}
            </tbody>
          </table>
        </div>
      </motion.div>
    </div>
  );
}
