import SwiftUI
import ComposeApp

struct PhotoViewerSheet: View {
    let images: [TaskCompletionImage]
    @Environment(\.dismiss) var dismiss
    @State private var selectedImage: TaskCompletionImage?

    var body: some View {
        NavigationStack {
            Group {
                if let selectedImage = selectedImage {
                    // Single image view
                    ScrollView {
                        VStack(spacing: 16) {
                            AuthenticatedImage(mediaURL: selectedImage.mediaUrl)
                                .frame(minHeight: 300)
                                .accessibilityLabel("Completion photo\(selectedImage.caption.map { ", \($0)" } ?? "")")

                            if let caption = selectedImage.caption {
                                VStack(alignment: .leading, spacing: 8) {
                                    Text("Caption")
                                        .font(.headline)
                                        .foregroundColor(Color.appTextPrimary)
                                    Text(caption)
                                        .font(.body)
                                        .foregroundColor(Color.appTextPrimary)
                                }
                                .frame(maxWidth: .infinity, alignment: .leading)
                                .padding()
                                .background(Color.appBackgroundSecondary)
                                .cornerRadius(12)
                                .padding(.horizontal)
                            }
                        }
                        .padding(.vertical)
                    }
                    .navigationTitle("Photo")
                    .navigationBarTitleDisplayMode(.inline)
                    .toolbar {
                        ToolbarItem(placement: .navigationBarLeading) {
                            Button(action: {
                                self.selectedImage = nil
                            }) {
                                HStack(spacing: 4) {
                                    Image(systemName: "chevron.left")
                                    Text("Back")
                                }
                            }
                            .accessibilityLabel("Back to all photos")
                        }
                        ToolbarItem(placement: .navigationBarTrailing) {
                            Button("Done") {
                                dismiss()
                            }
                        }
                    }
                } else {
                    // Grid view
                    ScrollView {
                        LazyVGrid(columns: [
                            GridItem(.flexible(), spacing: 12),
                            GridItem(.flexible(), spacing: 12)
                        ], spacing: 12) {
                            ForEach(images, id: \.id) { image in
                                Button(action: {
                                    selectedImage = image
                                }) {
                                    VStack(alignment: .leading, spacing: 8) {
                                        AuthenticatedImage(mediaURL: image.mediaUrl, contentMode: .fill)
                                            .frame(height: 150)
                                            .clipped()
                                            .cornerRadius(8)

                                        if let caption = image.caption {
                                            Text(caption)
                                                .font(.caption2)
                                                .foregroundColor(Color.appTextPrimary)
                                                .lineLimit(2)
                                                .multilineTextAlignment(.leading)
                                        }
                                    }
                                }
                                .buttonStyle(.plain)
                                .accessibilityLabel("Photo\(image.caption.map { ", \($0)" } ?? "")")
                            }
                        }
                        .padding()
                    }
                    .navigationTitle("Completion Photos")
                    .navigationBarTitleDisplayMode(.inline)
                    .toolbar {
                        ToolbarItem(placement: .navigationBarTrailing) {
                            Button("Done") {
                                dismiss()
                            }
                        }
                    }
                }
            }
        }
    }
}
