import React, { useState, useEffect } from "react";
import "../Style/SystemStatusTable.css";
import axios from "axios";

const SystemStatusTableSoftware = () => {
  const [systemData, setSystemData] = useState([]);
  const [expandedRow, setExpandedRow] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Загрузка данных с бэкенда
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("/TrustSoftware.json"); // Укажите ваш endpoint
        setSystemData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  // Обработчик для кнопки "Подробнее"
  const handleDetailsClick = (id) => {
    setExpandedRow(expandedRow === id ? null : id);
  };

  if (loading) {
    return <p>Загрузка данных...</p>;
  }

  if (error) {
    return <p>Ошибка: {error}</p>;
  }

  return (
    <table>
        <caption>
    <h2>Состояние ПО</h2>
  </caption>
      <thead>
        <tr>
          <th>Метрика</th>
          <th>Значение</th>
          <th>Статус</th>
          <th>Детали</th>
        </tr>
      </thead>
      <tbody>
        {systemData.map((item) => (
          <React.Fragment key={item.id}>
            <tr>
              <td>{item.name}</td>
              <td>{item.value}%</td>
              <td>
                <span className={`status ${item.status}`}>{item.status}</span>
              </td>
              <td>
                <button onClick={() => handleDetailsClick(item.id)}>
                  {expandedRow === item.id ? "Скрыть" : "Подробнее"}
                </button>
              </td>
            </tr>
            {expandedRow === item.id && (
              <tr>
                <td colSpan="4">
                  <div className="details">
                    <p>{item.details}</p>
                  </div>
                </td>
              </tr>
            )}
          </React.Fragment>
        ))}
      </tbody>
    </table>
  );
};

export default SystemStatusTableSoftware;