import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { api } from '../services/api';
import { Server, MessageSquare, Users, Activity } from 'lucide-react';

function Dashboard() {
  const [stats, setStats] = useState({
    totalServers: 0,
    totalMessages: 0,
    totalUsers: 0,
    botStatus: 'online'
  });
  const [recentActivity, setRecentActivity] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadDashboardData();
  }, []);

  const loadDashboardData = async () => {
    try {
      // Mock data - w prawdziwej aplikacji pobierz z API
      setStats({
        totalServers: 5,
        totalMessages: 23,
        totalUsers: 1,
        botStatus: 'online'
      });

      setRecentActivity([
        {
          id: 1,
          type: 'message_updated',
          server: 'Test Server',
          timestamp: new Date(),
          description: 'Zaktualizowano wiadomość powitalną'
        },
        {
          id: 2,
          type: 'channel_configured',
          server: 'Test Server',
          timestamp: new Date(Date.now() - 3600000),
          description: 'Skonfigurowano kanał #witamy'
        }
      ]);
    } catch (error) {
      console.error('Error loading dashboard data:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <div className="loading">Ładowanie dashboard...</div>;
  }

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Dashboard</h1>
        <p className="text-gray-600">
          Przegląd stanu bota i ostatnich aktywności
        </p>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div className="discord-card">
          <div className="flex items-center">
            <div className="p-3 bg-blue-100 rounded-lg mr-4">
              <Server className="text-blue-600" size={24} />
            </div>
            <div>
              <p className="text-sm text-gray-600">Serwery</p>
              <p className="text-2xl font-bold text-gray-900">{stats.totalServers}</p>
            </div>
          </div>
        </div>

        <div className="discord-card">
          <div className="flex items-center">
            <div className="p-3 bg-green-100 rounded-lg mr-4">
              <MessageSquare className="text-green-600" size={24} />
            </div>
            <div>
              <p className="text-sm text-gray-600">Wiadomości</p>
              <p className="text-2xl font-bold text-gray-900">{stats.totalMessages}</p>
            </div>
          </div>
        </div>

        <div className="discord-card">
          <div className="flex items-center">
            <div className="p-3 bg-purple-100 rounded-lg mr-4">
              <Users className="text-purple-600" size={24} />
            </div>
            <div>
              <p className="text-sm text-gray-600">Użytkownicy</p>
              <p className="text-2xl font-bold text-gray-900">{stats.totalUsers}</p>
            </div>
          </div>
        </div>

        <div className="discord-card">
          <div className="flex items-center">
            <div className="p-3 bg-yellow-100 rounded-lg mr-4">
              <Activity className="text-yellow-600" size={24} />
            </div>
            <div>
              <p className="text-sm text-gray-600">Status Bota</p>
              <div className="flex items-center">
                <div className={`w-3 h-3 rounded-full mr-2 ${
                  stats.botStatus === 'online' ? 'bg-green-500' : 'bg-red-500'
                }`}></div>
                <p className="text-lg font-semibold text-gray-900 capitalize">
                  {stats.botStatus === 'online' ? 'Online' : 'Offline'}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Quick Actions */}
        <div className="discord-card">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">Szybkie akcje</h3>
          <div className="space-y-3">
            <Link
              to="/servers"
              className="block p-3 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 transition-colors"
            >
              <div className="flex items-center">
                <Server className="text-blue-600 mr-3" size={20} />
                <div>
                  <p className="font-medium text-gray-900">Zarządzaj serwerami</p>
                  <p className="text-sm text-gray-600">Konfiguruj kanały i wiadomości</p>
                </div>
              </div>
            </Link>

            <div className="block p-3 border border-gray-200 rounded-lg bg-gray-50">
              <div className="flex items-center">
                <MessageSquare className="text-gray-400 mr-3" size={20} />
                <div>
                  <p className="font-medium text-gray-500">Szablony wiadomości</p>
                  <p className="text-sm text-gray-400">Wkrótce dostępne</p>
                </div>
              </div>
            </div>

            <div className="block p-3 border border-gray-200 rounded-lg bg-gray-50">
              <div className="flex items-center">
                <Activity className="text-gray-400 mr-3" size={20} />
                <div>
                  <p className="font-medium text-gray-500">Statystyki</p>
                  <p className="text-sm text-gray-400">Wkrótce dostępne</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Recent Activity */}
        <div className="discord-card">
          <h3 className="text-lg font-semibold text-gray-900 mb-4">Ostatnia aktywność</h3>
          <div className="space-y-3">
            {recentActivity.length > 0 ? (
              recentActivity.map((activity) => (
                <div key={activity.id} className="flex items-start p-3 bg-gray-50 rounded-lg">
                  <div className="w-2 h-2 bg-blue-500 rounded-full mt-2 mr-3"></div>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-gray-900">
                      {activity.description}
                    </p>
                    <p className="text-xs text-gray-600">
                      {activity.server} • {activity.timestamp.toLocaleString('pl-PL')}
                    </p>
                  </div>
                </div>
              ))
            ) : (
              <p className="text-gray-500 text-center py-4">
                Brak ostatnich aktywności
              </p>
            )}
          </div>
        </div>
      </div>

      {/* Bot Info */}
      <div className="discord-card mt-6">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Informacje o bocie</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <p className="text-sm text-gray-600">Wersja</p>
            <p className="font-medium">1.0.0</p>
          </div>
          <div>
            <p className="text-sm text-gray-600">Czas działania</p>
            <p className="font-medium">99.5%</p>
          </div>
          <div>
            <p className="text-sm text-gray-600">Ostatnia aktualizacja</p>
            <p className="font-medium">Dzisiaj</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Dashboard;