//
//  BottomNavBar.swift
//  vibes
//
//  Created by Claude Code on 7/30/25.
//

import SwiftUI

struct BottomNavBar: View {
    @Binding var selectedTab: NavTab
    @Binding var showCreateSheet: Bool
    
    var body: some View {
        HStack(spacing: 0) {
            // Hooks Tab
            NavTabButton(
                tab: .hooks,
                selectedTab: $selectedTab,
                iconName: "Icon/playlist"
            )
            
            // Explore Tab
            NavTabButton(
                tab: .explore,
                selectedTab: $selectedTab,
                iconName: "Icon/explore"
            )
            
            // Create Tab (Center - Special styling)
            CreateTabButton(showCreateSheet: $showCreateSheet)
            
            // Library Tab
            NavTabButton(
                tab: .library,
                selectedTab: $selectedTab,
                iconName: "Icon/library"
            )
            
            // Profile Tab
            NavTabButton(
                tab: .profile,
                selectedTab: $selectedTab,
                profileImageName: "Avatar/8"
            )
        }
        .frame(height: 56) // h-14 = 56pts (inner tab button height)
        .background(
            Constants.BackgroundPrimary
                .overlay(
                    // Top border shadow
                    Rectangle()
                        .fill(Color.white.opacity(0.1))
                        .frame(height: 0.5),
                    alignment: .top
                )
        )
    }
}

struct NavTabButton: View {
    let tab: NavTab
    @Binding var selectedTab: NavTab
    let iconName: String?
    let profileImageName: String?
    
    init(
        tab: NavTab,
        selectedTab: Binding<NavTab>,
        iconName: String? = nil,
        profileImageName: String? = nil
    ) {
        self.tab = tab
        self._selectedTab = selectedTab
        self.iconName = iconName
        self.profileImageName = profileImageName
    }
    
    var body: some View {
        Button(action: {
            selectedTab = tab
        }) {
            Group {
                if let profileImageName = profileImageName {
                    // Profile image from local assets
                    Image(profileImageName)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 24, height: 24)
                        .clipShape(Circle())
                } else if let iconName = iconName {
                    // Custom icon from assets
                    Image(iconName)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 24, height: 24)
                        .foregroundColor(
                            selectedTab == tab ? 
                            Constants.ForegroundPrimary : 
                            Constants.ForegroundTertiary
                        )
                }
            }
        }
        .frame(maxWidth: .infinity)
        .frame(height: 56)
        .contentShape(Rectangle()) // Make entire area tappable
    }
}

struct CreateTabButton: View {
    @Binding var showCreateSheet: Bool
    
    var body: some View {
        Button(action: {
            // Pause the hooks video player
            NotificationCenter.default.post(name: NSNotification.Name("PauseHooksVideo"), object: nil)
            showCreateSheet = true
        }) {
            ZStack {
                // Aura background image
                Image("aura")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 64, height: 40) // w-16 h-10
                    .clipped()
                    .clipShape(Capsule())
                    .shadow(color: .black.opacity(0.15), radius: 1, x: 0, y: 0.5)
                
                // Create icon from assets
                Image("Icon/create")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 24, height: 24)
                    .foregroundColor(.white)
            }
        }
        .frame(maxWidth: .infinity)
        .frame(height: 56)
        .contentShape(Rectangle()) // Make entire area tappable
    }
}

enum NavTab: CaseIterable {
    case hooks
    case explore
    case library
    case profile
    
    var title: String {
        switch self {
        case .hooks: return "Hooks"
        case .explore: return "Explore"
        case .library: return "Library"
        case .profile: return "Profile"
        }
    }
}

#Preview {
    VStack {
        Spacer()
        Text("Content Area")
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Constants.BackgroundPrimary)
        
        BottomNavBar(selectedTab: .constant(.hooks), showCreateSheet: .constant(false))
    }
    .background(Constants.BackgroundPrimary)
}