import { useEffect, useState } from "react";

type Status = Record<string, unknown>;

export default function App() {
  const [status, setStatus] = useState<Status | null>(null);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    fetch("/api/v1/status")
      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(String(r.status)))))
      .then(setStatus)
      .catch((e) => setErr(String(e)));
  }, []);

  return (
    <div style={{ fontFamily: "system-ui", padding: "2rem", maxWidth: 640 }}>
      <h1>onGuard24</h1>
      <p>Модульный монолит: API на FastAPI, модули — заглушки.</p>
      <h2>Статус</h2>
      {err && <p style={{ color: "crimson" }}>Ошибка: {err}</p>}
      {status && (
        <pre style={{ background: "#f4f4f5", padding: "1rem", borderRadius: 8 }}>
          {JSON.stringify(status, null, 2)}
        </pre>
      )}
      <p style={{ marginTop: "2rem", color: "#666" }}>
        Бэкенд: <code>uvicorn onguard24.main:app --port 8080</code>
      </p>
    </div>
  );
}