'use client';

import React from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { FiUsers, FiTv, FiFilm, FiMonitor, FiActivity, FiPlus, FiArrowRight } from 'react-icons/fi';
import StatsCard from '@/components/admin/StatsCard';
import Badge from '@/components/ui/Badge';
import Button from '@/components/ui/Button';
import { formatRelativeTime } from '@/lib/utils';
import { ROUTES } from '@/lib/constants';

const mockActivity = [
  { id: '1', type: 'user_login' as const, description: 'Carlos Mendoza inició sesión', timestamp: '2024-03-20T10:30:00Z', username: 'carlos.m' },
  { id: '2', type: 'content_added' as const, description: 'Nueva película: "Tormenta de Fuego" agregada', timestamp: '2024-03-20T09:15:00Z' },
  { id: '3', type: 'user_registered' as const, description: 'Nuevo usuario registrado: ana.torres@email.com', timestamp: '2024-03-20T08:45:00Z' },
  { id: '4', type: 'content_updated' as const, description: 'Canal "ESPN" actualizado', timestamp: '2024-03-19T21:30:00Z' },
  { id: '5', type: 'user_login' as const, description: 'Sofía Vega inició sesión', timestamp: '2024-03-19T20:00:00Z', username: 'sofia.v' },
  { id: '6', type: 'content_added' as const, description: 'Nueva serie: "Código Negro" T2 agregada', timestamp: '2024-03-19T18:30:00Z' },
];

const activityIcons: Record<string, { icon: string; color: string }> = {
  user_login: { icon: '🟢', color: 'text-green-400' },
  content_added: { icon: '🎬', color: 'text-accent' },
  user_registered: { icon: '👤', color: 'text-primary' },
  content_updated: { icon: '✏️', color: 'text-yellow-400' },
};

export default function AdminDashboard() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        className="flex items-center justify-between flex-wrap gap-4"
      >
        <div>
          <h1 className="text-2xl md:text-3xl font-bold text-white">⚡ Dashboard</h1>
          <p className="text-white/40 text-sm mt-1">Panel de administración de Cat Tv</p>
        </div>
        <div className="flex items-center gap-2">
          <Badge variant="success" size="md">
            <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" />
            Sistema Operativo
          </Badge>
        </div>
      </motion.div>

      {/* Stats cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
        <StatsCard
          icon={<FiUsers size={22} />}
          value="1,247"
          label="Usuarios Totales"
          trend={{ value: 12, label: 'vs. mes anterior' }}
          color="primary"
        />
        <StatsCard
          icon={<FiTv size={22} />}
          value="86"
          label="Canales Activos"
          trend={{ value: 3, label: 'nuevos este mes' }}
          color="accent"
        />
        <StatsCard
          icon={<FiFilm size={22} />}
          value="342"
          label="Películas"
          trend={{ value: 8, label: 'añadidas esta semana' }}
          color="warning"
        />
        <StatsCard
          icon={<FiMonitor size={22} />}
          value="89"
          label="Series"
          trend={{ value: 5, label: 'actualizadas' }}
          color="success"
        />
        <StatsCard
          icon={<FiActivity size={22} />}
          value="234"
          label="Usuarios en Línea"
          trend={{ value: 18, label: 'vs. ayer' }}
          color="primary"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Recent activity */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="lg:col-span-2 glass-card p-6 rounded-xl"
        >
          <div className="flex items-center justify-between mb-5">
            <h2 className="text-lg font-bold text-white">Actividad Reciente</h2>
            <Link href={ROUTES.ADMIN_STATS} className="text-sm text-accent hover:text-accent-hover transition-colors flex items-center gap-1">
              Ver todo <FiArrowRight size={14} />
            </Link>
          </div>
          <div className="space-y-3">
            {mockActivity.map((item) => {
              const info = activityIcons[item.type] || activityIcons.user_login;
              return (
                <div
                  key={item.id}
                  className="flex items-center gap-3 p-3 bg-white/[0.03] rounded-lg hover:bg-white/[0.06] transition-colors"
                >
                  <span className="text-lg">{info.icon}</span>
                  <div className="flex-1 min-w-0">
                    <p className="text-sm text-white/80 truncate">{item.description}</p>
                    <p className="text-xs text-white/30 mt-0.5">{formatRelativeTime(item.timestamp)}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </motion.div>

        {/* Quick actions */}
        <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-5">Acciones Rápidas</h2>
          <div className="space-y-3">
            <Link href={ROUTES.ADMIN_USERS}>
              <Button variant="secondary" fullWidth icon={<FiPlus size={16} />} className="justify-start">
                Crear Usuario
              </Button>
            </Link>
            <Link href={ROUTES.ADMIN_CHANNELS}>
              <Button variant="secondary" fullWidth icon={<FiPlus size={16} />} className="justify-start">
                Agregar Canal
              </Button>
            </Link>
            <Link href={ROUTES.ADMIN_CONTENT}>
              <Button variant="secondary" fullWidth icon={<FiPlus size={16} />} className="justify-start">
                Agregar Película
              </Button>
            </Link>
            <Link href={ROUTES.ADMIN_CONTENT}>
              <Button variant="secondary" fullWidth icon={<FiPlus size={16} />} className="justify-start">
                Agregar Serie
              </Button>
            </Link>
            <Link href={ROUTES.ADMIN_STATS}>
              <Button variant="ghost" fullWidth icon={<FiActivity size={16} />} className="justify-start">
                Ver Estadísticas
              </Button>
            </Link>
          </div>
        </motion.div>
      </div>
    </div>
  );
}
