import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './Statistics.css';

const Statistics = () => {
  const [stats, setStats] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchStatistics();
  }, []);

  const fetchStatistics = async () => {
    setLoading(true);
    try {
      const response = await axios.get('/api/v1/stats/summary');
      setStats(response.data);
      setError(null);
    } catch (err) {
      setError('Ошибка загрузки статистики');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  if (loading) return <div className="loading-state">Загрузка...</div>;
  if (error) return <div className="error-state">{error}</div>;
  if (!stats) return <div className="error-state">Нет данных</div>;

  return (
    <div className="statistics">
      <div className="stats-header">
        <h1>Статистика</h1>
        <button className="btn-primary" onClick={fetchStatistics}>
          🔄 Обновить
        </button>
      </div>

      <div className="stats-grid">
        {/* Общая статистика */}
        <div className="stat-card">
          <h3>Всего карточек</h3>
          <div className="stat-value">{stats.total_cases || 0}</div>
        </div>

        {/* По полу */}
        <div className="stat-card">
          <h3>По полу</h3>
          <div className="stat-breakdown">
            <div className="stat-item">
              <span>Мужской:</span>
              <strong>{stats.by_gender?.male || 0}</strong>
            </div>
            <div className="stat-item">
              <span>Женский:</span>
              <strong>{stats.by_gender?.female || 0}</strong>
            </div>
          </div>
        </div>

        {/* По возрасту */}
        <div className="stat-card">
          <h3>По возрасту</h3>
          <div className="stat-breakdown">
            {stats.by_age && Object.entries(stats.by_age).map(([range, count]) => (
              <div key={range} className="stat-item">
                <span>{range}:</span>
                <strong>{count}</strong>
              </div>
            ))}
          </div>
        </div>

        {/* По психотипам */}
        <div className="stat-card">
          <h3>По психотипам</h3>
          <div className="stat-breakdown">
            {stats.by_psychotype && Object.entries(stats.by_psychotype).map(([type, count]) => (
              <div key={type} className="stat-item">
                <span>{type}:</span>
                <strong>{count}</strong>
              </div>
            ))}
          </div>
        </div>

        {/* По диагнозам */}
        <div className="stat-card wide">
          <h3>По диагнозам</h3>
          <div className="stat-breakdown">
            {stats.by_diagnosis && Object.entries(stats.by_diagnosis).map(([diagnosis, count]) => (
              <div key={diagnosis} className="stat-item">
                <span>{diagnosis}:</span>
                <strong>{count}</strong>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Statistics;