//
//  HomeTabView.swift
//  SodaLive
//
//  Created by klaus on 7/10/25.
//

import SwiftUI

struct HomeTabView: View {
    @StateObject var viewModel = ContentMainTabHomeViewModel()
    @AppStorage("token") private var token: String = UserDefaults.string(forKey: UserDefaultsKey.token)
    @AppStorage("role") private var role: String = UserDefaults.string(forKey: UserDefaultsKey.role)
    
    var body: some View {
        BaseView(isLoading: $viewModel.isLoading) {
            ZStack(alignment: .bottomTrailing) {
                VStack(alignment: .leading, spacing: 0) {
                    HStack(spacing: 0) {
                        Image("img_text_logo")
                        
                        Spacer()
                        
                        if !token.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
                            Image("ic_can")
                                .onTapGesture {
                                    AppState
                                        .shared
                                        .setAppStep(step: .canCharge(refresh: {}))
                                }
                        }
                    }
                    .padding(.horizontal, 24)
                    .padding(.vertical, 20)
                    
                    ScrollView(.vertical, showsIndicators: false) {
                        VStack(alignment: .leading, spacing: 48) {
                            VStack(alignment: .leading, spacing: 16) {
                                HStack(spacing: 0) {
                                    Text("지금")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.button)
                                    
                                    Text(" 라이브중")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.white)
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                            }
                            
                            VStack(alignment: .leading, spacing: 16) {
                                HStack(spacing: 0) {
                                    Text("인기")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.button)
                                    
                                    Text(" 크리에이터")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.white)
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                            }
                            
                            VStack(alignment: .leading, spacing: 16) {
                                HStack(spacing: 0) {
                                    Text("최신")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.button)
                                    
                                    Text(" 콘텐츠")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.white)
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                            }
                            
                            VStack(alignment: .leading, spacing: 16) {
                                HStack(spacing: 0) {
                                    Text("오직")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.button)
                                    
                                    Text(" 보이스온에서만")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.white)
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                            }
                            
                            VStack(alignment: .leading, spacing: 16) {
                                HStack(spacing: 0) {
                                    Text("요일별")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.button)
                                    
                                    Text(" 시리즈")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.white)
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                            }
                            
                            VStack(alignment: .leading, spacing: 16) {
                                HStack(spacing: 0) {
                                    Text("보온")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.button)
                                    
                                    Text(" 주간 차트")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.white)
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                            }
                            
                            VStack(alignment: .leading, spacing: 16) {
                                HStack(spacing: 0) {
                                    Text("추천")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.button)
                                    
                                    Text(" 채널")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.white)
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                            }
                            
                            VStack(alignment: .leading, spacing: 16) {
                                HStack(spacing: 0) {
                                    Text("무료")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.button)
                                    
                                    Text(" 콘텐츠")
                                        .font(.custom(Font.bold.rawValue, size: 26))
                                        .foregroundColor(.white)
                                }
                                
                                ScrollView(.horizontal, showsIndicators: false) {
                                    HStack(spacing: 16) {
                                        
                                    }
                                }
                            }
                        }
                        .padding(24)
                    }
                }
            }
        }
    }
}

#Preview {
    HomeTabView()
}