import SwiftUI

struct ViewC: View {
    @State private var showPopup: Bool = false
    @State private var fullscreenImageIndex: Int? = nil
    
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    let images = [
        "keynote1", "keynote2", "keynote3", "keynote4", "keynote5", "keynote6", "keynote7"
    ] + [
        "shortcuts", "shortcut1", "shortcut2", "shortcut3", "shortcut4", "shortcut5", "shortcut6", "shortcut7"
    ]
    
    @State private var imageTexts = [
        "1. Tryk på Keynote-logoet for at downloade en kopi af skabelonen.",
        "2. Du kan nu se forskellige layout-udkast på slides til venstre. Klik på en slide og dobbeltklik f.eks. på tekstbokse for at skrive tekst i dem.",
        "3. Hvis du vil indsætte fotos i din app, skal du lave delt skærm på din iPad ved forsigtigt at trække op fra bunden og trække foto-appen ud til højre.",
        "4. Træk nu et foto ind i en grå firkant for at ændre den grå farve til dit foto.",
        "5. Dit billede er nu fyldt i boksen.",
        "6. Tryk på elementer og vælg link for at kunne skabe interaktive knapper i din prototype-app i Keynote.",
        "7. Tryk på \"Link til slide\" for at skifte til en bestemt slide.",
        "8. Vælg hvilken slide der skal skiftes til.",
        "Opret en genvej til din app",
        "1. Åbn Genveje-appen på din iPad.",
        "2. Tryk på \"+\" for at oprette en ny genvej til din hjemmeskærm.",
        "3. Søg efter Keynote i søgefeltet. Vælg nu genvejen \"Afspil præsentation i visningstilstand.\"",
        "4. Tryk på Keynote-præsentationen for at vælge den fil, der skal åbnes, når genvejen trykkes.",
        "5. Tryk nu på pilen og navngiv din genvej ved at trykke på \"omdøb,\" vælg et ikon til genvejen, og tryk til sidst på \"føj til hjemmeskærm.\"",
        "6. Tryk på \"føj til\" for at tilføje genvejen til din hjemmeskærm.",
        "7. Du har nu oprettet en genvej til din hjemmeskærm."
    ]
    
    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)
            
            VStack {
                VStack {
                    Text("Lav en prototype med flere sider")
                        .font(.title)
                        .foregroundColor(.black)
                        .fontWeight(.bold)
                        .padding(.bottom, 5)
                    
                    Text("På denne side skal du lave en prototype af, hvordan din færdige app vil se ud. Du vil bygge prototypen ved hjælp af app-skabeloner i Keynote, hvor du kan indsætte billeder, videoer, tekst, figurer og link-knapper for at skifte sider. Download skabelonerne ved at klikke på knapperne nedenfor. Du kan downloade en Keynote-skabelon til at bygge appen i en iPhone-ramme eller i fuld skærm til iPad. Ved at klikke på informationsknappen lærer du, hvordan du bruger Keynote-skabelonerne.")
                         
                        
                        .font(.subheadline)
                        .foregroundColor(.black)
                        .multilineTextAlignment(.center)
                        .padding(.horizontal)
                        .lineLimit(10)
                        .minimumScaleFactor(0.5)
                        .padding(.bottom, 20)
                }
                
                ScrollView {
                    LazyVGrid(columns: columns, spacing: 20) {
                        contentBox(title: "Elev materiale", description: "Klik her for at downloade idekompasset, AppGPT, Min favorit App og en kort præsentation.", linkURL: "https://app.box.com/s/ufca3gy1h1e43iz5ik1tauqcsmz58fbd")
                       
                        contentBox(title: "App prototype iPad", description: "Klik her for at downloade Keynote-filen med iPad-prototypen.", linkURL: "https://app.box.com/s/zr7tr7hvp00c5pvv7som3rouffzj09hg")
                        
                        contentBox(title: "App prototype iPhone", description: "Klik her for at downloade Keynote-filen med iPhone-prototypen..", linkURL: "https://https://app.box.com/s/dpu6tftr8wrb8zct37xlzd3cd7kcyza2")
                        
                        contentBox(title: "App prototype Mac", description: "Klik her for at downloade Keynote-filen med Mac-prototypen.", linkURL: "https://app.box.com/s/ah3zfiwqgb54oy2vdfkl37xb5mixxnhc")
                        
                        contentBox(title: "App prototype Apple Watch", description: "Klik her for at downloade Keynote-filen med Watch-prototypen.", linkURL: "https://app.box.com/s/vnf8thqjfxpbxff93mm47qo4zpvhkx39")
                       
                        contentBox(title: "Undervisningsmateriale - guide", description: "En omfattende guide til En App Om Apps.", linkURL: "https://dr.dk")
                        
                        contentBox(title: "Undervisningsmateriale Swift", description: "Sådan kommer du i gang med Swift Playground.", linkURL: "https://dr.dk")
                    }
                    .padding()
                }
                
                Spacer()
                
                HStack {
                    Spacer()
                    Button(action: {
                        withAnimation {
                            showPopup.toggle()
                        }
                    }) {
                        Image(systemName: "info.circle")
                            .font(.largeTitle)
                            .padding()
                            .foregroundColor(.black)
                            .clipShape(Circle())
                    }
                    .padding(.trailing, 20)
                    .padding(.bottom, 20)
                }
            }
            
            if showPopup {
                PopupView3(showPopup: $showPopup, images: images, imageTexts: $imageTexts, fullscreenImageIndex: $fullscreenImageIndex)
                    .transition(.scale)
                    .zIndex(1)
            }
            
            if let index = fullscreenImageIndex {
                FullscreenImageView2(images: images, descriptions: imageTexts, currentIndex: index, fullscreenImageIndex: $fullscreenImageIndex)
                    .zIndex(2)
            }
        }
    }
    
    @ViewBuilder
    private func contentBox(title: String, description: String, linkURL: String, actionURL: String? = nil) -> some View {
        VStack(alignment: .leading) {
            Text(title)
                .font(.title2)
                .fontWeight(.bold)
                .lineLimit(2)
                .minimumScaleFactor(0.5)
                .foregroundColor(.black)
            
            Divider()
            
            Text(description)
                .font(.subheadline)
                .foregroundColor(.black)
            
            Text("Link")
                .font(.subheadline)
                .foregroundColor(.blue)
                .underline()
                .onTapGesture {
                    if let url = URL(string: linkURL) {
                        UIApplication.shared.open(url)
                    }
                }
        }
        .padding()
        .background(Color.white)
        .cornerRadius(15)
        .shadow(radius: 5)
        .frame(height: 200)
        .padding(.horizontal)
        .onTapGesture {
            if let urlString = actionURL, let url = URL(string: urlString) {
                UIApplication.shared.open(url)
            }
        }
    }
}

