import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
import Layout from '../components/Layout';
import { listBlogPosts, listBlogTags } from '../blog/api';
import type { BlogPostSummary, BlogTag } from '../blog/types';
import '../App.css';

const PAGE_SIZE = 6;

function formatDate(timestamp: number): string {
  if (!timestamp) {
    return '';
  }

  const millis = timestamp < 1_000_000_000_000 ? timestamp * 1000 : timestamp;
  return new Date(millis).toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  });
}

function Blog() {
  const { t } = useTranslation();

  const [tags, setTags] = useState<BlogTag[]>([]);
  const [isLoadingTags, setIsLoadingTags] = useState(false);
  const [tagsError, setTagsError] = useState<string | null>(null);

  const [selectedTags, setSelectedTags] = useState<string[]>([]);

  const [posts, setPosts] = useState<BlogPostSummary[]>([]);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(false);
  const [isLoadingPosts, setIsLoadingPosts] = useState(false);
  const [postError, setPostError] = useState<string | null>(null);

  const isInitialLoading = isLoadingPosts && posts.length === 0;

  useEffect(() => {
    let active = true;

    (async () => {
      setIsLoadingTags(true);
      setTagsError(null);
      try {
        const response = await listBlogTags();
        if (!active) {
          return;
        }
        setTags(response.tags ?? []);
      } catch (error) {
        if (!active) {
          return;
        }
        const message = error instanceof Error ? error.message : 'Failed to load tags';
        setTagsError(message);
        console.error('Failed to load blog tags:', error);
      } finally {
        if (active) {
          setIsLoadingTags(false);
        }
      }
    })();

    return () => {
      active = false;
    };
  }, []);

  const fetchPosts = useCallback(
    async (pageToLoad: number, replace = false) => {
      setIsLoadingPosts(true);
      setPostError(null);

      if (replace) {
        setPosts([]);
      }

      try {
        const response = await listBlogPosts({
          page: pageToLoad,
          pageSize: PAGE_SIZE,
          tagIds: selectedTags,
        });

        const total = response.totalCount ?? response.posts.length;
        setPage(pageToLoad);

        setPosts((previous) => {
          const updated = replace ? response.posts : [...previous, ...response.posts];
          setHasMore(updated.length < total);
          return updated;
        });
      } catch (error) {
        const message = error instanceof Error ? error.message : 'Failed to load posts';
        setPostError(message);
        console.error('Failed to load blog posts:', error);
      } finally {
        setIsLoadingPosts(false);
      }
    },
    [selectedTags]
  );

  useEffect(() => {
    fetchPosts(1, true);
  }, [fetchPosts]);

  const featuredPost = useMemo(() => (posts.length > 0 ? posts[0] : null), [posts]);
  const otherPosts = useMemo(() => (featuredPost ? posts.slice(1) : posts), [posts, featuredPost]);

  const handleLoadMore = () => {
    if (isLoadingPosts || !hasMore) {
      return;
    }
    fetchPosts(page + 1, false);
  };

  const toggleTag = (tagId: string) => {
    setSelectedTags((current) => {
      if (current.includes(tagId)) {
        return current.filter((id) => id !== tagId);
      }
      return [...current, tagId];
    });
  };

  const clearTags = () => {
    setSelectedTags([]);
  };

  return (
    <Layout currentPage="blog">
      <section
        style={{
          padding: '120px 2rem 60px',
          background: 'linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%)',
          textAlign: 'center',
        }}
      >
        <div style={{ maxWidth: '860px', margin: '0 auto' }}>
          <h1
            style={{
              fontSize: '3.25rem',
              fontWeight: 'bold',
              color: 'var(--text-primary)',
              marginBottom: '1rem',
            }}
          >
            {t('blog.title')}
          </h1>
          <p
            style={{
              fontSize: '1.2rem',
              color: 'var(--text-secondary)',
              lineHeight: 1.6,
              marginBottom: '2.5rem',
            }}
          >
            {t('blog.subtitle')}
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: '1rem', flexWrap: 'wrap' }}>
            <Link
              to="/blog/create"
              style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: '0.5rem',
                background: 'var(--accent-color)',
                color: 'white',
                padding: '0.9rem 1.8rem',
                borderRadius: '999px',
                fontWeight: 600,
                textDecoration: 'none',
                transition: 'transform 0.3s ease, box-shadow 0.3s ease',
              }}
              onMouseEnter={(event) => {
                event.currentTarget.style.transform = 'translateY(-2px)';
                event.currentTarget.style.boxShadow = '0 6px 18px var(--accent-shadow)';
              }}
              onMouseLeave={(event) => {
                event.currentTarget.style.transform = 'translateY(0)';
                event.currentTarget.style.boxShadow = 'none';
              }}
            >
              {t('blog.readMore')}
            </Link>
            {selectedTags.length > 0 && (
              <button
                type="button"
                onClick={clearTags}
                style={{
                  padding: '0.9rem 1.8rem',
                  borderRadius: '999px',
                  border: '1px solid var(--border-color)',
                  background: 'var(--bg-card)',
                  color: 'var(--text-secondary)',
                  fontWeight: 600,
                  cursor: 'pointer',
                }}
              >
                Clear filters
              </button>
            )}
          </div>
        </div>
      </section>

      <section style={{ padding: '40px 2rem 20px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
            <h2
              style={{
                fontSize: '1.5rem',
                fontWeight: 600,
                color: 'var(--text-primary)',
                display: 'flex',
                alignItems: 'center',
                gap: '0.6rem',
              }}
            >
              Tags
            </h2>
            {isLoadingTags && <span style={{ color: 'var(--text-secondary)', fontSize: '0.95rem' }}>Loading...</span>}
          </div>
          {tagsError && (
            <div
              style={{
                background: 'rgba(244, 67, 54, 0.1)',
                border: '1px solid rgba(244, 67, 54, 0.3)',
                padding: '1rem 1.25rem',
                borderRadius: '10px',
                color: '#F44336',
                marginBottom: '1.5rem',
              }}
            >
              {tagsError}
            </div>
          )}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.75rem' }}>
            {tags.map((tag) => {
              const isSelected = selectedTags.includes(tag.tagId);
              return (
                <button
                  key={tag.tagId}
                  type="button"
                  onClick={() => toggleTag(tag.tagId)}
                  style={{
                    padding: '0.55rem 1.25rem',
                    borderRadius: '999px',
                    border: isSelected ? 'none' : '1px solid var(--border-color)',
                    background: isSelected ? 'var(--accent-color)' : 'var(--bg-card)',
                    boxShadow: isSelected ? '0 8px 18px rgba(76, 175, 80, 0.25)' : 'none',
                    color: isSelected ? '#fff' : 'var(--text-secondary)',
                    fontWeight: 600,
                    cursor: 'pointer',
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: '0.6rem',
                    transition: 'all 0.2s ease',
                  }}
                >
                  <span>{tag.tagName}</span>
                  <span
                    style={{
                      fontSize: '0.8rem',
                      padding: '0.15rem 0.45rem',
                      borderRadius: '999px',
                      background: isSelected ? 'rgba(255, 255, 255, 0.25)' : 'var(--bg-secondary)',
                      color: isSelected ? '#fff' : 'var(--text-secondary)',
                    }}
                  >
                    {tag.postCount}
                  </span>
                </button>
              );
            })}
            {!isLoadingTags && tags.length === 0 && !tagsError && (
              <span style={{ color: 'var(--text-secondary)' }}>No tags available yet.</span>
            )}
          </div>
        </div>
      </section>

      <section style={{ padding: '20px 2rem 80px' }}>
        <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
          {postError && (
            <div
              style={{
                background: 'rgba(244, 67, 54, 0.1)',
                border: '1px solid rgba(244, 67, 54, 0.3)',
                padding: '1rem 1.25rem',
                borderRadius: '10px',
                color: '#F44336',
                marginBottom: '2rem',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                gap: '1rem',
              }}
            >
              <span>{postError}</span>
              <button
                type="button"
                onClick={() => fetchPosts(page || 1, posts.length === 0)}
                style={{
                  padding: '0.5rem 1rem',
                  borderRadius: '8px',
                  border: 'none',
                  background: 'var(--accent-color)',
                  color: '#fff',
                  fontWeight: 600,
                  cursor: 'pointer',
                }}
              >
                Retry
              </button>
            </div>
          )}

          {featuredPost && (
            <article
              style={{
                background: 'var(--bg-card)',
                border: '1px solid var(--border-color)',
                borderRadius: '16px',
                overflow: 'hidden',
                marginBottom: '3rem',
                boxShadow: '0 12px 32px rgba(0, 0, 0, 0.12)',
              }}
            >
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0', alignItems: 'stretch' }}>
                <div style={{ padding: '3rem 3rem 3rem 3.5rem' }}>
                  <span
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: '0.4rem',
                      background: 'rgba(76, 175, 80, 0.14)',
                      color: 'var(--accent-color)',
                      padding: '0.4rem 0.9rem',
                      borderRadius: '999px',
                      fontSize: '0.85rem',
                      fontWeight: 600,
                      marginBottom: '1rem',
                    }}
                  >
                    Featured
                  </span>
                  <h2
                    style={{
                      fontSize: '2.2rem',
                      fontWeight: 700,
                      color: 'var(--text-primary)',
                      lineHeight: 1.3,
                      marginBottom: '1.4rem',
                    }}
                  >
                    {featuredPost.title}
                  </h2>
                  <div style={{ display: 'flex', gap: '1.2rem', color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: '1.5rem' }}>
                    <span>{formatDate(featuredPost.createdAt)}</span>
                    <span>Updated {formatDate(featuredPost.updatedAt)}</span>
                  </div>
                  <Link
                    to={`/blog/${featuredPost.postId}`}
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: '0.5rem',
                      padding: '0.85rem 1.6rem',
                      background: 'var(--accent-color)',
                      color: '#fff',
                      borderRadius: '10px',
                      fontWeight: 600,
                      textDecoration: 'none',
                      transition: 'transform 0.3s ease',
                    }}
                    onMouseEnter={(event) => {
                      event.currentTarget.style.transform = 'translateY(-2px)';
                    }}
                    onMouseLeave={(event) => {
                      event.currentTarget.style.transform = 'translateY(0)';
                    }}
                  >
                    {'Read article ->'}
                  </Link>
                </div>
                <div
                  style={{
                    minHeight: '320px',
                    background: featuredPost.coverImageUrl
                      ? `linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.55)), url(${featuredPost.coverImageUrl})`
                      : 'linear-gradient(135deg, rgba(90, 140, 255, 0.25), rgba(90, 140, 255, 0.07))',
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                  }}
                />
              </div>
            </article>
          )}

          {!isInitialLoading && posts.length === 0 && !postError && (
            <div
              style={{
                padding: '4rem 2rem',
                textAlign: 'center',
                border: '1px dashed var(--border-color)',
                borderRadius: '16px',
                background: 'var(--bg-card)',
                color: 'var(--text-secondary)',
              }}
            >
              No posts yet. Be the first to share something with the community!
            </div>
          )}

          <div style={{ display: 'grid', gap: '2.5rem', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
            {otherPosts.map((post) => (
              <article
                key={post.postId}
                style={{
                  background: 'var(--bg-card)',
                  border: '1px solid var(--border-color)',
                  borderRadius: '14px',
                  overflow: 'hidden',
                  boxShadow: '0 6px 20px rgba(0, 0, 0, 0.12)',
                  display: 'flex',
                  flexDirection: 'column',
                }}
              >
                <div
                  style={{
                    height: '180px',
                    background: post.coverImageUrl
                      ? `linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.45)), url(${post.coverImageUrl})`
                      : 'linear-gradient(135deg, rgba(76, 175, 80, 0.18), rgba(76, 175, 80, 0.05))',
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                  }}
                />
                <div style={{ padding: '1.75rem', display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <h3
                    style={{
                      fontSize: '1.3rem',
                      fontWeight: 700,
                      color: 'var(--text-primary)',
                      marginBottom: '0.9rem',
                    }}
                  >
                    {post.title}
                  </h3>
                  <div style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: '1.4rem' }}>
                    Published {formatDate(post.createdAt)}
                  </div>
                  <div style={{ marginTop: 'auto' }}>
                    <Link
                      to={`/blog/${post.postId}`}
                      style={{
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: '0.4rem',
                        color: 'var(--accent-color)',
                        fontWeight: 600,
                        textDecoration: 'none',
                      }}
                    >
                      {'Read more ->'}
                    </Link>
                  </div>
                </div>
              </article>
            ))}
          </div>

          {isInitialLoading && (
            <div style={{ display: 'grid', gap: '2rem', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
              {Array.from({ length: 3 }).map((_, index) => (
                <div
                  key={index}
                  style={{
                    height: '240px',
                    borderRadius: '14px',
                    background: 'linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08))',
                    border: '1px solid var(--border-color)',
                    animation: 'pulse 1.5s ease-in-out infinite',
                  }}
                />
              ))}
            </div>
          )}

          {hasMore && (
            <div style={{ textAlign: 'center', marginTop: '3rem' }}>
              <button
                type="button"
                onClick={handleLoadMore}
                disabled={isLoadingPosts}
                style={{
                  padding: '1rem 2.5rem',
                  borderRadius: '999px',
                  border: 'none',
                  background: isLoadingPosts ? 'var(--bg-secondary)' : 'var(--accent-color)',
                  color: '#fff',
                  fontWeight: 600,
                  cursor: isLoadingPosts ? 'wait' : 'pointer',
                  transition: 'transform 0.2s ease',
                }}
              >
                {isLoadingPosts ? 'Loading...' : t('blog.loadMore')}
              </button>
            </div>
          )}
        </div>
      </section>
    </Layout>
  );
}

export default Blog;
