import Observation
import SwiftUI

struct SybilSettingsView: View {
    @Bindable var viewModel: SybilViewModel

    var body: some View {
        @Bindable var settings = viewModel.settings

        ScrollView {
            VStack(alignment: .leading, spacing: 18) {
                VStack(alignment: .leading, spacing: 6) {
                    Text("Connection")
                        .font(.sybil(.title3, weight: .semibold))
                        .foregroundStyle(SybilTheme.text)
                    Text("Use the API server root. Example: `http://127.0.0.1:8787`")
                        .font(.sybil(.footnote))
                        .foregroundStyle(SybilTheme.textMuted)
                }

                VStack(alignment: .leading, spacing: 8) {
                    Text("API URL")
                        .font(.sybil(.caption, weight: .semibold))
                        .foregroundStyle(SybilTheme.textMuted)

                    TextField("http://127.0.0.1:8787", text: $settings.apiBaseURL)
                        .textInputAutocapitalization(.never)
                        .autocorrectionDisabled()
                        .keyboardType(.URL)
                        .padding(12)
                        .background(
                            RoundedRectangle(cornerRadius: 12)
                                .fill(SybilTheme.surface)
                                .overlay(
                                    RoundedRectangle(cornerRadius: 12)
                                        .stroke(SybilTheme.border, lineWidth: 1)
                                )
                        )

                    Text("Admin Token")
                        .font(.sybil(.caption, weight: .semibold))
                        .foregroundStyle(SybilTheme.textMuted)

                    SecureField("ADMIN_TOKEN (optional in open mode)", text: $settings.adminToken)
                        .textInputAutocapitalization(.never)
                        .autocorrectionDisabled()
                        .padding(12)
                        .background(
                            RoundedRectangle(cornerRadius: 12)
                                .fill(SybilTheme.surface)
                                .overlay(
                                    RoundedRectangle(cornerRadius: 12)
                                        .stroke(SybilTheme.border, lineWidth: 1)
                                )
                        )
                }

                HStack(spacing: 10) {
                    Button {
                        Task {
                            await viewModel.refreshAfterSettingsChange()
                        }
                    } label: {
                        Text("Save & Reconnect")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.borderedProminent)
                    .tint(SybilTheme.primarySoft)

                    Button {
                        settings.adminToken = ""
                        Task {
                            await viewModel.refreshAfterSettingsChange()
                        }
                    } label: {
                        Text("No Token")
                            .frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.bordered)
                    .tint(SybilTheme.textMuted)
                }

                if let mode = viewModel.authMode {
                    Label(mode == "open" ? "Server is in open mode" : "Server requires token", systemImage: "dot.radiowaves.left.and.right")
                        .font(.sybil(.footnote))
                        .foregroundStyle(SybilTheme.textMuted)
                }

                if let authError = viewModel.authError {
                    Text(authError)
                        .font(.sybil(.footnote))
                        .foregroundStyle(SybilTheme.danger)
                }

                if let runtimeError = viewModel.errorMessage {
                    Text(runtimeError)
                        .font(.sybil(.footnote))
                        .foregroundStyle(SybilTheme.danger)
                }
            }
            .padding(16)
            .frame(maxWidth: 640, alignment: .leading)
            .frame(maxWidth: .infinity, alignment: .center)
        }
    }
}
