app_for_indeed/App for Indeed/Views/CVMakerPageView.swift

//
//  CVMakerPageView.swift
//  App for Indeed
//
//  Template gallery for the CV Maker sidebar destination. Light-theme rendering
//  inspired by a dark reference UI: page header, category toggle, style chips,
//  4-column thumbnail grid with hover Preview overlay, and a sticky bottom CTA.
//

import Cocoa
import QuartzCore

// MARK: - Data model

enum CVCategoryGroup: Hashable {
    case designBased
    case professionBased

    var title: String {
        switch self {
        case .designBased: return "Design-Based"
        case .professionBased: return "Profession-Based"
        }
    }
}

enum CVDesignFamily: String, CaseIterable, Hashable {
    case professional, modern, creative, minimal, executive

    var title: String {
        switch self {
        case .professional: return "Professional"
        case .modern: return "Modern"
        case .creative: return "Creative"
        case .minimal: return "Minimal"
        case .executive: return "Executive"
        }
    }
}

/// High-level layout bucket for catalog metadata and filtering.
enum CVTemplateLayoutType: String, Hashable {
    case atsSingleColumn
    case twoColumnSidebarLeading
    case twoColumnSidebarTrailing

    var gallerySubtitle: String {
        switch self {
        case .atsSingleColumn: return "ATS layout"
        case .twoColumnSidebarLeading: return "Sidebar left"
        case .twoColumnSidebarTrailing: return "Sidebar right"
        }
    }
}

/// Visual recipe used by the mini preview renderer so every template can vary
/// the headline style, accent line, and sidebar layout without bespoke views.
struct CVTemplate: Hashable {
    enum Headline: Hashable {
        /// Big name centered above the body.
        case centered
        /// Name aligned to the leading edge, role beneath it.
        case leftAligned
        /// Name on the leading edge with circular initials avatar on the trailing edge.
        case leftWithInitials
        /// Initials avatar above a centered name (single column).
        case avatarStacked
    }

    enum Accent: Hashable {
        case none
        case redUnderline
        case redBar
        case blueBar
    }

    enum SidebarSide: Hashable { case leading, trailing }
    enum Layout: Hashable {
        case singleColumn
        case twoColumn(sidebar: SidebarSide, tinted: Bool)
    }

    enum SectionLabelStyle: Hashable {
        case uppercase
        case slashed   // "// EXPERIENCE"
        case bracketed // "[ EXPERIENCE ]"
    }

    let id: String
    let name: String
    let family: CVDesignFamily
    let headline: Headline
    let accent: Accent
    let layout: Layout
    let sectionLabelStyle: SectionLabelStyle
    /// sRGB accent used for headers, tags, and sidebar tints in the mini preview.
    let themeRed: CGFloat
    let themeGreen: CGFloat
    let themeBlue: CGFloat

    /// Shown on cards; mirrors the design family in this build.
    var category: String { family.title }

    var layoutType: CVTemplateLayoutType {
        switch layout {
        case .singleColumn: return .atsSingleColumn
        case .twoColumn(sidebar: .leading, _): return .twoColumnSidebarLeading
        case .twoColumn(sidebar: .trailing, _): return .twoColumnSidebarTrailing
        }
    }

    /// Top-level gallery tab: expressive layouts for design-led roles vs. conservative ATS-friendly styles.
    var galleryGroup: CVCategoryGroup {
        switch family {
        case .modern, .creative: return .designBased
        case .minimal, .professional, .executive: return .professionBased
        }
    }

    var themeColor: NSColor {
        NSColor(srgbRed: themeRed, green: themeGreen, blue: themeBlue, alpha: 1)
    }

    /// Optional bundle image name; `nil` means render a live vector/text preview.
    var previewImageAssetName: String? { nil }

    init(
        id: String,
        name: String,
        family: CVDesignFamily,
        headline: Headline,
        accent: Accent,
        layout: Layout,
        sectionLabelStyle: SectionLabelStyle,
        themeRed: CGFloat? = nil,
        themeGreen: CGFloat? = nil,
        themeBlue: CGFloat? = nil
    ) {
        self.id = id
        self.name = name
        self.family = family
        self.headline = headline
        self.accent = accent
        self.layout = layout
        self.sectionLabelStyle = sectionLabelStyle
        if let tr = themeRed, let tg = themeGreen, let tb = themeBlue {
            self.themeRed = tr
            self.themeGreen = tg
            self.themeBlue = tb
        } else {
            let rgb = Self.resolvedThemeRGB(family: family, id: id)
            self.themeRed = rgb.0
            self.themeGreen = rgb.1
            self.themeBlue = rgb.2
        }
    }

    private static func resolvedThemeRGB(family: CVDesignFamily, id: String) -> (CGFloat, CGFloat, CGFloat) {
        var hash: UInt64 = 1469598103934665603
        for b in id.utf8 {
            hash ^= UInt64(b)
            hash &*= 1_099_511_628_211
        }
        let t = Double(hash % 1000) / 1000.0
        switch family {
        case .professional:
            let r = 0.12 + t * 0.06
            let g = 0.32 + t * 0.08
            let b = 0.58 + t * 0.12
            return (r, g, b)
        case .modern:
            let r = 0.0 + t * 0.08
            let g = 0.45 + t * 0.12
            let bl = 0.85 + t * 0.1
            return (min(r, 1), min(g, 1), min(bl, 1))
        case .minimal:
            return (0.45 + t * 0.05, 0.48 + t * 0.04, 0.55 + t * 0.06)
        case .executive:
            let r = 0.08 + t * 0.06
            let g = 0.12 + t * 0.05
            let b = 0.22 + t * 0.08
            return (r, g, b)
        case .creative:
            let r = 0.25 + t * 0.2
            let g = 0.35 + t * 0.15
            let b = 0.72 + t * 0.15
            return (min(r, 1), min(g, 1), min(b, 1))
        }
    }
}

// MARK: - Catalog

