indeed_ai_job_search/indeed_ai_job_search/DesignSystem/Components/SearchComposerView.swift

//
//  SearchComposerView.swift
//  indeed_ai_job_search
//

import SwiftUI

struct SearchComposerView: View {
    enum Mode {
        case hero
        case compact
    }

    let mode: Mode
    @Binding var query: String
    var isSearching: Bool = false
    var suggestedPrompts: [String] = []
    var onSubmit: () -> Void
    var onSelectPrompt: ((String) -> Void)? = nil
    var focusTrigger: Bool = false

    @FocusState private var isFocused: Bool

    var body: some View {
        Group {
            switch mode {
            case .hero:
                heroContent
            case .compact:
                compactBar
            }
        }
        .onChange(of: focusTrigger) { _, _ in
            isFocused = true
        }
    }

    private var heroContent: some View {
        VStack(spacing: AppSpacing.xl) {
            VStack(spacing: AppSpacing.sm) {
                Image(systemName: "sparkles")
                    .font(.system(size: 28, weight: .medium))
                    .foregroundStyle(AppColors.brand)
                    .frame(width: 56, height: 56)
                    .background(AppColors.brandSoft)
                    .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))

                Text("Indeed AI Jobs")
                    .font(AppTypography.heroTitle)
                    .foregroundStyle(AppColors.textPrimary)

                Text("Describe the role you want. AI searches live Indeed listings for matching jobs.")
                    .font(AppTypography.heroSubtitle)
                    .foregroundStyle(AppColors.textSecondary)
                    .multilineTextAlignment(.center)
                    .frame(maxWidth: 480)
            }

            compactBar
                .frame(maxWidth: 640)

            if !suggestedPrompts.isEmpty {
                VStack(alignment: .leading, spacing: AppSpacing.sm) {
                    Text("Try a suggestion")
                        .font(AppTypography.caption)
                        .foregroundStyle(AppColors.textTertiary)

                    FlowLayout(spacing: AppSpacing.xs) {
                        ForEach(suggestedPrompts, id: \.self) { prompt in
                            Button {
                                onSelectPrompt?(prompt)
                            } label: {
                                Text(prompt)
                                    .font(AppTypography.chip)
                                    .foregroundStyle(AppColors.textPrimary)
                                    .padding(.horizontal, 12)
                                    .padding(.vertical, 8)
                                    .background(AppColors.surface)
                                    .clipShape(Capsule())
                                    .overlay(
                                        Capsule()
                                            .stroke(AppColors.borderStrong, lineWidth: 1)
                                    )
                            }
                            .buttonStyle(.plain)
                        }
                    }
                }
                .frame(maxWidth: 640, alignment: .leading)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .padding(AppSpacing.xxl)
    }

    private var compactBar: some View {
        let barHeight: CGFloat = 42

        return HStack(alignment: .center, spacing: AppSpacing.xs) {
            HStack(spacing: 8) {
                Image(systemName: "magnifyingglass")
                    .font(.system(size: 14, weight: .medium))
                    .foregroundStyle(AppColors.textTertiary)

                TextField(
                    "",
                    text: $query,
                    prompt: Text("Describe a job, e.g. iOS developer or Swift engineer in Lahore")
                        .foregroundStyle(AppColors.textTertiary)
                )
                .appPlainTextField()
                .focused($isFocused)
                .onSubmit(onSubmit)

                if !query.isEmpty {
                    Button {
                        query = ""
                    } label: {
                        Image(systemName: "xmark.circle.fill")
                            .font(.system(size: 13))
                            .foregroundStyle(AppColors.textTertiary)
                    }
                    .buttonStyle(.plain)
                    .accessibilityLabel("Clear search")
                }
            }
            .padding(.horizontal, 12)
            .frame(maxHeight: .infinity)
            .background(AppColors.surface)
            .clipShape(RoundedRectangle(cornerRadius: AppSpacing.buttonRadius, style: .continuous))
            .overlay(
                RoundedRectangle(cornerRadius: AppSpacing.buttonRadius, style: .continuous)
                    .stroke(isFocused ? AppColors.brand : AppColors.borderStrong, lineWidth: isFocused ? 1.5 : 1)
            )

            Button {
                onSubmit()
            } label: {
                Group {
                    if isSearching {
                        ProgressView()
                            .controlSize(.small)
                            .tint(.white)
                    } else {
                        Text("Search")
                    }
                }
                .frame(minWidth: 72)
                .frame(maxHeight: .infinity)
            }
            .buttonStyle(CompactSearchButtonStyle())
            // Keep enabled while searching so a new query can cancel and replace the in-flight one.
            .disabled(query.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty)
            .keyboardShortcut(.defaultAction)
            .help(isSearching ? "Search again (cancels current search)" : "Search")
        }
        .frame(height: barHeight)
    }
}

/// Matches the single-line search field height so the button stays aligned.
private struct CompactSearchButtonStyle: ButtonStyle {
    @Environment(\.isEnabled) private var isEnabled

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(AppTypography.button)
            .foregroundStyle(AppColors.textOnBrand)
            .padding(.horizontal, AppSpacing.md)
            .frame(maxHeight: .infinity)
            .background(isEnabled ? AppColors.brand : AppColors.brand.opacity(0.45))
            .clipShape(RoundedRectangle(cornerRadius: AppSpacing.buttonRadius, style: .continuous))
            .opacity(configuration.isPressed ? 0.88 : 1)
    }
}

/// Simple wrapping layout for suggestion chips.
struct FlowLayout: Layout {
    var spacing: CGFloat = 8

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let result = layout(proposal: proposal, subviews: subviews)
        return result.size
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let result = layout(proposal: proposal, subviews: subviews)
        for (index, position) in result.positions.enumerated() {
            subviews[index].place(
                at: CGPoint(x: bounds.minX + position.x, y: bounds.minY + position.y),
                proposal: .unspecified
            )
        }
    }

    private func layout(proposal: ProposedViewSize, subviews: Subviews) -> (size: CGSize, positions: [CGPoint]) {
        let maxWidth = proposal.width ?? .infinity
        var positions: [CGPoint] = []
        var x: CGFloat = 0
        var y: CGFloat = 0
        var rowHeight: CGFloat = 0
        var totalHeight: CGFloat = 0
        var totalWidth: CGFloat = 0

        for subview in subviews {
            let size = subview.sizeThatFits(.unspecified)
            if x + size.width > maxWidth, x > 0 {
                x = 0
                y += rowHeight + spacing
                rowHeight = 0
            }
            positions.append(CGPoint(x: x, y: y))
            rowHeight = max(rowHeight, size.height)
            x += size.width + spacing
            totalWidth = max(totalWidth, x - spacing)
            totalHeight = y + rowHeight
        }

        return (CGSize(width: totalWidth, height: totalHeight), positions)
    }
}