//
//  ChargedDeviceDetailTabBarView.swift
//  USB Meter
//
//  Created by Codex on 22/04/2026.
//

import SwiftUI

struct ChargedDeviceDetailTabBarView<Tab: Hashable>: View {
    let tabs: [Tab]
    @Binding var selection: Tab
    let tint: Color
    let presentation: AdaptiveTabBarPresentation
    let title: (Tab) -> String
    let systemImage: (Tab) -> String

    var body: some View {
        HStack {
            Spacer(minLength: 0)

            HStack(spacing: 8) {
                ForEach(tabs, id: \.self) { tab in
                    let isSelected = selection == tab

                    Button {
                        withAnimation(.easeInOut(duration: 0.2)) {
                            selection = tab
                        }
                    } label: {
                        HStack(spacing: 6) {
                            Image(systemName: systemImage(tab))
                                .font(.subheadline.weight(.semibold))
                            if presentation.showsTitles {
                                Text(title(tab))
                                    .font(.subheadline.weight(.semibold))
                                    .lineLimit(1)
                            }
                        }
                        .foregroundColor(isSelected ? .white : .primary)
                        .padding(.horizontal, presentation.showsTitles ? 10 : 12)
                        .padding(.vertical, presentation.showsTitles ? 7 : 10)
                        .frame(maxWidth: .infinity)
                        .background(
                            Capsule()
                                .fill(isSelected ? tint : Color.secondary.opacity(0.12))
                        )
                    }
                    .buttonStyle(.plain)
                    .accessibilityLabel(title(tab))
                }
            }
            .frame(maxWidth: presentation.maxWidth)
            .padding(6)
            .background(
                RoundedRectangle(cornerRadius: presentation.showsTitles ? 14 : 22, style: .continuous)
                    .fill(Color.secondary.opacity(0.10))
            )
            .background {
                RoundedRectangle(cornerRadius: presentation.showsTitles ? 14 : 22, style: .continuous)
                    .fill(.ultraThinMaterial)
                    .opacity(0.78)
            }

            Spacer(minLength: 0)
        }
        .padding(.horizontal, 16)
        .padding(.top, 10)
        .padding(.bottom, 8)
        .background {
            Rectangle()
                .fill(.ultraThinMaterial)
                .opacity(0.78)
                .ignoresSafeArea(edges: .top)
        }
        .overlay(alignment: .bottom) {
            Rectangle()
                .fill(Color.secondary.opacity(0.12))
                .frame(height: 1)
        }
    }
}