Toolbar, Inspector va Popover

// ═══════════════════════════════════════
//  TOOLBAR — elementlar qo'shish
// ═══════════════════════════════════════
NavigationStack {
    List(1...20, id: \.self) { element in
        Text("Element \(element)")
    }
    .navigationTitle("Ro'yxat")
    .toolbar {
        // O'ng yuqori burchak
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("Qo'shish", systemImage: "plus") {
                // Yangi element qo'shish
            }
        }

        // Chap yuqori burchak
        ToolbarItem(placement: .navigationBarLeading) {
            Button("Tahrirlash") {
                // Tahrirlash rejimi
            }
        }

        // Pastki panel
        ToolbarItem(placement: .bottomBar) {
            HStack {
                Button("Ulashish", systemImage: "square.and.arrow.up") { }
                Spacer()
                Button("O'chirish", systemImage: "trash", role: .destructive) { }
            }
        }
    }
}

// ═══════════════════════════════════════
//  TOOLBAR GURUH VA MENU
// ═══════════════════════════════════════
NavigationStack {
    Text("Kontent")
        .toolbar {
            // Bir nechta element guruhi
            ToolbarItemGroup(placement: .navigationBarTrailing) {
                Button("Sevimli", systemImage: "heart") { }
                Button("Ulashish", systemImage: "square.and.arrow.up") { }

                // Menu — uzun ro'yxat uchun
                Menu {
                    Button("Nusxa olish", systemImage: "doc.on.doc") { }
                    Button("Tahrirlash", systemImage: "pencil") { }
                    Divider()
                    Button("O'chirish", systemImage: "trash", role: .destructive) { }
                } label: {
                    Image(systemName: "ellipsis.circle")
                }
            }
        }
}


// ═══════════════════════════════════════
//  TOOLBAR SARLAVHA MENYU
// ═══════════════════════════════════════
NavigationStack {
    Text("Kontent")
        .navigationTitle("Loyihalar")
        .toolbarTitleMenu {
            // Sarlavhani bosganda menyu
            Button("Barchasi") { }
            Button("Faollar") { }
            Button("Arxiv") { }
        }
}

// ═══════════════════════════════════════
//  POPOVER — kichik informatsion oyna
// ═══════════════════════════════════════
struct PopoverMisol: View {
    @State private var infoKorsatish = false

    var body: some View {
        Button("Ma'lumot", systemImage: "info.circle") {
            infoKorsatish = true
        }
        .popover(isPresented: $infoKorsatish) {
            VStack(alignment: .leading, spacing: 12) {
                Text("Qo'shimcha ma'lumot")
                    .font(.headline)
                Text("Bu popover — iPad da elementga yopishib ko'rinadi, iPhone da sheet bo'ladi.")
                    .foregroundStyle(.secondary)
            }
            .padding()
            .presentationCompactAdaptation(.popover)
            // iPhone da ham popover sifatida ko'rsatish
        }
    }
}

// ═══════════════════════════════════════
//  INSPECTOR — tafsilotlar paneli (iOS 17+)
// ═══════════════════════════════════════
struct InspectorMisol: View {
    @State private var tanlangan: String?
    @State private var inspectorKorsatish = false

    var body: some View {
        NavigationStack {
            List(["Ali", "Vali", "Gani"], id: \.self) { ism in
                Text(ism)
                    .onTapGesture {
                        tanlangan = ism
                        inspectorKorsatish = true
                    }
            }
            .navigationTitle("Foydalanuvchilar")
            .inspector(isPresented: $inspectorKorsatish) {
                // iPad: o'ng panelda ko'rinadi
                // iPhone: sheet sifatida
                VStack(alignment: .leading) {
                    Text(tanlangan ?? "Tanlanmagan")
                        .font(.title)
                    Text("Tafsilotlar...")
                        .foregroundStyle(.secondary)
                }
                .padding()
                .inspectorColumnWidth(min: 200, ideal: 300, max: 400)
            }
        }
    }
}