import SwiftUI

struct SettingsView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            // Page header
            VStack(alignment: .leading, spacing: 4) {
                Text("Settings")
                    .font(.system(size: 28, weight: .bold))
                    .foregroundStyle(VelocityTheme.foreground)
                Text("Configuration")
                    .font(.system(size: 12))
                    .foregroundStyle(VelocityTheme.mutedFg)
            }

            // System (live) section
            SettingsSection(title: "System") {
                HStack(spacing: 14) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 7)
                            .fill(VelocityTheme.success.opacity(0.12)).frame(width: 30, height: 30)
                        Image(systemName: "bolt.fill")
                            .font(.system(size: 13, weight: .medium)).foregroundStyle(VelocityTheme.success)
                    }
                    Text("Connection Status").font(.system(size: 14)).foregroundStyle(VelocityTheme.foreground)
                    Spacer()
                    HStack(spacing: 5) {
                        Circle().fill(VelocityTheme.success).frame(width: 6, height: 6)
                        Text("Online").font(.system(size: 12, weight: .medium)).foregroundStyle(VelocityTheme.success)
                    }
                }
                .padding(.horizontal, 16).padding(.vertical, 12)
            }

            // Backend section
            SettingsSection(title: "Backend") {
                SettingsRow(label: "ComfyUI Endpoint",
                            value: "http://192.168.x.x:8000",
                            icon: "server.rack",
                            accentColor: VelocityTheme.accent)
                Divider().background(VelocityTheme.borderSubtle)
                SettingsRow(label: "Dream Weaver Path",
                            value: "/dream-weaver",
                            icon: "arrow.triangle.branch",
                            accentColor: VelocityTheme.accent)
            }

            // Display section
            SettingsSection(title: "Display") {
                SettingsRow(label: "Orientation",
                            value: "Landscape Only",
                            icon: "rectangle.landscape.rotate",
                            accentColor: VelocityTheme.mutedFg)
                Divider().background(VelocityTheme.borderSubtle)
                SettingsRow(label: "Theme",
                            value: "Dark",
                            icon: "moon.fill",
                            accentColor: Color(red: 0.60, green: 0.57, blue: 0.99))
            }

            // App info section
            SettingsSection(title: "About") {
                SettingsRow(label: "Version",
                            value: "1.1.0",
                            icon: "info.circle",
                            accentColor: VelocityTheme.mutedFg)
                Divider().background(VelocityTheme.borderSubtle)
                SettingsRow(label: "Build",
                            value: "SwiftUI · iOS 17+",
                            icon: "hammer",
                            accentColor: VelocityTheme.mutedFg)
            }

            Spacer()
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .background(VelocityTheme.background)
    }
}

private struct SettingsSection<Content: View>: View {
    let title: String
    @ViewBuilder let content: Content

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Text(title.uppercased())
                .font(.system(size: 10, weight: .semibold))
                .tracking(1.2)
                .foregroundStyle(VelocityTheme.mutedFg)
                .padding(.bottom, 8)
                .padding(.horizontal, 4)

            VStack(spacing: 0) {
                content
            }
            .padding(.vertical, 4)
            .background(
                RoundedRectangle(cornerRadius: 14)
                    .fill(Color(red: 0.031, green: 0.039, blue: 0.071))
                    .overlay(
                        RoundedRectangle(cornerRadius: 14)
                            .stroke(VelocityTheme.borderSubtle, lineWidth: 1)
                    )
            )
        }
    }
}

private struct SettingsRow: View {
    let label: String
    let value: String
    let icon: String
    let accentColor: Color

    var body: some View {
        HStack(spacing: 14) {
            ZStack {
                RoundedRectangle(cornerRadius: 7)
                    .fill(accentColor.opacity(0.12))
                    .frame(width: 30, height: 30)
                Image(systemName: icon)
                    .font(.system(size: 13, weight: .medium))
                    .foregroundStyle(accentColor)
            }

            Text(label)
                .font(.system(size: 14))
                .foregroundStyle(VelocityTheme.foreground)

            Spacer()

            Text(value)
                .font(.system(size: 13))
                .foregroundStyle(VelocityTheme.mutedFg)
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 12)
    }
}