enum CVTemplateCatalog {
    static let all: [CVTemplate] = [
        // Minimal family (matches the reference screenshot)
        CVTemplate(
            id: "paper-white",
            name: "Paper White",
            family: .minimal,
            headline: .centered,
            accent: .none,
            layout: .singleColumn,
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "swiss",
            name: "Swiss",
            family: .minimal,
            headline: .centered,
            accent: .redUnderline,
            layout: .twoColumn(sidebar: .leading, tinted: false),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "mono",
            name: "Mono",
            family: .minimal,
            headline: .leftAligned,
            accent: .redUnderline,
            layout: .singleColumn,
            sectionLabelStyle: .slashed
        ),
        CVTemplate(
            id: "airy",
            name: "Airy",
            family: .minimal,
            headline: .leftWithInitials,
            accent: .none,
            layout: .twoColumn(sidebar: .trailing, tinted: false),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "tabular",
            name: "Tabular",
            family: .minimal,
            headline: .leftAligned,
            accent: .none,
            layout: .singleColumn,
            sectionLabelStyle: .bracketed
        ),
        CVTemplate(
            id: "facet",
            name: "Facet",
            family: .minimal,
            headline: .avatarStacked,
            accent: .none,
            layout: .twoColumn(sidebar: .leading, tinted: true),
            sectionLabelStyle: .uppercase
        ),

        // Professional family
        CVTemplate(
            id: "corporate",
            name: "Corporate",
            family: .professional,
            headline: .leftAligned,
            accent: .blueBar,
            layout: .singleColumn,
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "atlas",
            name: "Atlas",
            family: .professional,
            headline: .centered,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .leading, tinted: true),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "ledger",
            name: "Ledger",
            family: .professional,
            headline: .leftAligned,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .trailing, tinted: false),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "harbor",
            name: "Harbor",
            family: .professional,
            headline: .leftWithInitials,
            accent: .none,
            layout: .twoColumn(sidebar: .leading, tinted: true),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "metro",
            name: "Metro",
            family: .professional,
            headline: .centered,
            accent: .blueBar,
            layout: .singleColumn,
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "pinstripe",
            name: "Pinstripe",
            family: .professional,
            headline: .leftAligned,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .leading, tinted: false),
            sectionLabelStyle: .uppercase
        ),

        // Modern family
        CVTemplate(
            id: "vertex",
            name: "Vertex",
            family: .modern,
            headline: .leftWithInitials,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .leading, tinted: true),
            sectionLabelStyle: .slashed
        ),
        CVTemplate(
            id: "linea",
            name: "Linea",
            family: .modern,
            headline: .leftAligned,
            accent: .blueBar,
            layout: .singleColumn,
            sectionLabelStyle: .slashed
        ),
        CVTemplate(
            id: "prism",
            name: "Prism",
            family: .modern,
            headline: .avatarStacked,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .trailing, tinted: true),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "circuit",
            name: "Circuit",
            family: .modern,
            headline: .leftAligned,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .trailing, tinted: false),
            sectionLabelStyle: .slashed
        ),
        CVTemplate(
            id: "north",
            name: "North",
            family: .modern,
            headline: .leftWithInitials,
            accent: .none,
            layout: .twoColumn(sidebar: .leading, tinted: false),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "axis",
            name: "Axis",
            family: .modern,
            headline: .centered,
            accent: .blueBar,
            layout: .singleColumn,
            sectionLabelStyle: .bracketed
        ),

        // Creative family
        CVTemplate(
            id: "marigold",
            name: "Marigold",
            family: .creative,
            headline: .avatarStacked,
            accent: .redBar,
            layout: .twoColumn(sidebar: .leading, tinted: true),
            sectionLabelStyle: .slashed
        ),
        CVTemplate(
            id: "ember",
            name: "Ember",
            family: .creative,
            headline: .leftWithInitials,
            accent: .redBar,
            layout: .twoColumn(sidebar: .trailing, tinted: true),
            sectionLabelStyle: .slashed
        ),
        CVTemplate(
            id: "lattice",
            name: "Lattice",
            family: .creative,
            headline: .leftAligned,
            accent: .redUnderline,
            layout: .singleColumn,
            sectionLabelStyle: .bracketed
        ),
        CVTemplate(
            id: "bloom",
            name: "Bloom",
            family: .creative,
            headline: .avatarStacked,
            accent: .redBar,
            layout: .singleColumn,
            sectionLabelStyle: .slashed
        ),
        CVTemplate(
            id: "studio",
            name: "Studio",
            family: .creative,
            headline: .leftWithInitials,
            accent: .redUnderline,
            layout: .twoColumn(sidebar: .leading, tinted: true),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "kite",
            name: "Kite",
            family: .creative,
            headline: .centered,
            accent: .redBar,
            layout: .twoColumn(sidebar: .trailing, tinted: false),
            sectionLabelStyle: .slashed
        ),

        // Executive family
        CVTemplate(
            id: "regent",
            name: "Regent",
            family: .executive,
            headline: .centered,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .leading, tinted: true),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "monarch",
            name: "Monarch",
            family: .executive,
            headline: .centered,
            accent: .blueBar,
            layout: .singleColumn,
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "sterling",
            name: "Sterling",
            family: .executive,
            headline: .leftAligned,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .trailing, tinted: false),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "summit",
            name: "Summit",
            family: .executive,
            headline: .centered,
            accent: .redUnderline,
            layout: .twoColumn(sidebar: .leading, tinted: false),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "estate",
            name: "Estate",
            family: .executive,
            headline: .leftWithInitials,
            accent: .blueBar,
            layout: .twoColumn(sidebar: .trailing, tinted: true),
            sectionLabelStyle: .uppercase
        ),
        CVTemplate(
            id: "chairman",
            name: "Chairman",
            family: .executive,
            headline: .leftAligned,
            accent: .blueBar,
            layout: .singleColumn,
            sectionLabelStyle: .uppercase
        )
    ]
}

// MARK: - View

/// Standalone NSView for the CV Maker route. Renders the template gallery with
/// header, segmented category groups, family chips, a thumbnail grid, and a
/// bottom CTA. Hosts inside the same `nonHomeHost` slot as Saved Jobs/Settings.
final class CVMakerPageView: NSView {

