//
//  UserView.swift
//  demo
//
//  Created by Jason on 2024/1/23.
//

import SwiftUI

struct UserView: View {
    @State private var showDetail = false
    @State private var showUserInfo = false

    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 0) {
                Header
                ToVip
                InfoList
                Notice
                OrderShow
                Coupons
                Recommend
            }
        }
        .padding(.bottom, 48)
        .animation(.spring, value: showDetail)
    }

    var Header: some View {
        HStack {
            NavigationLink {
                UserAvatarView()
            } label: {
                Image("Images/logo")
                    .resizable()
                    .frame(width: 64, height: 64)
                    .cornerRadius(32)
                    .overlay(
                        RoundedRectangle(cornerRadius: 32, style: .continuous)
                            .stroke(Color.red, lineWidth: 2)
                    )
            }

            VStack(alignment: .leading, spacing: 12, content: {
                Text("用户名称")
                    .font(.title2)
                    .fontWeight(.regular)
                Text("我的用户简介，超出部分需要隐藏，隐藏需要自动设置，这个文字长度也要有约束")
                    .font(.caption)
                    .foregroundColor(Color.gray)
                    .lineLimit(1)
            })
            NavigationLink {
                UserInfoView()
            } label: {
                Image(systemName: "gearshape")
                    .foregroundColor(Color.gray)
            }
        }
        .padding(.horizontal, 24)
    }

    var ToVip: some View {
        HStack(alignment: .top, spacing: /*@START_MENU_TOKEN@*/nil/*@END_MENU_TOKEN@*/, content: {
            Text("VIP de yixie 简介部分")
            Button(action: {
                self.showDetail.toggle()
            }, label: {
                Text("详情")
            })
            Spacer()
            Button("立即开通") {}
                .foregroundColor(Color.red)
                .font(.subheadline)
                .padding(.vertical, 8)
                .padding(.horizontal, 16)
                .background(Color.gray)
                .cornerRadius(32)
        })
        .padding(12)
        .padding(.top, 12)
        .frame(height: showDetail ? 64 : 150, alignment: .topLeading)
        .background(Color.red.opacity(0.3))
        .clipShape(
            RoundedRectangle(cornerRadius: 12)
                .offset(y: 12)
        )

        .padding(.horizontal, 12)
    }

    var InfoList: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 12) {
                ForEach(0 ..< 8) { _ in
                    NavigationLink {
                        AccountView()
                    } label: {
                        UserAccountCard(model: UserAccountCardModel(title: "我的积分", icon: "star", info: "共30001分"))
                    }
                }
            }
        }
        .padding(12)
        .background(Color.gray.opacity(0.2))
    }

    var Notice: some View {
        HStack(spacing: 4) {
            Text("资讯")
                .padding(4)
                .background(Color.red)
                .foregroundColor(Color.white)
                .font(.system(size: 16))
            NavigationLink {
                MessageDetailView()
            } label: {
                Text("平台与2024年1余额开始更新，敬请期待@@@")
                    .foregroundColor(Color.gray)
                    .frame(maxWidth: .infinity)
                    .multilineTextAlignment(/*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/)
                    .font(.system(size: 14))
                    .lineLimit(1)
            }
            NavigationLink {
                MessageView()
            } label: {
                HStack(spacing: 2, content: {
                    Text("更多")
                        .font(.system(size: 14))
                        .foregroundColor(Color.secondary)
                    Image(systemName: "chevron.forward.2")
                        .resizable()
                        .frame(width: 10, height: 10)
                        .foregroundColor(Color.secondary)
                })
            }
        }
        .frame(maxWidth: .infinity)
        .padding(8)
        .background(Color.white)
        .cornerRadius(8)
        .padding(.horizontal, 12)
        .padding(.bottom, 12)
        .background(Color.gray.opacity(0.2))
    }

    var OrderShow: some View {
        VStack(spacing: 0) {
            HStack {
                Text("订单中心")
                    .font(.system(size: 16))
                Spacer()
                NavigationLink {
                    OrdersView()
                } label: {
                    ShowMore()
                }
            }
            .padding(.horizontal, 12)
            Spacer(minLength: 22)
            HStack(alignment: .center) {
                Spacer()
                ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
                    NavigationLink {
                        OrdersView()
                    } label: {
                        VStack {
                            Image(systemName: "wallet.pass")
                                .resizable()
                                .frame(width: 24, height: 24)
                                .foregroundColor(Color.gray)
                                .overlay(alignment: .topTrailing) {
                                    Circle()
                                        .fill(Color.red.opacity(0.9))
                                        .frame(width: 20, height: 20)
                                        .overlay {
                                            Text("5")
                                                .foregroundColor(Color.white)
                                                .font(.system(size: 12))
                                        }
                                        .offset(x: 12, y: -10)
                                }

                            Text("待付款")
                                .font(.system(size: 12))
                                .foregroundColor(Color.gray)
                        }
                    }
                    Spacer()
                }
            }
        }
        .padding(.vertical, 12)
        .background(Color.white)
        .cornerRadius(6)
        .padding(.horizontal, 12)
        .padding(.bottom, 12)
        .background(Color.gray.opacity(0.2))
    }

    var Coupons: some View {
        VStack(spacing: 0) {
            HStack {
                Spacer()
                ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
                    VStack {
                        Image(systemName: "wallet.pass")
                            .resizable()
                            .frame(width: 24, height: 24)
                            .foregroundColor(Color.gray)
                            .overlay(alignment: .topTrailing) {
                                Circle()
                                    .fill(Color.red.opacity(0.9))
                                    .frame(width: 20, height: 20)
                                    .overlay {
                                        Text("5")
                                            .foregroundColor(Color.white)
                                            .font(.system(size: 12))
                                    }
                                    .offset(x: 12, y: -10)
                            }
                        Text("待付款")
                            .font(.system(size: 12))
                            .foregroundColor(Color.gray)
                    }
                    Spacer()
                }
            }
        }
        .padding(.top, 22)
        .padding(.bottom, 12)
        .background(Color.white)
        .cornerRadius(6)
        .padding(.horizontal, 12)
        .padding(.bottom, 12)
        .background(Color.gray.opacity(0.2))
    }

    let columns = [GridItem(.flexible(), spacing: 12), GridItem(.flexible(), spacing: 12)]

    var Recommend: some View {
        LazyVGrid(columns: columns, alignment: .center, spacing: 12, pinnedViews: .sectionHeaders) {
            Section {
                ForEach(0 ..< 20, id: \.self) { _ in
                    GoodsCard()
                }
            }
            header: {
                HStack {
                    Rectangle()
                        .fill(LinearGradient(colors: [Color.gray.opacity(0), Color.gray.opacity(0.8)], startPoint: .leading, endPoint: UnitPoint.trailing))
                        .frame(width: 48, height: 4.0)
                    Text("推荐广场")
                        .font(.system(size: 16))
                    Rectangle()
                        .fill(LinearGradient(colors: [Color.gray.opacity(0.8), Color.gray.opacity(0)], startPoint: .leading, endPoint: UnitPoint.trailing))
                        .frame(width: 48, height: 4.0)
                }
            }
        }
        .padding(.horizontal, 12)
        .padding(.bottom, 12)
        .background(Color.gray.opacity(0.2))
    }
}

#Preview {
    UserView()
}