import { useEffect, useState } from 'react'
import { apiBaseUrl, apiFetch } from './api/client'
import './App.css'

type InfoResponse = {
  name: string
  version: string
  environment: string
  timestamp: string
}

function App() {
  const [info, setInfo] = useState<InfoResponse | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    apiFetch<InfoResponse>('/v1/info')
      .then(setInfo)
      .catch((err: unknown) =>
        setError(err instanceof Error ? err.message : 'Unknown error'),
      )
      .finally(() => setLoading(false))
  }, [])

  return (
    <div className="app">
      <header className="app__header">
        <h1>React + .NET Starter</h1>
        <p>A minimal monorepo skeleton for new projects.</p>
      </header>

      <section className="app__section">
        <h2>Frontend</h2>
        <p>
          Vite + React + TypeScript running on port 3000. Extend{' '}
          <code>src/App.tsx</code> to begin building your application.
        </p>
      </section>

      <section className="app__section app__section--api">
        <h2>Backend API</h2>
        <p>
          Requests go to <code>{apiBaseUrl}</code> via{' '}
          <code>VITE_API_BASE_URL</code>.
        </p>

        {loading && <p className="app__status app__status--loading">Checking API…</p>}
        {error && (
          <p className="app__status app__status--error">
            Unable to reach API: {error}
          </p>
        )}
        {info && (
          <dl className="app__info">
            <div>
              <dt>Status</dt>
              <dd className="app__status app__status--ok">Connected</dd>
            </div>
            <div>
              <dt>Name</dt>
              <dd>{info.name}</dd>
            </div>
            <div>
              <dt>Version</dt>
              <dd>{info.version}</dd>
            </div>
            <div>
              <dt>Environment</dt>
              <dd>{info.environment}</dd>
            </div>
            <div>
              <dt>Server time (UTC)</dt>
              <dd>{new Date(info.timestamp).toISOString()}</dd>
            </div>
          </dl>
        )}
      </section>
    </div>
  )
}

export default App