import React from 'react';
import { Grid, Box } from '@mui/material';
import ArticleCardSize12 from './ArticleCardSize12';
import ArticleCardSize6 from './ArticleCardSize6';
import ArticleCardSize4 from './ArticleCardSize4';
import ArticleCardSize2 from './ArticleCardSize2';
import { ArticleModel } from "../../types/models";
import { ArticleGridProps } from "../../types/props";

export default function ArticleCardsGrid({
  articles,
  onSelectArticle,
  xs = 12,
  md12 = 12,
  md6 = 6,
  md4 = 4,
  nested = 2,
}: ArticleGridProps ) {

  const visibleArticles = articles.slice(0, 6)
  const count = visibleArticles.length;

  const [focusedCardIndex, setFocusedCardIndex] = React.useState<number | null>(
    null,
  );

  const handleFocus = (index: number) => {
    setFocusedCardIndex(index);
  };

  const handleBlur = () => {
    setFocusedCardIndex(null);
  };

  const renderCard = (article: ArticleModel, index: number, type: '12' | '6' | '4' | '2' = '12') => {
    const CardComponent =
      type === '12' ? ArticleCardSize12 :
      type === '6' ? ArticleCardSize6 :
      type === '4' ? ArticleCardSize4 :
      ArticleCardSize2;

    return (
      <CardComponent
        key={index}
        article={article}
        index={index}
        focusedCardIndex={focusedCardIndex}
        onSelectArticle={onSelectArticle}
        onFocus={handleFocus}
        onBlur={handleBlur}
      />
    );
  };

  return (
    <Grid container spacing={2} columns={12}>
      {/* ---- 1 article: 12 ---- */}
      {count === 1 && (
        <>
          {visibleArticles.map((a, i) => (
            <Grid key={i} size={{ xs, md: md12 }}>
              {renderCard(a, i, '12')}
            </Grid>
          ))}
        </>
      )}

      {/* ---- 2 articles: 6 | 6 ---- */}
      {count === 2 && (
        <>
          {visibleArticles.map((a, i) => (
            <Grid key={i} size={{ xs, md: md6 }}>
              {renderCard(a, i, '6')}
            </Grid>
          ))}
        </>
      )}

      {/* ---- 3 articles: 4 | 4 | 4 ---- */}
      {count === 3 && (
        <>
          {visibleArticles.map((a, i) => (
            <Grid key={i} size={{ xs, md: md4 }}>
              {renderCard(a, i, '4')}
            </Grid>
          ))}
        </>
      )}

      {/* ---- 4 articles: (6|6) + (6|6) ---- */}
      {count === 4 && (
        <>
          {visibleArticles.map((a, i) => (
            <Grid key={i} size={{ xs, md: md6 }}>
              {renderCard(a, i, '6')}
            </Grid>
          ))}
        </>
      )}

      {/* ---- 5 articles: (6|6) + (4|4|4) ---- */}
      {count === 5 && (
        <>
          {/* Row 1: 2 x size6 */}
          {visibleArticles.slice(0, 2).map((a, i) => (
            <Grid key={i} size={{ xs, md: md6 }}>
              {renderCard(a, i, '6')}
            </Grid>
          ))}

          {/* Row 2: 3 x size4 */}
          {visibleArticles.slice(2).map((a, i) => (
            <Grid key={i + 2} size={{ xs, md: md4 }}>
              {renderCard(a, i + 2, '4')}
            </Grid>
          ))}
        </>
      )}

      {/* ---- 6 articles: (6|6) + (4|2x2|4) ---- */}
      {count === 6 && (
        <>
          {/* Top row: 2 x size6 */}
          {visibleArticles.slice(0, 2).map((a, i) => (
            <Grid key={i} size={{ xs, md: md6 }}>
              {renderCard(a, i, '6')}
            </Grid>
          ))}

          {/* Bottom row: 4 + 2x2 + 4 */}
          <Grid size={{ xs, md: md4 }}>
            {renderCard(visibleArticles[2], 2, '4')}
          </Grid>

          <Grid size={{ xs, md: md4 }}>
            <Box
              sx={{ display: 'flex', flexDirection: 'column', gap: 2, height: '100%' }}
            >
              {visibleArticles.slice(3, 3 + nested).map((a, i) =>
                renderCard(a, i + 3, '2')
              )}
            </Box>
          </Grid>

          <Grid size={{ xs, md: md4 }}>
            {renderCard(visibleArticles[5], 5, '4')}
          </Grid>
        </>
      )}
    </Grid>
  );
}