    /// Light-theme palette aligned with the rest of the dashboard (brand blue + neutral grays on white).
    private enum Palette {
        static let pageBackground = NSColor(srgbRed: 1, green: 1, blue: 1, alpha: 1)
        static let mutedSurface = NSColor(srgbRed: 247 / 255, green: 247 / 255, blue: 247 / 255, alpha: 1)
        static let chipRestFill = NSColor(srgbRed: 244 / 255, green: 246 / 255, blue: 250 / 255, alpha: 1)
        static let chipBorder = NSColor(srgbRed: 222 / 255, green: 226 / 255, blue: 233 / 255, alpha: 1)
        static let chipHoverFill = NSColor(srgbRed: 236 / 255, green: 240 / 255, blue: 246 / 255, alpha: 1)
        static let chipBadgeBackground = NSColor(srgbRed: 233 / 255, green: 236 / 255, blue: 241 / 255, alpha: 1)
        static let chipBadgeText = NSColor(srgbRed: 90 / 255, green: 102 / 255, blue: 121 / 255, alpha: 1)
        static let activeChipBackground = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
        static let activeChipHover = NSColor(srgbRed: 28 / 255, green: 70 / 255, blue: 140 / 255, alpha: 1)
        static let activeChipText = NSColor.white
        static let activeChipBadgeBackground = NSColor.white.withAlphaComponent(0.22)
        static let activeChipBadgeText = NSColor.white
        static let primaryText = NSColor(srgbRed: 31 / 255, green: 41 / 255, blue: 55 / 255, alpha: 1)
        static let secondaryText = NSColor(srgbRed: 100 / 255, green: 116 / 255, blue: 139 / 255, alpha: 1)
        static let cardBorder = NSColor(srgbRed: 216 / 255, green: 223 / 255, blue: 233 / 255, alpha: 1)
        static let cardBorderHover = NSColor(srgbRed: 178 / 255, green: 196 / 255, blue: 225 / 255, alpha: 1)
        static let cardBorderSelected = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
        static let cardFooter = NSColor(srgbRed: 250 / 255, green: 251 / 255, blue: 253 / 255, alpha: 1)
        static let previewSurface = NSColor(srgbRed: 252 / 255, green: 252 / 255, blue: 252 / 255, alpha: 1)
        static let previewPaper = NSColor.white
        static let previewSidebarTint = NSColor(srgbRed: 244 / 255, green: 246 / 255, blue: 250 / 255, alpha: 1)
        static let previewInk = NSColor(srgbRed: 38 / 255, green: 50 / 255, blue: 71 / 255, alpha: 1)
        static let previewMuted = NSColor(srgbRed: 165 / 255, green: 175 / 255, blue: 192 / 255, alpha: 1)
        static let previewAccentRed = NSColor(srgbRed: 207 / 255, green: 67 / 255, blue: 50 / 255, alpha: 1)
        static let previewAccentBlue = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
        static let ctaBackground = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
        static let ctaHover = NSColor(srgbRed: 28 / 255, green: 70 / 255, blue: 140 / 255, alpha: 1)
        static let ctaText = NSColor.white
        static let overlayTint = NSColor.black.withAlphaComponent(0.45)
        static let selectionGlow = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 0.55)
        static let gradientTop = NSColor(srgbRed: 250 / 255, green: 252 / 255, blue: 1, alpha: 1)
        static let gradientBottom = NSColor(srgbRed: 236 / 255, green: 244 / 255, blue: 1, alpha: 1)
    }

    private let pageGradientLayer = CAGradientLayer()
    private let filterChrome = NSVisualEffectView()
    private let filterStack = NSStackView()

    private let titleLabel = NSTextField(labelWithString: "Templates")
    private let subtitleLabel = NSTextField(labelWithString: "Polished layouts with live previews — pick a style that fits your story.")
    private let groupTabsRow = NSStackView()
    private let familyChipsRow = NSStackView()
    private let scrollView = NSScrollView()
    private let gridDocument = TopFlippedView()
    private let gridStack = NSStackView()
    private let ctaButton = CVHoverableButton(title: "Use Template & Select Profile  →", target: nil, action: nil)

    private var selectedGroup: CVCategoryGroup = .designBased
    private var selectedFamily: CVDesignFamily? = nil // nil == "All"
    private var selectedTemplateID: String? = "paper-white"
    /// Shown immediately; replaced when `CVTemplateFetchService` returns AI-generated entries.
    private var activeCatalog: [CVTemplate] = CVTemplateCatalog.all
    private var groupTabButtons: [CVCategoryGroup: CVChipButton] = [:]
    private var familyChipButtons: [CVDesignFamily?: CVChipButton] = [:]
    private var templateCardsByID: [String: CVTemplateCard] = [:]

    private var appliedGridColumnCount: Int = 0

    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        configureLayout()
        reloadFamilyChips()
        reloadTemplateGrid()
        updateSelectedChipStates()
        beginLoadingAICatalogIfPossible()
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layout() {
        super.layout()
        pageGradientLayer.frame = bounds
        layoutGridCardsIfNeeded()
    }

    // MARK: Setup

    private func configureLayout() {
        wantsLayer = true
        layer?.backgroundColor = NSColor.clear.cgColor

        pageGradientLayer.colors = [Palette.gradientBottom.cgColor, Palette.gradientTop.cgColor]
        pageGradientLayer.locations = [0, 1] as [NSNumber]
        pageGradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
        pageGradientLayer.endPoint = CGPoint(x: 0.5, y: 1)
        layer?.insertSublayer(pageGradientLayer, at: 0)

        filterChrome.translatesAutoresizingMaskIntoConstraints = false
        filterChrome.material = .sidebar
        filterChrome.blendingMode = .withinWindow
        filterChrome.state = .active
        filterChrome.wantsLayer = true
        filterChrome.layer?.cornerRadius = 18
        filterChrome.layer?.borderWidth = 1
        filterChrome.layer?.borderColor = NSColor.white.withAlphaComponent(0.65).cgColor

        filterStack.orientation = .vertical
        filterStack.spacing = 12
        filterStack.alignment = .leading
        filterStack.translatesAutoresizingMaskIntoConstraints = false
        filterStack.addArrangedSubview(groupTabsRow)
        filterStack.addArrangedSubview(familyChipsRow)
        filterChrome.addSubview(filterStack)
        NSLayoutConstraint.activate([
            filterStack.leadingAnchor.constraint(equalTo: filterChrome.leadingAnchor, constant: 14),
            filterStack.trailingAnchor.constraint(equalTo: filterChrome.trailingAnchor, constant: -14),
            filterStack.topAnchor.constraint(equalTo: filterChrome.topAnchor, constant: 12),
            filterStack.bottomAnchor.constraint(equalTo: filterChrome.bottomAnchor, constant: -12)
        ])

        titleLabel.font = .systemFont(ofSize: 22, weight: .bold)
        titleLabel.textColor = Palette.primaryText
        titleLabel.alignment = .left

        subtitleLabel.font = .systemFont(ofSize: 13, weight: .regular)
        subtitleLabel.textColor = Palette.secondaryText
        subtitleLabel.alignment = .left
        subtitleLabel.maximumNumberOfLines = 1

        let headerStack = NSStackView(views: [titleLabel, subtitleLabel])
        headerStack.orientation = .vertical
        headerStack.spacing = 4
        headerStack.alignment = .leading
        headerStack.translatesAutoresizingMaskIntoConstraints = false

        groupTabsRow.orientation = .horizontal
        groupTabsRow.spacing = 8
        groupTabsRow.alignment = .centerY
        groupTabsRow.distribution = .fillEqually
        groupTabsRow.translatesAutoresizingMaskIntoConstraints = false
        configureGroupTabs()

        familyChipsRow.orientation = .horizontal
        familyChipsRow.spacing = 8
        familyChipsRow.alignment = .centerY
        familyChipsRow.translatesAutoresizingMaskIntoConstraints = false

        gridStack.orientation = .vertical
        gridStack.spacing = 26
        gridStack.alignment = .leading
        gridStack.distribution = .fill
        gridStack.translatesAutoresizingMaskIntoConstraints = false

        gridDocument.translatesAutoresizingMaskIntoConstraints = false
        gridDocument.addSubview(gridStack)
        NSLayoutConstraint.activate([
            gridStack.leadingAnchor.constraint(equalTo: gridDocument.leadingAnchor),
            gridStack.trailingAnchor.constraint(equalTo: gridDocument.trailingAnchor),
            gridStack.topAnchor.constraint(equalTo: gridDocument.topAnchor),
            gridStack.bottomAnchor.constraint(equalTo: gridDocument.bottomAnchor)
        ])

        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.hasVerticalScroller = true
        scrollView.hasHorizontalScroller = false
        scrollView.scrollerStyle = .legacy
        scrollView.autohidesScrollers = true
        scrollView.drawsBackground = false
        scrollView.borderType = .noBorder
        scrollView.documentView = gridDocument
        NSLayoutConstraint.activate([
            gridDocument.topAnchor.constraint(equalTo: scrollView.contentView.topAnchor),
            gridDocument.leadingAnchor.constraint(equalTo: scrollView.contentView.leadingAnchor),
            gridDocument.widthAnchor.constraint(equalTo: scrollView.contentView.widthAnchor)
        ])

        ctaButton.translatesAutoresizingMaskIntoConstraints = false
        styleCTAButton(ctaButton)
        ctaButton.target = self
        ctaButton.action = #selector(didTapUseTemplate)

        addSubview(headerStack)
        addSubview(filterChrome)
        addSubview(scrollView)
        addSubview(ctaButton)

        let horizontalInset: CGFloat = 32

        NSLayoutConstraint.activate([
            headerStack.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
            headerStack.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -horizontalInset),
            headerStack.topAnchor.constraint(equalTo: topAnchor, constant: 8),

            filterChrome.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
            filterChrome.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -horizontalInset),
            filterChrome.topAnchor.constraint(equalTo: headerStack.bottomAnchor, constant: 16),

            scrollView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
            scrollView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -horizontalInset),
            scrollView.topAnchor.constraint(equalTo: filterChrome.bottomAnchor, constant: 18),
            scrollView.bottomAnchor.constraint(equalTo: ctaButton.topAnchor, constant: -18),

            ctaButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
            ctaButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -horizontalInset),
            ctaButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -24),
            ctaButton.heightAnchor.constraint(equalToConstant: 52)
        ])
    }

    private func configureGroupTabs() {
        groupTabsRow.arrangedSubviews.forEach {
            groupTabsRow.removeArrangedSubview($0)
            $0.removeFromSuperview()
        }
        groupTabButtons.removeAll()
        let groups: [(CVCategoryGroup, String)] = [
            (.designBased, "rectangle.3.group"),
            (.professionBased, "person.2")
        ]
        for (group, symbolName) in groups {
            let count = templates(forGroup: group, family: nil).count
            let chip = CVChipButton(
                title: group.title,
                badgeText: "\(count)",
                leadingSymbol: symbolName,
                style: .pillLarge
            )
            chip.translatesAutoresizingMaskIntoConstraints = false
            chip.onSelect = { [weak self] in self?.didSelectGroup(group) }
            groupTabsRow.addArrangedSubview(chip)
            groupTabButtons[group] = chip
        }
    }

    private func reloadFamilyChips() {
        familyChipsRow.arrangedSubviews.forEach {
            familyChipsRow.removeArrangedSubview($0)
            $0.removeFromSuperview()
        }
        familyChipButtons.removeAll()

        let allCount = templates(forGroup: selectedGroup, family: nil).count
        let allChip = CVChipButton(title: "All", badgeText: "\(allCount)", leadingSymbol: nil, style: .pillSmall)
        allChip.onSelect = { [weak self] in self?.didSelectFamily(nil) }
        familyChipsRow.addArrangedSubview(allChip)
        familyChipButtons[nil] = allChip

        for family in CVDesignFamily.allCases {
            let count = templates(forGroup: selectedGroup, family: family).count
            guard count > 0 else { continue }
            let chip = CVChipButton(title: family.title, badgeText: "\(count)", leadingSymbol: nil, style: .pillSmall)
            chip.onSelect = { [weak self] in self?.didSelectFamily(family) }
            familyChipsRow.addArrangedSubview(chip)
            familyChipButtons[family] = chip
        }

        if let f = selectedFamily, templates(forGroup: selectedGroup, family: f).isEmpty {
            selectedFamily = nil
        }
    }

    // MARK: Data filtering

    private func templates(forGroup group: CVCategoryGroup, family: CVDesignFamily?) -> [CVTemplate] {
        let base = activeCatalog.filter { $0.galleryGroup == group }
        guard let family else { return base }
        return base.filter { $0.family == family }
    }

    private var visibleTemplates: [CVTemplate] {
        templates(forGroup: selectedGroup, family: selectedFamily)
    }

    // MARK: Grid

    private func reloadTemplateGrid() {
        gridStack.arrangedSubviews.forEach {
            gridStack.removeArrangedSubview($0)
            $0.removeFromSuperview()
        }
        templateCardsByID.removeAll()

        let templates = visibleTemplates
        if templates.isEmpty {
            let empty = NSTextField(labelWithString: "No templates yet for this category.")
            empty.font = .systemFont(ofSize: 13)
            empty.textColor = Palette.secondaryText
            gridStack.addArrangedSubview(empty)
            return
        }

        let columns = resolvedGridColumnCount()
        var index = 0
        while index < templates.count {
            let row = NSStackView()
            row.orientation = .horizontal
            row.spacing = 22
            row.distribution = .fillEqually
            row.alignment = .top
            row.translatesAutoresizingMaskIntoConstraints = false
            row.setHuggingPriority(.defaultLow, for: .horizontal)

            for column in 0..<columns {
                let position = index + column
                if position < templates.count {
                    let template = templates[position]
                    let card = CVTemplateCard(template: template, palette: palette())
                    card.translatesAutoresizingMaskIntoConstraints = false
                    card.onSelect = { [weak self] in self?.didSelectTemplate(template.id) }
                    card.onPreview = { [weak self] in self?.didPreviewTemplate(template.id) }
                    row.addArrangedSubview(card)
                    templateCardsByID[template.id] = card
                } else {
                    let filler = NSView()
                    filler.translatesAutoresizingMaskIntoConstraints = false
                    row.addArrangedSubview(filler)
                }
            }
            gridStack.addArrangedSubview(row)
            row.widthAnchor.constraint(equalTo: gridStack.widthAnchor).isActive = true
            index += columns
        }

        if selectedTemplateID == nil || templateCardsByID[selectedTemplateID ?? ""] == nil {
            selectedTemplateID = templates.first?.id
        }
        applySelectionToCards()
    }

    private func galleryLayoutWidth() -> CGFloat {
        if bounds.width > 8 { return bounds.width }
        if let s = superview, s.bounds.width > 8 { return max(s.bounds.width - 64, 400) }
        return 900
    }

    private func layoutGridCardsIfNeeded() {
        let cols = resolvedGridColumnCount()
        guard cols != appliedGridColumnCount else { return }
        appliedGridColumnCount = cols
        reloadTemplateGrid()
        updateSelectedChipStates()
    }

    private func resolvedGridColumnCount() -> Int {
        let w = max(galleryLayoutWidth(), 400)
        if w < 780 { return 2 }
        if w < 1080 { return 3 }
        return 4
    }

    private func applySelectionToCards() {
        for (id, card) in templateCardsByID {
            card.isSelected = (id == selectedTemplateID)
        }
    }

    private func palette() -> CVTemplateCardPalette {
        CVTemplateCardPalette(
            border: Palette.cardBorder,
            borderHover: Palette.cardBorderHover,
            borderSelected: Palette.cardBorderSelected,
            selectionGlow: Palette.selectionGlow,
            footerBackground: Palette.cardFooter,
            previewSurface: Palette.previewSurface,
            previewPaper: Palette.previewPaper,
            previewSidebarTint: Palette.previewSidebarTint,
            previewInk: Palette.previewInk,
            previewMuted: Palette.previewMuted,
            previewAccentRed: Palette.previewAccentRed,
            previewAccentBlue: Palette.previewAccentBlue,
            primaryText: Palette.primaryText,
            secondaryText: Palette.secondaryText,
            overlayTint: Palette.overlayTint
        )
    }

    // MARK: Selection

    private func didSelectGroup(_ group: CVCategoryGroup) {
        guard selectedGroup != group else { return }
        selectedGroup = group
        selectedFamily = nil
        reloadFamilyChips()
        reloadTemplateGrid()
        updateSelectedChipStates()
    }

    private func didSelectFamily(_ family: CVDesignFamily?) {
        guard selectedFamily != family else { return }
        selectedFamily = family
        reloadTemplateGrid()
        updateSelectedChipStates()
    }

    private func didSelectTemplate(_ id: String) {
        selectedTemplateID = id
        applySelectionToCards()
    }

    private func didPreviewTemplate(_ id: String) {
        selectedTemplateID = id
        applySelectionToCards()
        guard let template = activeCatalog.first(where: { $0.id == id }) else { return }
        presentPlaceholderAlert(
            title: "Preview \"\(template.name)\"",
            message: "Full-page previews and PDF export are coming soon."
        )
    }

    @objc private func didTapUseTemplate() {
        guard let id = selectedTemplateID,
              let template = activeCatalog.first(where: { $0.id == id }) else {
            presentPlaceholderAlert(title: "Pick a template", message: "Select a template first, then choose a profile to continue.")
            return
        }
        presentPlaceholderAlert(
            title: "Use \"\(template.name)\"",
            message: "Profile selection and CV editing are not available in this preview build yet."
        )
    }

    private func updateSelectedChipStates() {
        for (group, chip) in groupTabButtons {
            chip.isSelected = (group == selectedGroup)
        }
        for (family, chip) in familyChipButtons {
            chip.isSelected = (family == selectedFamily)
        }
    }

    private func styleCTAButton(_ button: CVHoverableButton) {
        button.title = "Use Template & Select Profile  →"
        button.font = .systemFont(ofSize: 14, weight: .semibold)
        button.isBordered = false
        button.bezelStyle = .rounded
        button.focusRingType = .none
        button.contentTintColor = Palette.ctaText
        button.wantsLayer = true
        button.layer?.cornerRadius = 14
        button.layer?.backgroundColor = Palette.ctaBackground.cgColor
        button.pointerCursor = true
        let attrs: [NSAttributedString.Key: Any] = [
            .foregroundColor: Palette.ctaText,
            .font: NSFont.systemFont(ofSize: 14, weight: .semibold)
        ]
        button.attributedTitle = NSAttributedString(string: button.title, attributes: attrs)
        button.hoverHandler = { [weak button] hovering in
            button?.layer?.backgroundColor = (hovering ? Palette.ctaHover : Palette.ctaBackground).cgColor
        }
    }

    private func beginLoadingAICatalogIfPossible() {
        guard OpenAIConfiguration.hasAPIKey else { return }
        let defaultSubtitle = subtitleLabel.stringValue
        subtitleLabel.stringValue = "Fetching AI-curated templates…"
        CVTemplateFetchService.shared.fetchTemplates { [weak self] result in
            DispatchQueue.main.async {
                guard let self else { return }
                switch result {
                case .success(let list):
                    self.subtitleLabel.stringValue = defaultSubtitle
                    if !list.isEmpty {
                        self.activeCatalog = list
                        self.configureGroupTabs()
                        self.reloadFamilyChips()
                        self.reloadTemplateGrid()
                        self.updateSelectedChipStates()
                    }
                case .failure:
                    self.subtitleLabel.stringValue = "Couldn’t load AI templates — showing the built-in gallery."
                    DispatchQueue.main.asyncAfter(deadline: .now() + 5.5) { [weak self] in
                        self?.subtitleLabel.stringValue = defaultSubtitle
                    }
                }
            }
        }
    }

    private func presentPlaceholderAlert(title: String, message: String) {
        let alert = NSAlert()
        alert.messageText = title
        alert.informativeText = message
        alert.alertStyle = .informational
        alert.addButton(withTitle: "OK")
        if let window {
            alert.beginSheetModal(for: window)
        } else {
            alert.runModal()
        }
    }
}

