//
//  TooltipUsageExamples.swift
//  lichunWebsocket
//
//  Example implementations for integrating tooltips into app views
//  NOTE: These are reference examples only - do not use in production yet
//

import SwiftUI

// MARK: - Usage Example 1: Energy Badge Tooltip in HeaderView

/*
 Example of showing a tooltip when energy is low:

 struct HeaderView: View {
     @EnvironmentObject var webSocketService: WebSocketService
     @StateObject var tooltipManager = TooltipManager()

     var body: some View {
         HStack {
             // Energy badge
             HStack(spacing: 4) {
                 Image(systemName: "bolt.fill")
                     .foregroundColor(AppColors.energy)
                 Text("\(webSocketService.person.calcEnergy)")
                     .font(.appBodyBold)
                     .foregroundColor(AppColors.primaryText)
             }
             .padding(.horizontal, AppSpacing.sm)
             .padding(.vertical, AppSpacing.xs)
             .background(AppColors.cardBackground)
             .cornerRadius(AppSpacing.smallCornerRadius)
             .tooltip(
                 manager: tooltipManager,
                 id: "energy_bar",
                 title: "Energy System",
                 message: "Actions cost energy. Out of energy? Tap here to refill with diamonds or wait for natural regeneration.",
                 position: .bottom,
                 trigger: .manual
             )
             .onTapGesture {
                 // Handle energy refill
             }
             .onChange(of: webSocketService.person.calcEnergy) { newEnergy in
                 // Show tooltip when energy drops below 10 for first time
                 if newEnergy < 10 && !tooltipManager.hasSeenTooltip("energy_bar") {
                     tooltipManager.showTooltipIfNeeded(
                         "energy_bar",
                         title: "Low Energy",
                         message: "You're running low on energy. Tap here to refill with diamonds or wait for it to regenerate naturally.",
                         position: .bottom
                     )
                 }
             }
         }

         // Tooltip overlay
         if let tooltip = tooltipManager.activeTooltip {
             TooltipView(tooltip: tooltip) {
                 tooltipManager.dismissTooltip()
             }
             .transition(.scale.combined(with: .opacity))
             .zIndex(100)
         }
     }
 }
 */

// MARK: - Usage Example 2: First Activity Tooltip

/*
 Example of showing a tooltip when user sees activities tab for first time:

 struct ActivitiesView: View {
     @EnvironmentObject var webSocketService: WebSocketService
     @StateObject var tooltipManager = TooltipManager()

     var body: some View {
         VStack {
             // Activity list
             ScrollView {
                 // ... activity cards ...
             }
             .tooltip(
                 manager: tooltipManager,
                 id: "activities_first_visit",
                 title: "Activities",
                 message: "Choose activities to develop your character's skills and stats. Each activity has different costs and benefits.",
                 position: .bottom,
                 trigger: .onAppear
             )

             // Tooltip overlay
             if let tooltip = tooltipManager.activeTooltip {
                 TooltipView(tooltip: tooltip) {
                     tooltipManager.dismissTooltip()
                 }
                 .transition(.scale.combined(with: .opacity))
                 .zIndex(100)
             }
         }
     }
 }
 */

// MARK: - Usage Example 3: Dating Tab First Visit

/*
 Example with app-wide TooltipManager via EnvironmentObject:

 // In App file:
 @main
 struct YourApp: App {
     @StateObject private var tooltipManager = TooltipManager()

     var body: some Scene {
         WindowGroup {
             ContentView()
                 .environmentObject(tooltipManager)
         }
     }
 }

 // In DatingView:
 struct DatingView: View {
     @EnvironmentObject var tooltipManager: TooltipManager

     var body: some View {
         VStack {
             Text("Dating")
                 .font(.appLargeTitle)

             // Relationship list
             ScrollView {
                 // ... relationship cards ...
             }
             .tooltip(
                 manager: tooltipManager,
                 id: "dating_first_visit",
                 title: "Build Relationships",
                 message: "Build relationships by chatting, gifting, and spending time with people. Higher affinity unlocks special events!",
                 position: .top,
                 trigger: .onAppear
             )

             // Tooltip overlay
             if let tooltip = tooltipManager.activeTooltip {
                 TooltipView(tooltip: tooltip) {
                     tooltipManager.dismissTooltip()
                 }
                 .transition(.scale.combined(with: .opacity))
                 .zIndex(100)
             }
         }
     }
 }
 */

