import SwiftUI

struct MainTabView: View {
    @EnvironmentObject var store: ConnectionStore

    var body: some View {
        AdaptiveLayout()
    }
}

// iPad uses NavigationSplitView; iPhone uses TabView
struct AdaptiveLayout: View {
    @Environment(\.horizontalSizeClass) private var sizeClass

    var body: some View {
        if sizeClass == .regular {
            iPadSidebarLayout()
        } else {
            iPhoneTabLayout()
        }
    }
}

struct iPhoneTabLayout: View {
    var body: some View {
        TabView {
            NavigationStack { BackupView() }
                .tabItem { Label("Backup", systemImage: "arrow.up.doc.fill") }

            NavigationStack { GalleryView() }
                .tabItem { Label("Gallery", systemImage: "photo.on.rectangle") }

            NavigationStack { SyncView() }
                .tabItem { Label("Sync", systemImage: "arrow.triangle.2.circlepath") }

            NavigationStack { SettingsView() }
                .tabItem { Label("Settings", systemImage: "gearshape.fill") }
        }
        .tint(AppTheme.ink)
        .onAppear {
            let appearance = UITabBarAppearance()
            // Native iOS blur — feels lighter than opaque white, more premium
            appearance.configureWithDefaultBackground()
            appearance.backgroundEffect = UIBlurEffect(style: .systemUltraThinMaterial)
            appearance.shadowColor = UIColor.separator.withAlphaComponent(0.4)

            let itemAppearance = UITabBarItemAppearance()
            itemAppearance.normal.iconColor = UIColor.systemGray3
            itemAppearance.normal.titleTextAttributes = [
                .font: UIFont.systemFont(ofSize: 9.5, weight: .regular),
                .foregroundColor: UIColor.systemGray3
            ]
            appearance.stackedLayoutAppearance = itemAppearance

            UITabBar.appearance().standardAppearance = appearance
            UITabBar.appearance().scrollEdgeAppearance = appearance
        }
    }
}

struct iPadSidebarLayout: View {
    @State private var selection: String? = "backup"

    var body: some View {
        NavigationSplitView {
            List(selection: $selection) {
                Label("Backup", systemImage: "arrow.up.doc.fill").tag("backup")
                Label("Gallery", systemImage: "photo.on.rectangle").tag("browse")
                Label("Sync", systemImage: "arrow.triangle.2.circlepath").tag("sync")
                Label("Settings", systemImage: "gearshape.fill").tag("settings")
            }
            .navigationTitle("Kisani")
        } detail: {
            switch selection {
            case "backup":  BackupView()
            case "sync":    SyncView()
            case "browse":  GalleryView()
            case "settings": SettingsView()
            default: BackupView()
            }
        }
        .tint(AppTheme.ink)
    }
}