import SwiftUI

/// Top-5 stat leaderboard card with player headshots
struct LeaderboardView: View {
    let category: LeaderCategory

    var body: some View {
        DataPanel(.standard) {
            VStack(alignment: .leading, spacing: 10) {
                Text(category.name.uppercased())
                    .dataLabelStyle()

                ForEach(category.leaders) { leader in
                    leaderRow(leader)
                }
            }
        }
    }

    @ViewBuilder
    private func leaderRow(_ leader: LeagueLeader) -> some View {
        HStack(spacing: 10) {
            Text("\(leader.rank)")
                .font(rankFont)
                .foregroundStyle(leader.rank <= 3 ? DS.Colors.textPrimary : DS.Colors.textTertiary)
                .frame(width: rankWidth, alignment: .center)

            // Player headshot
            if let personId = leader.personId {
                AsyncImage(url: URL(string: "https://img.mlbstatic.com/mlb-photos/image/upload/w_80,q_auto:best/v1/people/\(personId)/headshot/67/current")) { phase in
                    if let image = phase.image {
                        image.resizable().aspectRatio(contentMode: .fill)
                    } else {
                        Circle().fill(DS.Colors.panelFill)
                    }
                }
                .frame(width: headshotSize, height: headshotSize)
                .clipShape(Circle())
            }

            VStack(alignment: .leading, spacing: 1) {
                Text(leader.playerName)
                    .font(nameFont)
                    .foregroundStyle(DS.Colors.textPrimary)
                    .lineLimit(1)

                if !leader.teamCode.isEmpty {
                    HStack(spacing: 3) {
                        RoundedRectangle(cornerRadius: 1)
                            .fill(TeamAssets.color(for: leader.teamCode))
                            .frame(width: 2, height: 10)
                        Text(leader.teamCode)
                            .font(DS.Fonts.caption)
                            .foregroundStyle(DS.Colors.textTertiary)
                    }
                }
            }

            Spacer()

            Text(leader.value)
                .font(valueFont)
                .foregroundStyle(leader.rank == 1 ? DS.Colors.interactive : DS.Colors.textPrimary)
        }
    }

    #if os(tvOS)
    private var rankWidth: CGFloat { 28 }
    private var headshotSize: CGFloat { 36 }
    private var rankFont: Font { .system(size: 16, weight: .bold, design: .rounded).monospacedDigit() }
    private var nameFont: Font { .system(size: 17, weight: .semibold) }
    private var valueFont: Font { DS.Fonts.tvDataValue }
    #else
    private var rankWidth: CGFloat { 22 }
    private var headshotSize: CGFloat { 28 }
    private var rankFont: Font { .system(size: 13, weight: .bold, design: .rounded).monospacedDigit() }
    private var nameFont: Font { .system(size: 14, weight: .semibold) }
    private var valueFont: Font { DS.Fonts.dataValue }
    #endif
}