//
//  AudioMetadataCard.swift
//  vibes
//
//  Created by Claude on 11/7/25.
//

import SwiftUI

struct AudioMetadata {
    let title: String
    let artistName: String
    let playCount: String
    let artworkName: String
}

struct AudioMetadataCard: View {
    let metadata: AudioMetadata
    let buttonText: String
    let onButtonTap: () -> Void
    
    @State private var artworkRotation: Double = 0
    @State private var visualizerHeights: [CGFloat] = [8, 12, 6, 10]
    @State private var visualizerTimer: Timer?
    
    var body: some View {
        HStack(spacing: 8) { // gap-2 = 8px
            // Album Art with Visualizer (40x40px)
            ZStack {
                Image(metadata.artworkName)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 40, height: 40)
                    .clipShape(RoundedRectangle(cornerRadius: 60))
                    .rotationEffect(.degrees(artworkRotation))
                
                // Mini audio visualizer bars (14.4px width from Figma)
                HStack(spacing: 2) {
                    ForEach(0..<4, id: \.self) { index in
                        Rectangle()
                            .fill(.white)
                            .frame(width: 2, height: visualizerHeights[index])
                            .clipShape(RoundedRectangle(cornerRadius: 20))
                            .animation(.easeInOut(duration: 0.3), value: visualizerHeights[index])
                    }
                }
                .frame(width: 14.4, height: 12)
            }
            .frame(width: 40, height: 40)
            
            // Song Info (156px width from Figma)
            VStack(spacing: 2) { // gap-0.5 = 2px
                HStack {
                    Text(metadata.title)
                        .font(.custom("PP Neue Montreal", size: 14))
                        .foregroundColor(.white)
                        .shadow(color: .black.opacity(0.25), radius: 8, x: 0, y: 0)
                        .lineLimit(1)
                    
                    Spacer()
                }
                
                HStack(spacing: 4) { // gap-1 = 4px
                    HStack(spacing: 4) {
                        // Play icon (10x14px from Figma)
                        Image(systemName: "play.fill")
                            .font(.system(size: 8))
                            .foregroundColor(.white.opacity(0.5))
                            .frame(width: 10, height: 14)
                        
                        Text(metadata.playCount)
                            .font(.custom("PP Neue Montreal", size: 12))
                            .foregroundColor(.white.opacity(0.5))
                    }
                    
                    Text("·")
                        .font(.custom("PP Neue Montreal", size: 12))
                        .foregroundColor(.white.opacity(0.75))
                    
                    Text(metadata.artistName)
                        .font(.custom("PP Neue Montreal", size: 12))
                        .foregroundColor(.white.opacity(0.5))
                    
                    Spacer()
                }
                .frame(height: 16) // h-4 = 16px
            }
            
            Spacer()
            
            // Action buttons (44px height from Figma)
            HStack(spacing: 8) { // gap-2 = 8px
                Button(action: onButtonTap) {
                    HStack(spacing: 4) {
                        Image("Icon/plus")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(width: 16, height: 16)

                        Text(buttonText)
                            .font(.custom("Input Sans", size: 12).weight(.medium))
                    }
                    .foregroundColor(Color(hex: "#F7F4EF"))
                    .padding(.horizontal, 16)
                    .padding(.vertical, 0)
                    .frame(height: 44)
                    .background(
                        RoundedRectangle(cornerRadius: 100)
                            .fill(Constants.Colors.Background.Fog.thick)
                    )
                    .clipShape(RoundedRectangle(cornerRadius: 100))
                }
            }
            .frame(height: 44) // Fixed height from Figma
        }
        .padding(.horizontal, 8) // px-2 = 8px horizontal
        .padding(.vertical, 12) // py-3 = 12px vertical
        .frame(height: 60) // Fixed height from Figma
        .glassEffect(.regular, in: RoundedRectangle(cornerRadius: 40))
        .onAppear {
            startAnimations()
        }
        .onDisappear {
            stopAnimations()
        }
    }
    
    private func startAnimations() {
        // Start artwork rotation
        withAnimation(.linear(duration: 3).repeatForever(autoreverses: false)) {
            artworkRotation = 360
        }
        
        // Start visualizer animation
        visualizerTimer = Timer.scheduledTimer(withTimeInterval: 0.15, repeats: true) { _ in
            withAnimation(.easeInOut(duration: 0.3)) {
                for i in 0..<visualizerHeights.count {
                    visualizerHeights[i] = CGFloat.random(in: 4...12)
                }
            }
        }
    }
    
    private func stopAnimations() {
        visualizerTimer?.invalidate()
        visualizerTimer = nil
    }
}

#Preview {
    AudioMetadataCard(
        metadata: AudioMetadata(
            title: "Nocturnal Apparition",
            artistName: "DreamsOfDust",
            playCount: "12.1k",
            artworkName: "Artwork/2"
        ),
        buttonText: "SAVE",
        onButtonTap: {
            print("Save button tapped")
        }
    )
    .background(Color.black)
}