// MARK: - Chip / pill button

/// Reusable pill button used for both the top section toggle ("Design-Based"
/// vs "Profession-Based") and the family filter chips. Switches between an
/// active brand-blue state and a soft neutral state, with an inline count badge.
private final class CVChipButton: NSView {
    enum Style { case pillLarge, pillSmall }

    var onSelect: (() -> Void)?
    var isSelected: Bool = false { didSet { applyState() } }
    private let style: Style
    private let titleLabel = NSTextField(labelWithString: "")
    private let badgeLabel = NSTextField(labelWithString: "")
    private let badgePill = NSView()
    private let symbolView = NSImageView()
    private let stack = NSStackView()
    private var isHovering: Bool = false
    private var didPushCursor: Bool = false
    private var trackingArea: NSTrackingArea?

    private enum Palette {
        static let restFill = NSColor(srgbRed: 247 / 255, green: 249 / 255, blue: 252 / 255, alpha: 1)
        static let restBorder = NSColor(srgbRed: 222 / 255, green: 226 / 255, blue: 233 / 255, alpha: 1)
        static let hoverFill = NSColor(srgbRed: 238 / 255, green: 241 / 255, blue: 247 / 255, alpha: 1)
        static let activeFill = NSColor(srgbRed: 37 / 255, green: 87 / 255, blue: 167 / 255, alpha: 1)
        static let activeFillHover = NSColor(srgbRed: 28 / 255, green: 70 / 255, blue: 140 / 255, alpha: 1)
        static let restText = NSColor(srgbRed: 71 / 255, green: 85 / 255, blue: 105 / 255, alpha: 1)
        static let activeText = NSColor.white
        static let restBadge = NSColor(srgbRed: 230 / 255, green: 234 / 255, blue: 240 / 255, alpha: 1)
        static let restBadgeText = NSColor(srgbRed: 100 / 255, green: 116 / 255, blue: 139 / 255, alpha: 1)
        static let activeBadge = NSColor.white.withAlphaComponent(0.22)
        static let activeBadgeText = NSColor.white
    }

