import React from 'react';
import { Typography, Row, Col, Statistic, Spin, Alert, Empty } from 'antd';
import { useRecommendations } from '../hooks/useRecommendations';
import { RecommendationCard } from '../components/recommendations/RecommendationCard';

const { Title } = Typography;

export const Dashboard: React.FC = () => {
  const { data: recommendations, isPending, isError, error } = useRecommendations();

  if (isPending) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', padding: 40 }}>
        <Spin size="large" tip="Загрузка аналитики..." />
      </div>
    );
  }

  if (isError) {
    return (
      <Alert
        message="Ошибка загрузки"
        description={error?.message || 'Не удалось получить данные с сервера'}
        type="error"
        showIcon
      />
    );
  }

  // Группировка для статистики
  const unusedCount = recommendations?.filter(r => r.Type === 'UNUSED_IN_RECIPES').length || 0;
  const noIncomingCount = recommendations?.filter(r => r.Type === 'NO_INCOMING').length || 0;

  return (
    <div>
      <Title level={4} style={{ marginTop: 0 }}>Сводка проблем</Title>
      
      {/* Блок статистики */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={12}>
          <Statistic title="Без техкарт" value={unusedCount} valueStyle={{ color: '#cf1322' }} />
        </Col>
        <Col span={12}>
          <Statistic title="Без закупок" value={noIncomingCount} valueStyle={{ color: '#d48806' }} />
        </Col>
      </Row>

      <Title level={5}>Рекомендации ({recommendations?.length})</Title>
      
      {recommendations && recommendations.length > 0 ? (
        recommendations.map((rec) => (
          <RecommendationCard key={rec.ID} item={rec} />
        ))
      ) : (
        <Empty description="Проблем не обнаружено" />
      )}
    </div>
  );
};