struct ContentView: View {
    @EnvironmentObject var noteStore: NoteStore
    @EnvironmentObject var userSettings: UserSettings
    @State private var showSettings = false
    @State private var showCanvas = false
    @State private var showSashimiGame = false
    @State private var showSushiGame = false
    @State private var selectedNote: Note?
    
    var body: some View {
        NavigationView {
            ZStack {
                
                userSettings.selectedTheme.backgroundColor
                                    .ignoresSafeArea(.all)
                
                if noteStore.notes.isEmpty {
                    VStack {
                        Spacer()
                        Image(systemName: "book.fill")
                            .font(.system(size: 60))
                            .foregroundColor(userSettings.selectedTheme.accentColor.opacity(0.3))
                            .padding()
                        Text("No entries yet")
                            .font(.title)
                            .foregroundColor(.gray)
                        Text("Tap + to create your first entry")
                            .foregroundColor(.gray)
                        Spacer()
                    }
                } else {
                    ScrollView {
                        // Fixed grid syntax
                        let gridItems = [
                            GridItem(.adaptive(minimum: 150), spacing: 10) // Adjust spacing as needed
                        ]
                        
                        LazyVGrid(columns: gridItems, spacing: 20) {
                            ForEach(noteStore.notes) { note in
                                Button(action: {
                                    selectedNote = note
                                }) {
                                    VStack {
                                        Image(uiImage: UIImage(data: note.thumbnailData) ?? UIImage())
                                            .resizable()
                                            .scaledToFill()
                                            .frame(width: 150, height: 150)
                                            .cornerRadius(12)
                                            .clipped()
                                            .overlay(
                                                RoundedRectangle(cornerRadius: 12)
                                                    .stroke(userSettings.selectedTheme.accentColor.opacity(0.3), lineWidth: 2)
                                            )
                                        
                                        Text(note.date, style: .date)
                                            .font(.caption)
                                            .foregroundColor(.black)
                                        Text(note.date, style: .time)
                                            .font(.caption2)
                                            .foregroundColor(.gray)
                                    }
                                    .padding(8)
                                    .background(userSettings.selectedTheme.cardColor)
                                    .cornerRadius(12)
                                    .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
                                    .contextMenu {
                                        Button(role: .destructive) {
                                            if let index = noteStore.notes.firstIndex(where: { $0.id == note.id }) {
                                                withAnimation {
                                                    noteStore.deleteNote(at: index)
                                                }
                                            }
                                        } label: {
                                            Label("Delete", systemImage: "trash")
                                        }
                                    }
                                }
                                .buttonStyle(PlainButtonStyle())
                            }
                        }
                        .padding(20)
                    }
                }
            }
            .navigationTitle("SashimiDiary")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    HStack(spacing: 15) {
                        Button(action: { showCanvas = true }) {
                            Image(systemName: "plus")
                                .font(.system(size: 18))
                                .frame(width: 40, height: 40)
                                .background(userSettings.selectedTheme.accentColor)
                                .foregroundColor(.white)
                                .clipShape(Circle())
                                .shadow(color: userSettings.selectedTheme.accentColor.opacity(0.5), radius: 3, x: 0, y: 2)
                        }
                        
                        Button(action: { showSettings = true }) {
                            Image(systemName: "gear")
                                .font(.system(size: 18))
                                .frame(width: 40, height: 40)
                                .background(Color.gray)
                                .foregroundColor(.white)
                                .clipShape(Circle())
                                .shadow(color: .gray.opacity(0.5), radius: 3, x: 0, y: 2)
                        }
                    }
                }
                
                ToolbarItem(placement: .navigationBarTrailing) {
                    HStack(spacing: 15) {
                        Button(action: { showSashimiGame = true }) {
                            Text("🍣")
                                .font(.system(size: 22))
                                .frame(width: 40, height: 40)
                                .background(Color.green.opacity(0.9))
                                .foregroundColor(.white)
                                .clipShape(Circle())
                                .shadow(color: .green.opacity(0.5), radius: 3, x: 0, y: 2)
                        }
                        
                        Button(action: { showSushiGame = true }) {
                            Text("🍱")
                                .font(.system(size: 22))
                                .frame(width: 40, height: 40)
                                .background(Color.orange.opacity(0.9))
                                .foregroundColor(.white)
                                .clipShape(Circle())
                                .shadow(color: .orange.opacity(0.5), radius: 3, x: 0, y: 2)
                        }
                    }
                }
            }
            .sheet(isPresented: $showCanvas) {
                CanvasView(note: nil)
                    .environmentObject(noteStore)
                    .environmentObject(userSettings)
            }
            .sheet(isPresented: $showSettings) {
                SettingsView()
                    .environmentObject(userSettings)
            }
            .sheet(item: $selectedNote) { note in
                CanvasView(note: note)
                    .environmentObject(noteStore)
                    .environmentObject(userSettings)
            }
            .fullScreenCover(isPresented: $showSashimiGame) {
                SashimiGameView()
                    .environmentObject(userSettings)
            }
            .fullScreenCover(isPresented: $showSushiGame) {
                SushiMakingGame()
                    .environmentObject(userSettings)
            }
        }
        .navigationViewStyle(StackNavigationViewStyle())
        .ignoresSafeArea(.all)
    }
    
}