import SwiftUI

struct DebugFooterView: View {
    @ObservedObject var model: AppModel

    var body: some View {
        HStack(spacing: 8) {
            Circle()
                .fill(model.authState == .signedIn ? Theme.ready : Theme.amber)
                .frame(width: 8, height: 8)
            Text(model.status)
                .font(Theme.mono(12))
                .foregroundStyle(Theme.muted)
                .lineLimit(1)
            Spacer()
        }
        .padding(.horizontal, 2)
    }
}

struct StatusStrip: View {
    @ObservedObject var model: AppModel

    var body: some View {
        HStack(spacing: 8) {
            Circle()
                .fill(model.authState == .checking ? Theme.amber : model.authState == .signedIn ? Theme.ready : Theme.red)
                .frame(width: 10, height: 10)
            Text(model.status)
                .font(Theme.mono(12))
                .foregroundStyle(Theme.muted)
            Spacer()
        }
        .panel()
    }
}

struct PanelTitle: View {
    private let title: String
    private let icon: String

    init(_ title: String, icon: String) {
        self.title = title
        self.icon = icon
    }

    var body: some View {
        Label(title, systemImage: icon)
            .font(Theme.headlineFont)
            .foregroundStyle(Theme.text)
    }
}

struct EmptyLine: View {
    private let text: String

    init(_ text: String) {
        self.text = text
    }

    var body: some View {
        Text(text)
            .font(Theme.captionFont)
            .foregroundStyle(Theme.muted)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(12)
            .background(Theme.panel2)
            .clipShape(RoundedRectangle(cornerRadius: Theme.corner))
    }
}

struct TrackLine<Actions: View>: View {
    let track: Track
    let isActive: Bool
    let subtitle: String
    @ViewBuilder let actions: () -> Actions

    var body: some View {
        HStack(spacing: 10) {
            Rectangle()
                .fill(isActive ? Theme.ready : Theme.amber)
                .frame(width: 4)
                .clipShape(RoundedRectangle(cornerRadius: Theme.smallCorner))

            VStack(alignment: .leading, spacing: 4) {
                Text(track.title)
                    .font(Theme.pixel(16, weight: .semibold))
                    .foregroundStyle(Theme.text)
                    .lineLimit(2)
                Text(subtitle)
                    .font(Theme.captionFont)
                    .foregroundStyle(Theme.muted)
                    .lineLimit(1)
            }

            Spacer(minLength: 8)
            actions()
        }
        .rowStyle(isActive: isActive)
    }
}