// MARK: - Usage Example 4: Conditional Manual Trigger

/*
 Example of showing tooltip based on game state:

 struct HomeView: View {
     @EnvironmentObject var webSocketService: WebSocketService
     @StateObject var tooltipManager = TooltipManager()

     var body: some View {
         VStack {
             // Character avatar
             CharacterAvatarView()
                 .tooltip(
                     manager: tooltipManager,
                     id: "character_avatar",
                     title: "Your Character",
                     message: "This is your character. Their appearance, stats, and personality develop based on your choices.",
                     position: .bottom,
                     trigger: .manual
                 )

             // Stats display
             StatsView()
         }
         .onAppear {
             // Show avatar tooltip only for new players
             if webSocketService.player.date == "Year 0, Day 1" {
                 DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
                     tooltipManager.showTooltipIfNeeded(
                         "character_avatar",
                         title: "Welcome to BaoLife!",
                         message: "This is your character. Watch them grow and develop based on your choices throughout their life journey.",
                         position: .bottom
                     )
                 }
             }
         }

         // Tooltip overlay
         if let tooltip = tooltipManager.activeTooltip {
             TooltipView(tooltip: tooltip) {
                 tooltipManager.dismissTooltip()
             }
             .transition(.scale.combined(with: .opacity))
             .zIndex(100)
         }
     }
 }
 */

// MARK: - Usage Example 5: Sequential Tooltips

/*
 Example of showing tooltips in sequence:

 struct OnboardingSequenceView: View {
     @StateObject var tooltipManager = TooltipManager()
     @State private var currentStep = 0

     let tooltipSteps = [
         ("step1", "Welcome!", "Welcome to BaoLife, your life simulation journey begins now."),
         ("step2", "Energy System", "Watch your energy - it powers all your actions."),
         ("step3", "Make Choices", "Every choice affects your character's development.")
     ]

     var body: some View {
         VStack {
             // ... onboarding content ...

             Button("Next") {
                 if currentStep < tooltipSteps.count {
                     let step = tooltipSteps[currentStep]
                     tooltipManager.showTooltipIfNeeded(
                         step.0,
                         title: step.1,
                         message: step.2,
                         position: .top
                     )
                     currentStep += 1
                 }
             }
         }
         .overlay {
             if let tooltip = tooltipManager.activeTooltip {
                 Color.black.opacity(0.4)
                     .ignoresSafeArea()

                 TooltipView(tooltip: tooltip) {
                     tooltipManager.dismissTooltip()
                 }
                 .transition(.scale.combined(with: .opacity))
             }
         }
     }
 }
 */

// MARK: - Best Practices

/*
 1. Use unique, descriptive IDs:
    - Good: "energy_bar_first_low", "activities_tab_first_visit"
    - Bad: "tooltip1", "tip"

 2. Position tooltips appropriately:
    - .bottom for header elements
    - .top for footer/bottom elements
    - .leading/.trailing for side elements

 3. Keep messages concise:
    - 1-2 sentences maximum
    - Focus on the immediate value/action

 4. Choose the right trigger:
    - .onAppear: First visit to a view
    - .onTap: Interactive elements that need explanation
    - .manual: Complex conditional logic

 5. Use TooltipManager as EnvironmentObject when:
    - Tooltips span multiple views
    - Need to coordinate tooltip display
    - Sharing seen state across app

 6. Use @StateObject when:
    - Tooltips are local to a single view
    - Independent tooltip logic

 7. Always provide ZIndex for overlay:
    - Ensures tooltip appears above other content
    - Use .zIndex(100) or higher

 8. Test with reset:
    - tooltipManager.resetAllTooltips() for testing
    - Add debug button in dev builds
 */