import SwiftUI

struct ChannelListView: View {
	@Environment(APIClient.self) private var api
	@Environment(MeshDataStore.self) private var store

	var body: some View {
		Group {
			if store.loading && store.channels.isEmpty {
				ProgressView("Loading channels…")
			} else if let error = store.error, store.channels.isEmpty {
				ContentUnavailableView {
					Label("Connection error", systemImage: "wifi.exclamationmark")
				} description: {
					Text(error)
				} actions: {
					Button("Retry") { Task { await store.refresh(api: api) } }
				}
			} else if store.channels.isEmpty {
				ContentUnavailableView("No channels", systemImage: "number")
			} else {
				List(store.channels) { ch in
					NavigationLink {
						ChatView(target: .channel(ch.id, name: ch.displayName))
					} label: {
						ChannelRow(channel: ch)
					}
				}
			}
		}
		.navigationTitle("Channels")
		.toolbar {
			ToolbarItem(placement: .topBarTrailing) {
				Button {
					Task { await store.refresh(api: api) }
				} label: {
					Image(systemName: "arrow.clockwise")
				}
				.disabled(store.loading)
			}
		}
		.refreshable { await store.refresh(api: api) }
		.task {
			if store.channels.isEmpty { await store.refresh(api: api) }
		}
	}
}

private struct ChannelRow: View {
	let channel: Channel
	var body: some View {
		HStack {
			Image(systemName: "number.circle.fill")
				.foregroundStyle(.tint)
				.font(.title2)
			VStack(alignment: .leading) {
				Text(channel.displayName).font(.body)
				Text(channel.roleName).font(.caption).foregroundStyle(.secondary)
			}
			Spacer()
		}
		.padding(.vertical, 2)
	}
}