Kisani/Features/Onboarding/FolderSetupView.swift

import SwiftUI

struct FolderSetupView: View {
    @EnvironmentObject var store: ConnectionStore
    @State private var showBrowser = false
    @State private var selectedPath: String = "/"
    @State private var appeared = false

    private var connection: NASConnection? { store.savedConnection }

    var body: some View {
        ZStack {
            AppTheme.background.ignoresSafeArea()

            VStack(spacing: 0) {
                // Step indicator
                stepIndicator
                    .padding(.top, 20)
                    .padding(.bottom, 36)
                    .opacity(appeared ? 1 : 0)
                    .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.05), value: appeared)

                // Icon
                ZStack {
                    Circle()
                        .fill(AppTheme.surfaceSunken)
                        .frame(width: 80, height: 80)
                    Image(systemName: "folder.badge.plus")
                        .font(.system(size: 32, weight: .light))
                        .foregroundStyle(AppTheme.ink)
                }
                .scaleEffect(appeared ? 1 : 0.85)
                .opacity(appeared ? 1 : 0)
                .animation(.spring(response: 0.5, dampingFraction: 0.7).delay(0.1), value: appeared)

                Spacer().frame(height: 28)

                // Title + description
                VStack(spacing: 8) {
                    Text("Choose a destination")
                        .font(.system(size: 22, weight: .semibold))
                        .foregroundStyle(AppTheme.ink)
                    Text("Select the folder on your NAS where photos will be backed up.")
                        .font(AppTheme.body())
                        .foregroundStyle(AppTheme.inkSecondary)
                        .multilineTextAlignment(.center)
                        .padding(.horizontal, 32)
                }
                .opacity(appeared ? 1 : 0)
                .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.15), value: appeared)

                Spacer().frame(height: 32)

                // Connection chip
                if let conn = connection {
                    connectionChip(conn)
                        .opacity(appeared ? 1 : 0)
                        .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.2), value: appeared)
                }

                Spacer().frame(height: 16)

                // Selected path display / browse button
                Button(action: { showBrowser = true }) {
                    HStack(spacing: 12) {
                        Image(systemName: selectedPath == "/" ? "folder" : "folder.fill")
                            .font(.system(size: 14, weight: .regular))
                            .foregroundStyle(selectedPath == "/" ? AppTheme.inkQuaternary : AppTheme.interactive)
                            .frame(width: 20)
                        Text(selectedPath == "/" ? "Tap to browse folders" : selectedPath)
                            .font(AppTheme.body())
                            .foregroundStyle(selectedPath == "/" ? AppTheme.inkTertiary : AppTheme.ink)
                            .lineLimit(2)
                            .multilineTextAlignment(.leading)
                            .frame(maxWidth: .infinity, alignment: .leading)
                        Image(systemName: "chevron.right")
                            .font(.system(size: 12, weight: .medium))
                            .foregroundStyle(AppTheme.inkQuaternary)
                    }
                    .padding(.horizontal, 16)
                    .padding(.vertical, 14)
                    .background(AppTheme.surfaceRaised)
                    .clipShape(RoundedRectangle(cornerRadius: AppTheme.radius, style: .continuous))
                    .shadow(color: AppTheme.cardShadow, radius: 12, x: 0, y: 2)
                }
                .buttonStyle(ScaleButtonStyle())
                .padding(.horizontal, AppTheme.hPad)
                .opacity(appeared ? 1 : 0)
                .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.25), value: appeared)

                Spacer()

                // Confirm button
                Button(action: confirmFolder) {
                    Text("Save This Folder")
                }
                .buttonStyle(PrimaryButtonStyle())
                .padding(.horizontal, AppTheme.hPad)
                .disabled(selectedPath == "/")
                .opacity(selectedPath == "/" ? 0.4 : 1)
                .animation(.spring(response: 0.3, dampingFraction: 0.8), value: selectedPath == "/")
                .opacity(appeared ? 1 : 0)
                .animation(.spring(response: 0.4, dampingFraction: 0.8).delay(0.3), value: appeared)

                Spacer().frame(height: 48)
            }
        }
        .sheet(isPresented: $showBrowser) {
            if let conn = connection {
                BrowseView(connection: conn, selectedPath: $selectedPath, isPickerMode: true)
            }
        }
        .onAppear { appeared = true }
    }

    private var stepIndicator: some View {
        HStack(spacing: 6) {
            ForEach(1...3, id: \.self) { step in
                Capsule()
                    .fill(step == 2 ? AppTheme.ink : AppTheme.inkQuaternary)
                    .frame(width: step == 2 ? 20 : 6, height: 6)
            }
        }
    }

    private func connectionChip(_ conn: NASConnection) -> some View {
        HStack(spacing: 6) {
            Circle()
                .fill(AppTheme.positive)
                .frame(width: 6, height: 6)
            Text(conn.host)
                .font(AppTheme.micro())
                .foregroundStyle(AppTheme.inkSecondary)
            Text("·")
                .foregroundStyle(AppTheme.inkQuaternary)
            Text(conn.nasProtocol.rawValue)
                .font(AppTheme.micro())
                .foregroundStyle(AppTheme.inkTertiary)
        }
        .padding(.horizontal, 12)
        .padding(.vertical, 6)
        .background(AppTheme.surfaceSunken)
        .clipShape(Capsule(style: .continuous))
    }

    private func confirmFolder() {
        guard selectedPath != "/", var conn = store.savedConnection else { return }
        conn.remotePath = selectedPath
        store.savedConnection = conn
    }
}