'use client';

import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import {
  FiHome, FiUsers, FiFilm, FiTv, FiBarChart2,
  FiArrowLeft, FiSettings, FiDatabase,
} from 'react-icons/fi';
import { cn } from '@/lib/utils';
import { ROUTES } from '@/lib/constants';

const adminLinks = [
  { href: ROUTES.ADMIN, label: 'Dashboard', icon: FiHome, exact: true },
  { href: ROUTES.ADMIN_USERS, label: 'Usuarios', icon: FiUsers },
  { href: ROUTES.ADMIN_CONTENT, label: 'Contenido', icon: FiFilm },
  { href: ROUTES.ADMIN_CHANNELS, label: 'Canales', icon: FiTv },
  { href: ROUTES.ADMIN_STATS, label: 'Estadísticas', icon: FiBarChart2 },
];

export default function AdminSidebar() {
  const pathname = usePathname();

  return (
    <aside className="fixed top-16 left-0 h-[calc(100vh-4rem)] w-64 bg-sidebar-gradient border-r border-white/5 z-30 hidden lg:block">
      <div className="p-4">
        {/* Back to app */}
        <Link
          href={ROUTES.HOME}
          className="flex items-center gap-2 px-3 py-2.5 rounded-lg text-white/50 hover:text-white hover:bg-white/5 transition-all mb-4"
        >
          <FiArrowLeft size={18} />
          <span className="text-sm font-medium">Volver a la App</span>
        </Link>

        {/* Admin header */}
        <div className="flex items-center gap-3 px-3 py-3 mb-4">
          <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-accent to-primary/50 flex items-center justify-center">
            <FiSettings size={20} className="text-white" />
          </div>
          <div>
            <p className="text-sm font-bold text-white">Admin Panel</p>
            <p className="text-xs text-white/40">Cat Tv</p>
          </div>
        </div>

        <div className="border-t border-white/5 mb-3" />

        {/* Navigation */}
        <nav className="space-y-1">
          {adminLinks.map((link) => {
            const isActive = link.exact
              ? pathname === link.href
              : pathname === link.href || pathname?.startsWith(link.href + '/');
            const Icon = link.icon;
            return (
              <Link
                key={link.href}
                href={link.href}
                className={cn(
                  'flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-300',
                  isActive
                    ? 'text-white bg-accent/10 border-l-2 border-accent shadow-sm shadow-accent/10'
                    : 'text-white/50 hover:text-white hover:bg-white/5'
                )}
              >
                <Icon size={20} className={cn(isActive && 'text-accent')} />
                <span className="font-medium text-sm">{link.label}</span>
              </Link>
            );
          })}
        </nav>

        {/* System info */}
        <div className="absolute bottom-4 left-4 right-4">
          <div className="glass-card p-3 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <FiDatabase size={14} className="text-accent" />
              <span className="text-xs text-white/40">Sistema</span>
            </div>
            <p className="text-xs text-white/60">Cat Tv v1.0.0</p>
            <p className="text-xs text-white/40 mt-0.5">Backend: localhost:3001</p>
          </div>
        </div>
      </div>
    </aside>
  );
}
