import React, { useState, useEffect } from 'react';

const Dashboard = () => {
  // Estados para armazenar os dados do dashboard
  const [dashboardData, setDashboardData] = useState({
    status: "Ativo",
    chargers: [
      { id: 3, status: "Erro", current: 0, power: 0 },
    ],
    energyConsumed: 0,
    chargingTime: 0,
    alerts: [],
  });

  // Função para obter os dados do dashboard
  const fetchDashboardData = async () => {
    try {
      const response = await fetch('/api/v1/dashboard');
      if (response.ok) {
        const data = await response.json();
        setDashboardData(data); // Atualiza o estado com os dados recebidos
      } else {
        alert('Erro ao obter os dados do dashboard');
      }
    } catch (error) {
      console.error('Erro ao buscar dados do dashboard:', error);
      alert('Erro de conexão');
    }
  };

  // Chamar a função fetchDashboardData quando o componente for montado
  useEffect(() => {
    fetchDashboardData();
  }, []);

  return (
    <div className="max-w-3xl mx-auto p-5">
      <h1 className="text-2xl font-bold mb-5">Visão Geral</h1>

      {/* Cards com informações resumidas */}
      <div className="flex flex-wrap gap-4 mb-6">
        <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
          <h3>Status do Sistema</h3>
          <p>{dashboardData.status}</p>
        </div>
        <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
          <h3>Consumo de Energia</h3>
          <p>{dashboardData.energyConsumed} kWh</p>
        </div>
        <div className="bg-white p-4 rounded shadow flex-1 min-w-[150px]">
          <h3>Tempo de Carregamento</h3>
          <p>{dashboardData.chargingTime} minutos</p>
        </div>
      </div>

      {/* Indicadores de falhas ou alertas */}
      <div className="mb-6">
        <h2 className="text-xl font-semibold mb-2">Alertas</h2>
        <ul>
          {dashboardData.alerts.map((alert, index) => (
            <li key={index} className="p-2 bg-red-500 text-white rounded mb-2">
              <span>⚠️ {alert}</span>
            </li>
          ))}
        </ul>
      </div>

      {/* Tabela de Carregadores */}
      <div>
        <h2 className="text-xl font-semibold mb-2">Carregadores</h2>
        <table className="min-w-full border border-gray-300 text-left">
          <thead>
            <tr>
              <th className="border-b p-2">ID</th>
              <th className="border-b p-2">Status</th>
              <th className="border-b p-2">Corrente (A)</th>
              <th className="border-b p-2">Potência (W)</th>
            </tr>
          </thead>
          <tbody>
            {dashboardData.chargers.map((charger) => (
              <tr key={charger.id}>
                <td className="border-b p-2">{charger.id}</td>
                <td className="border-b p-2">{charger.status}</td>
                <td className="border-b p-2">{charger.current}</td>
                <td className="border-b p-2">{charger.power}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default Dashboard;