ServerStatus.js

'use client'
import { useState, useEffect, useCallback } from "react"
import { motion } from "framer-motion"
import styles from "./ServerStatus.module.css"

const STATUS_COLORS = {
  online: { dot: "#10b981", glow: "rgba(16, 185, 129, 0.3)", text: "Online" },
  degraded: { dot: "#f59e0b", glow: "rgba(245, 158, 11, 0.3)", text: "Degradado" },
  offline: { dot: "#ef4444", glow: "rgba(239, 68, 68, 0.3)", text: "Offline" },
}

export default function ServerStatus() {
  const [data, setData] = useState(null)
  const [error, setError] = useState(false)
  const [flipped, setFlipped] = useState({})

  const fetchStatus = useCallback(async () => {
    try {
      const res = await fetch("/api/servers")
      const json = await res.json()
      setData(json)
      setError(false)
    } catch {
      setError(true)
    }
  }, [])

  useEffect(() => {
    fetchStatus()
    const interval = setInterval(fetchStatus, 10000)
    return () => clearInterval(interval)
  }, [fetchStatus])

  if (error) {
    return (
      <section id="status" className={styles.section}>
        <div className="container">
          <h2 className="section-title">Status dos Servidores</h2>
          <p className="section-subtitle">Monitoramento em tempo real do cluster GhzHost.</p>
          <div className={styles.placeholder}>
            <div className={styles.placeholderIcon}>⚡</div>
            <p>Conectando ao cluster...</p>
          </div>
        </div>
      </section>
    )
  }

  if (!data) {
    return (
      <section id="status" className={styles.section}>
        <div className="container">
          <h2 className="section-title">Status dos Servidores</h2>
          <p className="section-subtitle">Monitoramento em tempo real do cluster GhzHost.</p>
        </div>
      </section>
    )
  }

  const { servers, timestamp } = data
  const time = new Date(timestamp).toLocaleTimeString("pt-BR")

  return (
    <section id="status" className={styles.section}>
      <div className="container">
        <h2 className="section-title">Status dos Servidores</h2>
        <p className="section-subtitle">
          Monitoramento em tempo real — última atualização: {time}
          <button className={styles.refreshBtn} onClick={fetchStatus} title="Atualizar">
            ↻
          </button>
        </p>
      </div>

      <div className={styles.grid}>
        {servers.map((s, i) => {
          const st = STATUS_COLORS[s.status] || STATUS_COLORS.offline
          const isFlipped = flipped[s.id]

          return (
            <motion.div
              key={s.id}
              className={`glass-card hud-corners ${styles.card} ${isFlipped ? styles.flipped : ""}`}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.1, duration: 0.5 }}
              onClick={() =>
                setFlipped((prev) => ({ ...prev, [s.id]: !prev[s.id] }))
              }
            >
              {!isFlipped ? (
                <div className={styles.front}>
                  <div className={styles.header}>
                    <span
                      className={styles.dot}
                      style={{ background: st.dot, boxShadow: `0 0 8px ${st.glow}` }}
                    />
                    <span className={styles.name}>{s.name}</span>
                    <span
                      className={styles.badge}
                      style={{
                        background: `${st.glow}33`,
                        color: st.dot,
                        borderColor: `${st.glow}55`,
                      }}
                    >
                      {st.text}
                    </span>
                  </div>
                  <div className={styles.metric}>
                    <span className={styles.metricValue}>{s.uptime}</span>
                    <span className={styles.metricLabel}>Uptime</span>
                  </div>
                  <div className={styles.metric}>
                    <span className={styles.metricValue}>{s.load.toFixed(1)}</span>
                    <span className={styles.metricLabel}>Load</span>
                  </div>
                  <div className={styles.metric}>
                    <span className={styles.metricValue}>{s.latency || "—"}</span>
                    <span className={styles.metricLabel}>Latência</span>
                  </div>
                  <div className={styles.footer}>
                    <span className={styles.label}>{s.label}</span>
                    <span className={styles.region}>{s.region}</span>
                  </div>
                </div>
              ) : (
                <div className={styles.back}>
                  <div className={styles.backTitle}>Detalhes do Nó</div>
                  <div className={styles.backRow}>
                    <span>Pods ativos</span>
                    <span>{s.pods}</span>
                  </div>
                  <div className={styles.backRow}>
                    <span>Status</span>
                    <span style={{ color: st.dot }}>{st.text}</span>
                  </div>
                  <div className={styles.backRow}>
                    <span>Uptime</span>
                    <span>{s.uptime}</span>
                  </div>
                  <div className={styles.backRow}>
                    <span>Label</span>
                    <span>{s.label}</span>
                  </div>
                  <div className={styles.backHint}>Toque para voltar</div>
                </div>
              )}
            </motion.div>
          )
        })}
      </div>
    </section>
  )
}