import React from 'react';
import { Line, Pie } from 'react-chartjs-2';
import 'chart.js/auto';

function Dashboard({ equipment, maintenanceEvents }) {
  const stats = {
    total: equipment?.length || 0,
    active: equipment?.filter(e => e.status === 'active').length || 0,
    maintenance: equipment?.filter(e => e.status === 'maintenance').length || 0,
    repair: equipment?.filter(e => e.status === 'repair').length || 0
  };

  const chartData = {
    labels: ['Активно', 'ТО', 'Ремонт'],
    datasets: [{
      data: [stats.active, stats.maintenance, stats.repair],
      backgroundColor: ['#10B981', '#F59E0B', '#EF4444'],
      borderWidth: 0
    }]
  };

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'bottom',
      }
    }
  };

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
          <h4 className="font-medium text-gray-500">Всего оборудования</h4>
          <p className="text-2xl font-bold">{stats.total}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
          <h4 className="font-medium text-gray-500">Активно</h4>
          <p className="text-2xl font-bold">{stats.active}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
          <h4 className="font-medium text-gray-500">На ТО</h4>
          <p className="text-2xl font-bold">{stats.maintenance}</p>
        </div>
        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-red-500">
          <h4 className="font-medium text-gray-500">В ремонте</h4>
          <p className="text-2xl font-bold">{stats.repair}</p>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold mb-4">Статус оборудования</h3>
          <div className="h-64">
            <Pie data={chartData} options={chartOptions} />
          </div>
        </div>
        <div className="bg-white rounded-lg shadow p-6">
          <h3 className="text-lg font-semibold mb-4">Последние события</h3>
          <div className="space-y-4">
            {maintenanceEvents?.slice(0, 5).map(event => (
              <div key={event.id} className="flex items-center justify-between border-b pb-2">
                <div>
                  <p className="font-medium">{equipment?.find(e => e.id === event.equipment_id)?.name}</p>
                  <p className="text-sm text-gray-500">{new Date(event.date).toLocaleDateString()}</p>
                </div>
                <span className={`px-2 py-1 rounded-full text-xs font-semibold ${
                  event.status === 'completed' ? 'bg-green-100 text-green-800' :
                  event.status === 'planned' ? 'bg-blue-100 text-blue-800' :
                  'bg-yellow-100 text-yellow-800'
                }`}>
                  {event.status}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Dashboard;