struct ViewCDrawingLine {
    var points: [CGPoint]
    var color: Color
}

struct FullscreenImageView2: 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 PopupView3: View {
    @Binding var showPopup: Bool
    let images: [String]
    @Binding var imageTexts: [String]
    @State private var currentPage: Int = 0
    @State private var isFullScreen: Bool = false
    @Binding var fullscreenImageIndex: Int?
    var body: some View {
        VStack(spacing: 20) {
            Text("Hvad er an app about apps?")
                .font(.headline)
                .padding()
            
            TabView(selection: $currentPage) {
                ForEach(0..<images.count, id: \.self) { index in
                    VStack {
                        ZStack {
                            Image(images[index])
                                .resizable()
                                .aspectRatio(contentMode: isFullScreen ? .fit : .fill)
                                .frame(width: isFullScreen ? UIScreen.main.bounds.width : 400, height: isFullScreen ? UIScreen.main.bounds.height : 300)
                                .onTapGesture {
                                    withAnimation {
                                        fullscreenImageIndex = index
                                    }
                                }
                            
                            if isFullScreen {
                                VStack {
                                    Spacer()
                                    Text(imageTexts[index])
                                        .font(.body)
                                        .multilineTextAlignment(.center)
                                        .padding()
                                        .background(RoundedRectangle(cornerRadius: 10).fill(Color.white).overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.black, lineWidth: 1)))
                                        .padding()
                                        .foregroundColor(.black)
                                }
                                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
                                .transition(.opacity)
                            }
                        }
                        
                        if !isFullScreen {
                            ScrollView {
                                Text(imageTexts[index])
                                    .font(.body)
                                    .multilineTextAlignment(.center)
                                    .padding()
                                    .background(Color.white)
                                    .cornerRadius(10)
                                    .frame(maxWidth: .infinity, alignment: .center)
                                    .foregroundColor(.black)
                            }
                            .frame(height: 100)
                        }
                    }
                    .tag(index)
                }
            }
            .tabViewStyle(PageTabViewStyle())
            .frame(width: isFullScreen ? UIScreen.main.bounds.width : 600, height: isFullScreen ? UIScreen.main.bounds.height : 400)
            
            Text("\(currentPage + 1) of \(images.count)")
                .font(.footnote)
                .padding(-10)
            
            Button(action: {
                withAnimation {
                    showPopup = false
                }
            }) {
                Image(systemName: "xmark.circle")
                    .font(.title2)
                    .padding()
                    .foregroundColor(.black)
                    .cornerRadius(10)
            }
        }
        .frame(width: isFullScreen ? UIScreen.main.bounds.width : 600, height: isFullScreen ? UIScreen.main.bounds.height : 600)
        .background(Color.white)
        .cornerRadius(20)
        .shadow(radius: 20)
        .padding()
    }
} 
    struct ViewC_Previews: PreviewProvider {
        static var previews: some View {
            ViewC()
        }
    }
