import SwiftUI

struct SpikeView: View {
    @Environment(Server.self) private var server

    var body: some View {
        @Bindable var server = server
        VStack(spacing: 0) {
            HStack {
                TextField("Server URL", text: $server.origin)
                    .frame(width: 320)
                Button("Connect") {
                    Task {
                        await server.connect()
                    }
                }
                Picker("Task", selection: $server.taskId) {
                    ForEach(server.tasks, id: \.id) { t in
                        Text(verbatim: "\(t.title) · \(t.status) · \(t.id)").tag(t.id)
                    }
                }
                .frame(width: 280)
                Text(server.status)
                Spacer()
            }
            .padding(8)
            Divider()
            TabView {
                Tab("Composer", systemImage: "keyboard") {
                    ComposerSpike()
                }
                Tab("Transcript", systemImage: "text.alignleft") {
                    TranscriptSpike()
                        .id(server.taskId)
                }
                Tab("Terminal", systemImage: "terminal") {
                    TerminalSpike()
                        .id(server.taskId)
                }
                Tab("Font", systemImage: "textformat") {
                    FontSpike()
                }
                Tab("SVG", systemImage: "photo") {
                    SVGSpike()
                        .id(server.taskId)
                }
            }
            .padding(8)
            Divider()
            ScrollView {
                VStack(alignment: .leading, spacing: 2) {
                    ForEach(Array(server.lines.enumerated()), id: \.offset) { _, line in
                        Text(line)
                    }
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(8)
            }
            .defaultScrollAnchor(.bottom)
            .frame(height: 140)
        }
        .frame(minWidth: 1000, minHeight: 700)
        .task {
            if !server.origin.isEmpty {
                await server.connect()
            }
        }
    }
}