import React, { useEffect } from 'react';

import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { observer } from 'mobx-react-lite';

import { useStore } from '../../../shared/hooks/useStore.ts';
import { formatDate, getDateValue } from '../../news/utils/formatDate.ts';

const RecentNewsComponent: React.FC = () => {
  const { news } = useStore();

  useEffect(() => {
    const load = async () => {
      try {
        await news.fetch({ limit: 10 });
      } catch {
        /* errors surfaced via store state */
      }
    };

    void load();
  }, [news]);

  const visibleNews = news.list
    .slice()
    .sort((a, b) => getDateValue(b.publishedAt) - getDateValue(a.publishedAt))
    .slice(0, 3);

  const hasNews = visibleNews.length > 0;

  return (
    <Container maxWidth="lg">
      <Box sx={{ display: { xs: 'none', md: 'flex', width: '100%' }, mt: '2rem' }}>
        <Stack direction="column" spacing={2} sx={{ width: '100%' }}>
          <Typography component="h2" variant="h2" gutterBottom sx={{ color: 'text.primary', textAlign: 'center' }}>
            Последние новости
          </Typography>
          {news.isLoading && (
            <Typography sx={{ textAlign: 'center' }} color="text.secondary">
              Загружаем последние новости...
            </Typography>
          )}
          {news.error && (
            <Typography sx={{ textAlign: 'center' }} color="error">
              {news.error}
            </Typography>
          )}
          {hasNews && (
            <Grid container spacing={2}>
              {visibleNews.map((item) => (
                <Grid key={item.id} size={{ xs: 12, md: 6, lg: 4 }}>
                  <Card
                    key={item.id}
                    variant="outlined"
                    sx={{
                      display: 'flex',
                      flexDirection: 'column',
                      justifyContent: 'space-between',
                      flexGrow: 1,
                      height: '100%',
                    }}
                  >
                    <CardHeader title={item.title} subheader={formatDate(item.publishedAt)} />
                    <CardContent>
                      <Typography gutterBottom>{item.summary}</Typography>
                      <Link href={item.href}>Читать полностью</Link>
                    </CardContent>
                  </Card>
                </Grid>
              ))}
            </Grid>
          )}
          <Link href="/news" sx={{ alignSelf: 'center' }}>
            Лента новостей
          </Link>
        </Stack>
      </Box>
    </Container>
  );
};

export const RecentNews = observer(RecentNewsComponent);