import { useState, useEffect } from 'react'
import './App.css'

interface APIInfo {
  platform?: string;
  version?: string;
  features?: string[];
  tech_stack?: any;
}

function App() {
  const [apiInfo, setApiInfo] = useState<APIInfo | null>(null)
  const [health, setHealth] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // Проверяем подключение к API
    Promise.all([
      fetch('http://147.45.146.17:8100/api/v1/info').then(r => r.json()),
      fetch('http://147.45.146.17:8100/health').then(r => r.json())
    ])
    .then(([info, healthData]) => {
      setApiInfo(info)
      setHealth(healthData)
      setLoading(false)
    })
    .catch(err => {
      console.error('API Error:', err)
      setLoading(false)
    })
  }, [])

  return (
    <div className="app">
      <header className="app-header">
        <h1>🚀 ERV Insurance Platform</h1>
        <p>Python FastAPI + React TypeScript</p>
      </header>

      <main className="app-main">
        {loading ? (
          <div className="loading">⏳ Подключение к API...</div>
        ) : (
          <>
            <div className="card">
              <h2>📊 Информация о платформе</h2>
              {apiInfo ? (
                <>
                  <p><strong>Платформа:</strong> {apiInfo.platform}</p>
                  <p><strong>Версия:</strong> {apiInfo.version}</p>
                  
                  <h3>✨ Возможности:</h3>
                  <ul>
                    {apiInfo.features?.map((f, i) => (
                      <li key={i}>{f}</li>
                    ))}
                  </ul>

                  <h3>🛠️ Технологический стек:</h3>
                  <pre>{JSON.stringify(apiInfo.tech_stack, null, 2)}</pre>
                </>
              ) : (
                <p className="error">❌ Не удалось получить данные</p>
              )}
            </div>

            <div className="card">
              <h2>🏥 Здоровье сервисов</h2>
              {health ? (
                <>
                  <p className={health.status === 'healthy' ? 'success' : 'warning'}>
                    Статус: <strong>{health.status}</strong>
                  </p>
                  
                  <h3>Сервисы:</h3>
                  <ul className="services">
                    {Object.entries(health.services || {}).map(([name, status]) => (
                      <li key={name}>
                        <span className={status === 'ok' ? 'status-ok' : 'status-error'}>
                          {status === 'ok' ? '✅' : '❌'}
                        </span>
                        <strong>{name}:</strong> {String(status)}
                      </li>
                    ))}
                  </ul>
                </>
              ) : (
                <p className="error">❌ Health check недоступен</p>
              )}
            </div>

            <div className="card">
              <h2>🔗 Полезные ссылки</h2>
              <ul>
                <li>
                  <a href="http://147.45.146.17:8100/docs" target="_blank">
                    📚 API Документация (Swagger UI)
                  </a>
                </li>
                <li>
                  <a href="http://147.45.146.17:8100/health" target="_blank">
                    🏥 Health Check
                  </a>
                </li>
                <li>
                  <a href="http://147.45.146.17:3002" target="_blank">
                    🐙 Gitea (Git репозиторий)
                  </a>
                </li>
              </ul>
            </div>
          </>
        )}
      </main>

      <footer className="app-footer">
        <p>© 2025 ERV Insurance Platform | Powered by FastAPI + React</p>
      </footer>
    </div>
  )
}

export default App