    init(title: String, badgeText: String, leadingSymbol: String?, style: Style) {
        self.style = style
        super.init(frame: .zero)
        wantsLayer = true
        translatesAutoresizingMaskIntoConstraints = false

        let height: CGFloat = style == .pillLarge ? 38 : 30
        layer?.cornerRadius = height / 2
        layer?.borderWidth = 1
        heightAnchor.constraint(equalToConstant: height).isActive = true

        titleLabel.stringValue = title
        titleLabel.font = .systemFont(ofSize: style == .pillLarge ? 13 : 12, weight: .semibold)
        titleLabel.isBordered = false
        titleLabel.drawsBackground = false
        titleLabel.isEditable = false
        titleLabel.isSelectable = false

        badgeLabel.stringValue = badgeText
        badgeLabel.font = .systemFont(ofSize: 10.5, weight: .semibold)
        badgeLabel.alignment = .center
        badgeLabel.isBordered = false
        badgeLabel.drawsBackground = false
        badgeLabel.isEditable = false
        badgeLabel.isSelectable = false

        badgePill.translatesAutoresizingMaskIntoConstraints = false
        badgePill.wantsLayer = true
        badgePill.layer?.cornerRadius = 9
        badgePill.addSubview(badgeLabel)
        badgeLabel.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            badgeLabel.leadingAnchor.constraint(equalTo: badgePill.leadingAnchor, constant: 7),
            badgeLabel.trailingAnchor.constraint(equalTo: badgePill.trailingAnchor, constant: -7),
            badgeLabel.centerYAnchor.constraint(equalTo: badgePill.centerYAnchor),
            badgePill.heightAnchor.constraint(equalToConstant: 18),
            badgePill.widthAnchor.constraint(greaterThanOrEqualToConstant: 22)
        ])

        stack.orientation = .horizontal
        stack.spacing = 8
        stack.alignment = .centerY
        stack.translatesAutoresizingMaskIntoConstraints = false

        if let symbol = leadingSymbol, style == .pillLarge {
            symbolView.translatesAutoresizingMaskIntoConstraints = false
            symbolView.image = NSImage(systemSymbolName: symbol, accessibilityDescription: nil)
            symbolView.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 13, weight: .semibold)
            stack.addArrangedSubview(symbolView)
        }
        stack.addArrangedSubview(titleLabel)
        stack.addArrangedSubview(badgePill)

        addSubview(stack)
        let horizontalInset: CGFloat = style == .pillLarge ? 16 : 12
        if style == .pillLarge {
            // Group toggle shares a row: equal widths from the parent stack; keep
            // icon + label + badge centered so selection state does not reshuffle width.
            NSLayoutConstraint.activate([
                stack.centerXAnchor.constraint(equalTo: centerXAnchor),
                stack.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor, constant: horizontalInset),
                stack.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -horizontalInset),
                stack.centerYAnchor.constraint(equalTo: centerYAnchor)
            ])
            setContentHuggingPriority(.defaultLow, for: .horizontal)
        } else {
            NSLayoutConstraint.activate([
                stack.leadingAnchor.constraint(equalTo: leadingAnchor, constant: horizontalInset),
                stack.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -horizontalInset),
                stack.centerYAnchor.constraint(equalTo: centerYAnchor)
            ])
            setContentHuggingPriority(.required, for: .horizontal)
        }
        applyState()
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func hitTest(_ point: NSPoint) -> NSView? {
        guard let superview else { return super.hitTest(point) }
        let local = convert(point, from: superview)
        return bounds.contains(local) ? self : nil
    }

    override func mouseDown(with event: NSEvent) {
        onSelect?()
    }

    override func updateTrackingAreas() {
        super.updateTrackingAreas()
        if let area = trackingArea { removeTrackingArea(area) }
        let area = NSTrackingArea(
            rect: bounds,
            options: [.activeInKeyWindow, .mouseEnteredAndExited, .inVisibleRect],
            owner: self,
            userInfo: nil
        )
        addTrackingArea(area)
        trackingArea = area
    }

    override func mouseEntered(with event: NSEvent) {
        super.mouseEntered(with: event)
        isHovering = true
        applyState()
        if !didPushCursor {
            NSCursor.pointingHand.push()
            didPushCursor = true
        }
    }

    override func mouseExited(with event: NSEvent) {
        super.mouseExited(with: event)
        isHovering = false
        applyState()
        if didPushCursor {
            NSCursor.pop()
            didPushCursor = false
        }
    }

    override func viewWillMove(toWindow newWindow: NSWindow?) {
        super.viewWillMove(toWindow: newWindow)
        if newWindow == nil, didPushCursor {
            NSCursor.pop()
            didPushCursor = false
            isHovering = false
        }
    }

    private func applyState() {
        let fill: NSColor
        let border: NSColor
        let textColor: NSColor
        let badgeFill: NSColor
        let badgeText: NSColor
        if isSelected {
            fill = isHovering ? Palette.activeFillHover : Palette.activeFill
            border = fill
            textColor = Palette.activeText
            badgeFill = Palette.activeBadge
            badgeText = Palette.activeBadgeText
        } else {
            fill = isHovering ? Palette.hoverFill : Palette.restFill
            border = Palette.restBorder
            textColor = Palette.restText
            badgeFill = Palette.restBadge
            badgeText = Palette.restBadgeText
        }
        layer?.backgroundColor = fill.cgColor
        layer?.borderColor = border.cgColor
        titleLabel.textColor = textColor
        symbolView.contentTintColor = textColor
        badgePill.layer?.backgroundColor = badgeFill.cgColor
        badgeLabel.textColor = badgeText
    }
}

