import SwiftUI

struct NewHomeTab: View {
    @ObservedObject var viewModel: NewHomeTabViewModel
    
    private var column1Posts: [Post] {
        viewModel.posts.enumerated().filter { $0.offset % 2 == 0 }.map { $0.element }
    }
    
    private var column2Posts: [Post] {
        viewModel.posts.enumerated().filter { $0.offset % 2 != 0 }.map { $0.element }
    }
    
    // Рассчитываем ширину колонки на основе ширины экрана.
    // Отступы: 4 слева + 4 справа + 6 между колонками = 14.
    private let columnWidth = (UIScreen.main.bounds.width - 14) / 2
    
    var body: some View {
        VStack {
            if viewModel.isLoading {
                ProgressView("Загрузка ленты...")
            } else {
                RefreshableScrollView(isRefreshing: $viewModel.isRefreshing, onRefresh: {
                    viewModel.refreshData()
                }) {
                    HStack(alignment: .top, spacing: 6) {
                        LazyVStack(spacing: 6) {
                            ForEach(column1Posts) { post in
                                PostGridItem(post: post, width: columnWidth)
                            }
                        }
                        LazyVStack(spacing: 6) {
                            ForEach(column2Posts) { post in
                                PostGridItem(post: post, width: columnWidth)
                            }
                        }
                    }
                    .padding(.horizontal, 4)
                }
            }
        }
        .onAppear {
            viewModel.fetchDataIfNeeded()
        }
        .background(Color(.secondarySystemBackground)) // Фон для всей вкладки
    }
}

struct PostGridItem: View {
    let post: Post
    let width: CGFloat // Ширина элемента
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) { // Убираем отступ между картинкой и текстом
            // 1. Медиа контент
            if let _ = post.media.first {
                Image("placeholderPhoto")
                    .resizable()
                    .scaledToFill() // Заполняем кадр, сохраняя пропорции
                    .frame(width: width, height: width) // Устанавливаем жесткий размер
                    .clipped() // Обрезаем лишнее
            }
            
            // Контейнер для текста, который создает эффект "расширения"
            VStack(alignment: .leading, spacing: 8) {
                // 2. Название поста
                if let title = post.title, !title.isEmpty {
                    Text(title)
                        .font(.subheadline)
                        .lineLimit(2)
                }
                
                // 3. Информация об авторе и лайки
                HStack {
                    
                    Button(action: {
                        // пока ничего не делаем
                    }) {
                        HStack(spacing: 4) {
                        Image(systemName: "person.circle.fill")
                            .resizable()
                            .frame(width: 20, height: 20)
                            .foregroundColor(.gray)
                        Text(post.authorUsername)
                            .font(.footnote)
                            .lineLimit(1)
                            .foregroundColor(.primary)
                    }
                    }
                    .contentShape(Rectangle())

                    Spacer()

                    Button(action: {
                        // пока ничего не делаем
                    }) {
                        HStack(spacing: 4) {
                        Image(systemName: post.isLikedByCurrentUser ? "heart.fill" : "heart")
                            .foregroundColor(post.isLikedByCurrentUser ? .red : .primary)
                        Text("\(post.likes)")
                            .font(.subheadline)
                            .foregroundColor(.primary)
                    }
                    }
                    .contentShape(Rectangle())
                    
                }
            }
            .padding(8)
            .background(Color(UIColor.systemBackground)) // Фон только для текстовой части
        }
        .cornerRadius(6) // Закругляем всю карточку
        .clipped() // Обрезаем дочерние вью по закругленной форме родителя
        .shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: 2)
    }
}
