import SwiftUI
import UIKit

struct ViewB: View {
    @State private var showingImagePicker = false
    @State private var inputImage: UIImage?
    @State private var image: Image?
    @State private var lines: [DrawingLine] = []
    @State private var selectedColor = Color.orange
    @State private var showPopup: Bool = false
    @State private var fullscreenImageIndex: Int? = nil
    
    let images = [
        "freeform1", "freeform2", "freeform3", "freeform4", "freeform5", "freeform6"
    ]
    
    @State private var imageTexts = [
        "1. Tryk på Freeform-appens ikon på denne side.",
        "2. En version af skabelonen vil automatisk blive downloadet til din enhed. Tryk derefter tilbage på pilen.",
        "3. Hold fingeren på dokumentet i et par sekunder.",
        "4. Tryk nu på duplikér-knappen for at lave en kopi af dokumentet.",
        "5. Du har nu downloadet en skabelon af Freeform-dokumentet. Klik nu på det.",
        "6. Træk nu elementer ind i 'byggeområdet' for at bygge din app. Indsæt yderligere iPhone-rammer, indtil du har beskrevet hele appen."
    ]
    
    var body: some View {
        ZStack {
            LinearGradient(
                gradient: Gradient(colors: [
                    Color(red: 217 / 255, green: 201 / 255, blue: 254 / 255),
                    Color(red: 86 / 255, green: 193 / 255, blue: 255 / 255)
                ]),
                startPoint: .leading,
                endPoint: .trailing
            )
            .edgesIgnoringSafeArea(.all)
            
            GeometryReader { geometry in
                VStack {
                    Spacer()
                    
                    VStack {
                        Text("Skab et overblik over din app")
                            .font(.title)
                            .fontWeight(.bold)
                            .foregroundColor(.black)
                            .padding(.bottom, 5)
                        
                        Text("På denne side skal du beskrive, hvad der skal være med i din app, hvordan den skal se ud, og hvorfor det skal være med. Dette arbejde skal samles i et whiteboard-dokument i Freeform. Vi har lavet en skabelon til dig. Du kan downloade den ved at trykke på Freeform-appens ikon nedenfor. Når du har downloadet dokumentet, skal du duplikere det. Lær hvordan i informationsknappen på denne side.")
                            .font(.subheadline)
                            .foregroundColor(.black)
                            .multilineTextAlignment(.center)
                            .padding(.horizontal, 20)
                            .lineLimit(nil)
                            .minimumScaleFactor(0.5)
                            .frame(width: geometry.size.width * 0.9) 
                    }
                    .padding(.bottom, 20)
                         
                    
                    Image("FFFinal")
                        .resizable()
                        .scaledToFit()
                        .frame(width: geometry.size.width * 0.75)
                        .padding(.horizontal, geometry.size.width * 0.125)
                    
                     .padding(.bottom, 20)
                    
                    Text("Download Freeform dokumentet her")
                        .font(.headline)
                        .foregroundColor(.black)
                        .fontWeight(.semibold)
                        .padding(.bottom, -5)
                    
                    Button(action: {
                        if let url = URL(string: "https://www.icloud.com/freeform/0d7eorspfn24Hp7pu6iveT2pQ#App_Development_Mockup_Freeform"), UIApplication.shared.canOpenURL(url) {
                            UIApplication.shared.open(url, options: [:], completionHandler: nil)
                        }
                    }) {
                        Image("Freeform")
                            .resizable()
                            .scaledToFit()
                            .frame(height: geometry.size.height / 14)
                            .padding()
                    }
                    
                   
                    
                    HStack {
                        Spacer()
                        Button(action: {
                            withAnimation {
                                showPopup.toggle()
                            }
                        }) {
                            Image(systemName: "info.circle")
                                .font(.largeTitle)
                                .padding()
                                .foregroundColor(.black)
                                .clipShape(Circle())
                        }
                        .padding(.trailing, 20)
                        .padding(.bottom, 20)
                    }
                }
                .frame(width: geometry.size.width, alignment: .center) 
            }
            
            if showPopup {
                ViewBPopupView(showPopup: $showPopup, images: images, imageTexts: $imageTexts, fullscreenImageIndex: $fullscreenImageIndex)
                    .transition(.scale)
                    .zIndex(1)
            }
            
            if let index = fullscreenImageIndex {
                ViewBFullscreenImageView(images: images, descriptions: imageTexts, currentIndex: index, fullscreenImageIndex: $fullscreenImageIndex)
                    .zIndex(2)
            }
        }
    }
    
