//
//  NaviHeader.swift
//  wake
//
//  Created by Junhui on 2025/8/19.
//

import SwiftUI

/// 导航头组件，包含返回按钮和标题
struct NaviHeader: View {
    let title: String
    let onBackTap: () -> Void
    var showBackButton: Bool = true
    var titleStyle: TypographyStyle = .title
    var backgroundColor: Color = Color.clear
    var rightContent: AnyView? = nil
    
    var body: some View {
        ZStack {
            // 标题居中显示
            Text(title)
                .font(Typography.font(for: titleStyle, family: .quicksandBold))
                .fontWeight(.bold)
                .foregroundColor(.primary)
            
            // 左右按钮层
            HStack {
                // 左侧返回按钮
                if showBackButton {
                    ReturnButton(action: onBackTap)
                } else {
                    Color.clear
                        .frame(width: 30)
                }
                
                Spacer()
                
                // 右侧内容
                if let rightContent = rightContent {
                    rightContent
                } else {
                    Color.clear
                        .frame(width: 30)
                }
            }
        }
        .padding(.horizontal, 20)
        .padding(.top, 10)
        .padding(.bottom, 20)
        .background(backgroundColor)
    }
}

/// 带右侧按钮的导航头组件
struct NaviHeaderWithAction: View {
    let title: String
    let onBackTap: () -> Void
    let rightButtonTitle: String
    let onRightButtonTap: () -> Void
    var showBackButton: Bool = true
    var titleStyle: TypographyStyle = .title
    var rightButtonStyle: TypographyStyle = .body
    var backgroundColor: Color = Color.clear
    
    var body: some View {
        ZStack {
            // 标题居中显示
            Text(title)
                .font(Typography.font(for: titleStyle, family: .quicksandBold))
                .fontWeight(.bold)
                .foregroundColor(.primary)
            
            // 左右按钮层
            HStack {
                // 左侧返回按钮
                if showBackButton {
                    ReturnButton(action: onBackTap)
                } else {
                    Color.clear
                        .frame(width: 30)
                }
                
                Spacer()
                
                // 右侧按钮
                Button(action: onRightButtonTap) {
                    Text(rightButtonTitle)
                        .font(Typography.font(for: rightButtonStyle, family: .quicksandBold))
                        .fontWeight(.semibold)
                        .foregroundColor(.blue)
                }
            }
        }
        .padding(.horizontal, 20)
        .padding(.top, 10)
        .padding(.bottom, 20)
        .background(backgroundColor)
    }
}

/// 简洁版导航头组件
struct SimpleNaviHeader: View {
    let title: String
    let onBackTap: () -> Void
    
    var body: some View {
        ZStack {
            // 标题居中显示
            Text(title)
                .font(Typography.font(for: .title, family: .quicksandBold))
                .fontWeight(.bold)
                .multilineTextAlignment(.center)
            
            // 返回按钮左对齐
            HStack {
                ReturnButton(action: onBackTap)
                Spacer()
            }
        }
        .padding(.horizontal, 20)
        .padding(.vertical, 16)
    }
}

#Preview("基础导航头") {
    VStack(spacing: 0) {
        NaviHeader(title: "Settings") {
            print("返回")
        }
        .background(Color(.systemBackground))
        
        Spacer()
    }
    .background(Color(.systemGroupedBackground))
}

#Preview("带右侧按钮导航头") {
    VStack(spacing: 0) {
        NaviHeaderWithAction(
            title: "Profile",
            onBackTap: { print("返回") },
            rightButtonTitle: "Save",
            onRightButtonTap: { print("保存") }
        )
        .background(Color(.systemBackground))
        
        Spacer()
    }
    .background(Color(.systemGroupedBackground))
}

#Preview("简洁导航头") {
    VStack(spacing: 0) {
        SimpleNaviHeader(title: "About") {
            print("返回")
        }
        .background(Color(.systemBackground))
        
        Spacer()
    }
    .background(Color(.systemGroupedBackground))
}