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

const API_BASE = 'http://localhost:8000/api';

function Dashboard() {
  const [lobsters, setLobsters] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchLobsters();
    const interval = setInterval(fetchLobsters, 5000);
    return () => clearInterval(interval);
  }, []);

  const fetchLobsters = async () => {
    try {
      const response = await axios.get(`${API_BASE}/lobsters/`);
      setLobsters(response.data);
      setLoading(false);
    } catch (error) {
      console.error('获取龙虾状态失败:', error);
    }
  };

  if (loading) {
    return <div className="loading">加载中...</div>;
  }

  return (
    <div className="dashboard">
      <h1>🦞 龙虾舰队监控中心</h1>
      <div className="lobster-grid">
        {lobsters.map(lobster => (
          <div key={lobster.id} className="lobster-card">
            <div className="lobster-header">
              <span className="lobster-name">{lobster.emoji} {lobster.name}</span>
              <span className={`status status-${lobster.status}`}>{lobster.status}</span>
            </div>
            <div className="lobster-info">
              <p>专长：{lobster.specialty}</p>
              <p>端口：{lobster.port}</p>
              <p>容器：{lobster.container}</p>
            </div>
            <div className="lobster-actions">
              <button onClick={() => window.location.href = `/lobster/${lobster.id}`}>
                📊 详情
              </button>
              <button onClick={() => window.location.href = `/lobster/${lobster.id}/memory`}>
                🧠 记忆
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Dashboard;