// MARK: - Template card

/// Premium gallery card: live résumé thumbnail, glass-style preview overlay, soft
/// shadow, and an animated brand border when selected.
private final class CVTemplateCard: NSView {
    var onSelect: (() -> Void)?
    var onPreview: (() -> Void)?
    var isSelected: Bool = false { didSet { applyChrome() } }
    private let template: CVTemplate
    private let palette: CVTemplateCardPalette
    private let previewSurface = NSView()
    private let preview: CVTemplatePreviewView
    private let nameLabel = NSTextField(labelWithString: "")
    private let categoryLabel = NSTextField(labelWithString: "")
    private let overlay = NSView()
    private let overlayBadge = NSView()
    private let overlayBadgeLabel = NSTextField(labelWithString: "Preview")
    private let overlayBadgeIcon = NSImageView()
    private var trackingArea: NSTrackingArea?
    private var isHovering: Bool = false
    private var didPushCursor: Bool = false

    init(template: CVTemplate, palette: CVTemplateCardPalette) {
        self.template = template
        self.palette = palette
        self.preview = CVTemplatePreviewView(template: template, palette: palette)
        super.init(frame: .zero)
        wantsLayer = true
        layer?.masksToBounds = false
        layer?.cornerRadius = 24
        layer?.backgroundColor = NSColor.white.cgColor
        translatesAutoresizingMaskIntoConstraints = false
        heightAnchor.constraint(greaterThanOrEqualToConstant: 292).isActive = true

        previewSurface.translatesAutoresizingMaskIntoConstraints = false
        previewSurface.wantsLayer = true
        previewSurface.layer?.backgroundColor = palette.previewSurface.cgColor

        preview.translatesAutoresizingMaskIntoConstraints = false
        previewSurface.addSubview(preview)

        nameLabel.stringValue = template.name
        nameLabel.font = .systemFont(ofSize: 14, weight: .semibold)
        nameLabel.textColor = palette.primaryText
        nameLabel.isBordered = false
        nameLabel.drawsBackground = false
        nameLabel.isEditable = false
        nameLabel.isSelectable = false

        categoryLabel.stringValue = "\(template.category) · \(template.layoutType.gallerySubtitle)"
        categoryLabel.font = .systemFont(ofSize: 11.5, weight: .regular)
        categoryLabel.textColor = palette.secondaryText
        categoryLabel.isBordered = false
        categoryLabel.drawsBackground = false
        categoryLabel.isEditable = false
        categoryLabel.isSelectable = false

        let footerStack = NSStackView(views: [nameLabel, categoryLabel])
        footerStack.orientation = .vertical
        footerStack.spacing = 3
        footerStack.alignment = .leading
        footerStack.translatesAutoresizingMaskIntoConstraints = false

        let footer = NSView()
        footer.translatesAutoresizingMaskIntoConstraints = false
        footer.wantsLayer = true
        footer.layer?.backgroundColor = palette.footerBackground.cgColor
        footer.addSubview(footerStack)
        NSLayoutConstraint.activate([
            footerStack.leadingAnchor.constraint(equalTo: footer.leadingAnchor, constant: 16),
            footerStack.trailingAnchor.constraint(lessThanOrEqualTo: footer.trailingAnchor, constant: -16),
            footerStack.topAnchor.constraint(equalTo: footer.topAnchor, constant: 13),
            footerStack.bottomAnchor.constraint(equalTo: footer.bottomAnchor, constant: -13)
        ])

        addSubview(previewSurface)
        addSubview(footer)
        addSubview(overlay)
        configureOverlay()

        NSLayoutConstraint.activate([
            previewSurface.topAnchor.constraint(equalTo: topAnchor),
            previewSurface.leadingAnchor.constraint(equalTo: leadingAnchor),
            previewSurface.trailingAnchor.constraint(equalTo: trailingAnchor),
            previewSurface.heightAnchor.constraint(greaterThanOrEqualToConstant: 236),

            preview.topAnchor.constraint(equalTo: previewSurface.topAnchor, constant: 14),
            preview.leadingAnchor.constraint(equalTo: previewSurface.leadingAnchor, constant: 16),
            preview.trailingAnchor.constraint(equalTo: previewSurface.trailingAnchor, constant: -16),
            preview.bottomAnchor.constraint(equalTo: previewSurface.bottomAnchor, constant: -14),

            footer.topAnchor.constraint(equalTo: previewSurface.bottomAnchor),
            footer.leadingAnchor.constraint(equalTo: leadingAnchor),
            footer.trailingAnchor.constraint(equalTo: trailingAnchor),
            footer.bottomAnchor.constraint(equalTo: bottomAnchor),

            overlay.topAnchor.constraint(equalTo: previewSurface.topAnchor),
            overlay.leadingAnchor.constraint(equalTo: previewSurface.leadingAnchor),
            overlay.trailingAnchor.constraint(equalTo: previewSurface.trailingAnchor),
            overlay.bottomAnchor.constraint(equalTo: previewSurface.bottomAnchor)
        ])
        applyChrome()
    }

