import React, { useState, useEffect } from 'react';
import { getAdminStats } from '../../services/pocketbaseService';
import { FaUsers, FaFilm, FaComment, FaHeadset, FaLightbulb, FaBell, FaTachometerAlt } from 'react-icons/fa';
import NotificationManager from '../../components/admin/NotificationManager';

const AdminDashboard = () => {
  const [stats, setStats] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [activeTab, setActiveTab] = useState('dashboard');

  useEffect(() => {
    const loadStats = async () => {
      try {
        const data = await getAdminStats();
        setStats(data);
      } catch (err) {
        setError('Не удалось загрузить статистику');
        console.error('Error loading stats:', err);
      } finally {
        setLoading(false);
      }
    };

    loadStats();
  }, []);

  if (loading) {
    return (
      <div className="container-custom pt-8 text-campfire-light">
        <div className="flex justify-center items-center h-64">
          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-campfire-amber"></div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="container-custom pt-8 text-campfire-light">
        <div className="bg-status-error/20 text-status-error p-4 rounded-lg text-center">
          {error}
        </div>
      </div>
    );
  }

  return (
    <div className="container-custom pt-8 text-campfire-light">
      <h1 className="text-3xl font-bold mb-6">Административная панель</h1>
      <p className="text-campfire-ash mb-8">Добро пожаловать в административную панель CampFire Critics.</p>

      {/* Tabs */}
      <div className="flex space-x-4 mb-6">
        <button
          onClick={() => setActiveTab('dashboard')}
          className={`px-4 py-2 rounded-md flex items-center space-x-2 ${
            activeTab === 'dashboard' ? 'bg-campfire-amber text-campfire-dark' : 'bg-campfire-charcoal text-campfire-light'
          }`}
        >
          <FaTachometerAlt />
          <span>Обзор</span>
        </button>
        <button
          onClick={() => setActiveTab('notifications')}
          className={`px-4 py-2 rounded-md flex items-center space-x-2 ${
            activeTab === 'notifications' ? 'bg-campfire-amber text-campfire-dark' : 'bg-campfire-charcoal text-campfire-light'
          }`}
        >
          <FaBell />
          <span>Уведомления</span>
        </button>
      </div>
      
      {activeTab === 'dashboard' && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
            <div className="flex items-center space-x-4 mb-4">
              <div className="bg-campfire-amber/20 p-3 rounded-lg">
                <FaUsers className="text-campfire-amber text-2xl" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-campfire-light">Пользователи</h3>
                <p className="text-3xl font-bold text-campfire-amber">{stats?.users || 0}</p>
              </div>
            </div>
          </div>

          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
            <div className="flex items-center space-x-4 mb-4">
              <div className="bg-campfire-amber/20 p-3 rounded-lg">
                <FaFilm className="text-campfire-amber text-2xl" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-campfire-light">Медиа</h3>
                <p className="text-3xl font-bold text-campfire-amber">{stats?.media || 0}</p>
              </div>
            </div>
          </div>

          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
            <div className="flex items-center space-x-4 mb-4">
              <div className="bg-campfire-amber/20 p-3 rounded-lg">
                <FaComment className="text-campfire-amber text-2xl" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-campfire-light">Обзоры</h3>
                <p className="text-3xl font-bold text-campfire-amber">{stats?.reviews || 0}</p>
              </div>
            </div>
          </div>

          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
            <div className="flex items-center space-x-4 mb-4">
              <div className="bg-campfire-amber/20 p-3 rounded-lg">
                <FaHeadset className="text-campfire-amber text-2xl" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-campfire-light">Тикеты</h3>
                <p className="text-3xl font-bold text-campfire-amber">{stats?.tickets || 0}</p>
              </div>
            </div>
          </div>

          <div className="bg-campfire-charcoal p-6 rounded-lg shadow-md border border-campfire-ash/20">
            <div className="flex items-center space-x-4 mb-4">
              <div className="bg-campfire-amber/20 p-3 rounded-lg">
                <FaLightbulb className="text-campfire-amber text-2xl" />
              </div>
              <div>
                <h3 className="text-xl font-semibold text-campfire-light">Предложения</h3>
                <p className="text-3xl font-bold text-campfire-amber">{stats?.suggestions || 0}</p>
              </div>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'notifications' && (
        <div className="space-y-6">
          <NotificationManager />
        </div>
      )}
    </div>
  );
};

export default AdminDashboard;