    struct DrawingLine {
        var points: [CGPoint]
        var color: Color
    }
    
    struct ViewBPopupView: View {
        @Binding var showPopup: Bool
        let images: [String]
        @Binding var imageTexts: [String]
        @State private var currentPage: Int = 0
        @Binding var fullscreenImageIndex: Int?
        
        var body: some View {
            VStack(spacing: 20) {
                Text("What is an app about apps?")
                    .font(.headline)
                    .foregroundColor(.black)
                    .padding()
                
                TabView(selection: $currentPage) {
                    ForEach(0..<images.count, id: \.self) { index in
                        VStack {
                            Image(images[index])
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 400, height: 300)
                                .onTapGesture {
                                    withAnimation {
                                        fullscreenImageIndex = index
                                    }
                                }
                            
                            ScrollView {
                                Text(imageTexts[index])
                                    .font(.body)
                                    .multilineTextAlignment(.center)
                                    .padding()
                                    .background(Color.white)
                                    .cornerRadius(10)
                                    .frame(maxWidth: .infinity, alignment: .center) 
                                    .foregroundColor(.black) 
                            }
                            .frame(height: 150)
                        }
                        .tag(index)
                    }
                }
                .tabViewStyle(PageTabViewStyle())
                .frame(width: 600, height: 400)
                
                VStack {
                    Text("\(currentPage + 1) of \(images.count)")
                        .font(.footnote)
                        .padding(5)
                    
                    Button(action: {
                        showPopup = false
                    }) {
                        Image(systemName: "xmark.circle")
                            .font(.title2)
                            .padding()
                            .foregroundColor(.black)
                            .cornerRadius(10)
                    }
                    .padding(.top, 5)
                }
            }
            .frame(width: 600, height: 600)
            .background(Color.white)
            .cornerRadius(20)
            .shadow(radius: 20)
            .padding()
        }
    }
    
    struct ViewBFullscreenImageView: View {
        let images: [String]
        let descriptions: [String]
        @State var currentIndex: Int
        @Binding var fullscreenImageIndex: Int?
        
        var body: some View {
            ZStack {
                Color.black.ignoresSafeArea()
                
                VStack {
                    TabView(selection: $currentIndex) {
                        ForEach(0..<images.count, id: \.self) { index in
                            VStack {
                                Image(images[index])
                                    .resizable()
                                    .scaledToFit()
                                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                                    .onTapGesture {
                                        withAnimation {
                                            fullscreenImageIndex = nil
                                        }
                                    }
                                    .padding()
                                
                                ScrollView {
                                    Text(descriptions[index])
                                        .padding()
                                        .background(
                                            RoundedRectangle(cornerRadius: 10)
                                                .fill(Color.white)
                                                .overlay(
                                                    RoundedRectangle(cornerRadius: 10)
                                                        .stroke(Color.black, lineWidth: 1)
                                                )
                                        )
                                        .padding()
                                        .foregroundColor(.black) 
                                        .multilineTextAlignment(.center)
                                }
                                .frame(maxHeight: 150)
                            }
                            .tag(index)
                        }
                    }
                    .tabViewStyle(PageTabViewStyle())
                    .indexViewStyle(PageIndexViewStyle())
                    
                    Spacer()
                }
            }
        }
    }
    
    struct ViewB_Previews: PreviewProvider {
        static var previews: some View {
            ViewB()
        }
    }
}