    @available(*, unavailable)
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func layout() {
        super.layout()
        layer?.shadowPath = CGPath(roundedRect: bounds, cornerWidth: 24, cornerHeight: 24, transform: nil)
    }

    private func configureOverlay() {
        overlay.translatesAutoresizingMaskIntoConstraints = false
        overlay.wantsLayer = true
        overlay.layer?.backgroundColor = palette.overlayTint.cgColor
        overlay.alphaValue = 0
        overlay.isHidden = false

        overlayBadge.translatesAutoresizingMaskIntoConstraints = false
        overlayBadge.wantsLayer = true
        overlayBadge.layer?.backgroundColor = NSColor.white.withAlphaComponent(0.22).cgColor
        overlayBadge.layer?.cornerRadius = 20
        overlayBadge.layer?.borderWidth = 1
        overlayBadge.layer?.borderColor = NSColor.white.withAlphaComponent(0.45).cgColor

        overlayBadgeIcon.translatesAutoresizingMaskIntoConstraints = false
        overlayBadgeIcon.image = NSImage(systemSymbolName: "eye", accessibilityDescription: nil)
        overlayBadgeIcon.symbolConfiguration = NSImage.SymbolConfiguration(pointSize: 12, weight: .semibold)
        overlayBadgeIcon.contentTintColor = .white

        overlayBadgeLabel.font = .systemFont(ofSize: 12.5, weight: .semibold)
        overlayBadgeLabel.textColor = .white
        overlayBadgeLabel.isBordered = false
        overlayBadgeLabel.drawsBackground = false
        overlayBadgeLabel.isEditable = false
        overlayBadgeLabel.isSelectable = false

        let badgeStack = NSStackView(views: [overlayBadgeIcon, overlayBadgeLabel])
        badgeStack.orientation = .horizontal
        badgeStack.spacing = 7
        badgeStack.alignment = .centerY
        badgeStack.translatesAutoresizingMaskIntoConstraints = false

        overlayBadge.addSubview(badgeStack)
        overlay.addSubview(overlayBadge)
        NSLayoutConstraint.activate([
            badgeStack.leadingAnchor.constraint(equalTo: overlayBadge.leadingAnchor, constant: 16),
            badgeStack.trailingAnchor.constraint(equalTo: overlayBadge.trailingAnchor, constant: -16),
            badgeStack.topAnchor.constraint(equalTo: overlayBadge.topAnchor, constant: 9),
            badgeStack.bottomAnchor.constraint(equalTo: overlayBadge.bottomAnchor, constant: -9),
            overlayBadge.centerXAnchor.constraint(equalTo: overlay.centerXAnchor),
            overlayBadge.centerYAnchor.constraint(equalTo: overlay.centerYAnchor)
        ])
    }

    override func hitTest(_ point: NSPoint) -> NSView? {
        guard let superview else { return super.hitTest(point) }
        let local = convert(point, from: superview)
        return bounds.contains(local) ? self : nil
    }

    override func mouseDown(with event: NSEvent) {
        let local = convert(event.locationInWindow, from: nil)
        if overlay.frame.contains(local) {
            onPreview?()
        } else {
            playTapPulse()
            onSelect?()
        }
    }

    private func playTapPulse() {
        guard let l = layer else { return }
        let a = CABasicAnimation(keyPath: "transform")
        a.fromValue = NSValue(caTransform3D: CATransform3DIdentity)
        a.toValue = NSValue(caTransform3D: CATransform3DMakeScale(0.985, 0.985, 1))
        a.duration = 0.1
        a.autoreverses = true
        a.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        l.add(a, forKey: "tapPulse")
    }

    override func updateTrackingAreas() {
        super.updateTrackingAreas()
        if let area = trackingArea { removeTrackingArea(area) }
        let area = NSTrackingArea(
            rect: bounds,
            options: [.activeInKeyWindow, .mouseEnteredAndExited, .inVisibleRect],
            owner: self,
            userInfo: nil
        )
        addTrackingArea(area)
        trackingArea = area
    }

    override func mouseEntered(with event: NSEvent) {
        super.mouseEntered(with: event)
        isHovering = true
        animateOverlay(visible: true)
        applyChrome()
        if !didPushCursor {
            NSCursor.pointingHand.push()
            didPushCursor = true
        }
    }

    override func mouseExited(with event: NSEvent) {
        super.mouseExited(with: event)
        isHovering = false
        animateOverlay(visible: false)
        applyChrome()
        if didPushCursor {
            NSCursor.pop()
            didPushCursor = false
        }
    }

    override func viewWillMove(toWindow newWindow: NSWindow?) {
        super.viewWillMove(toWindow: newWindow)
        if newWindow == nil, didPushCursor {
            NSCursor.pop()
            didPushCursor = false
            isHovering = false
        }
    }

    private func animateOverlay(visible: Bool) {
        let target: CGFloat = visible ? 1 : 0
        NSAnimationContext.runAnimationGroup { context in
            context.duration = 0.18
            context.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
            context.allowsImplicitAnimation = true
            overlay.animator().alphaValue = target
        }
    }

    private func applyChrome() {
        if isSelected {
            layer?.borderColor = palette.borderSelected.cgColor
            layer?.borderWidth = 2.5
            layer?.shadowColor = palette.borderSelected.cgColor
            layer?.shadowOpacity = 0.42
            layer?.shadowRadius = 22
            layer?.shadowOffset = CGSize(width: 0, height: 10)
        } else if isHovering {
            layer?.borderColor = palette.borderHover.cgColor
            layer?.borderWidth = 1.5
            layer?.shadowColor = NSColor.black.cgColor
            layer?.shadowOpacity = 0.14
            layer?.shadowRadius = 18
            layer?.shadowOffset = CGSize(width: 0, height: 10)
        } else {
            layer?.borderColor = palette.border.cgColor
            layer?.borderWidth = 1
            layer?.shadowColor = NSColor.black.cgColor
            layer?.shadowOpacity = 0.08
            layer?.shadowRadius = 12
            layer?.shadowOffset = CGSize(width: 0, height: 6)
        }
    }
}

// MARK: - Helpers

/// Flipped origin so the grid stacks fill from the top.
private final class TopFlippedView: NSView {
    override var isFlipped: Bool { true }
}

/// Local copy of the dashboard's hoverable button so this file stays
/// self-contained without exposing the existing private classes.
private final class CVHoverableButton: NSButton {
    var hoverHandler: ((Bool) -> Void)?
    var pointerCursor: Bool = false
    private(set) var isHovering: Bool = false
    private var trackingArea: NSTrackingArea?
    private var didPushCursor: Bool = false

    override func updateTrackingAreas() {
        super.updateTrackingAreas()
        if let area = trackingArea { removeTrackingArea(area) }
        let area = NSTrackingArea(
            rect: bounds,
            options: [.activeInKeyWindow, .mouseEnteredAndExited, .inVisibleRect],
            owner: self,
            userInfo: nil
        )
        addTrackingArea(area)
        trackingArea = area
    }

    override func mouseEntered(with event: NSEvent) {
        super.mouseEntered(with: event)
        isHovering = true
        hoverHandler?(true)
        if pointerCursor, !didPushCursor {
            NSCursor.pointingHand.push()
            didPushCursor = true
        }
    }

    override func mouseExited(with event: NSEvent) {
        super.mouseExited(with: event)
        isHovering = false
        hoverHandler?(false)
        if didPushCursor {
            NSCursor.pop()
            didPushCursor = false
        }
    }

    override func viewWillMove(toWindow newWindow: NSWindow?) {
        super.viewWillMove(toWindow: newWindow)
        if newWindow == nil, didPushCursor {
            NSCursor.pop()
            didPushCursor = false
            isHovering = false
        }
    }
}