//
//  AccordionSection.swift
//  lichunWebsocket
//
//  Reusable collapsible accordion section component
//

import SwiftUI

struct AccordionSection<Content: View>: View {
    let title: String
    let icon: String
    @Binding var isExpanded: Bool
    let content: () -> Content

    @State private var contentHeight: CGFloat = 0

    var body: some View {
        VStack(spacing: 0) {
            // Header row (tappable)
            Button(action: {
                withAnimation(.spring(response: 0.35, dampingFraction: 0.75)) {
                    isExpanded.toggle()
                }
                hapticFeedback(style: .light)
            }) {
                HStack(spacing: AppSpacing.md) {
                    Image(systemName: icon)
                        .font(.system(size: 18, weight: .semibold))
                        .foregroundStyle(
                            LinearGradient(
                                colors: [AppColors.primary, AppColors.accent],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .frame(width: 24, height: 24)

                    Text(title)
                        .font(.appHeadline)
                        .foregroundColor(AppColors.primaryText)

                    Spacer()

                    Image(systemName: "chevron.right")
                        .font(.system(size: 14, weight: .semibold))
                        .foregroundColor(AppColors.secondaryText)
                        .rotationEffect(.degrees(isExpanded ? 90 : 0))
                }
                .padding(.horizontal, AppSpacing.md)
                .padding(.vertical, AppSpacing.md)
                .background(
                    RoundedRectangle(cornerRadius: AppSpacing.largeCornerRadius)
                        .fill(isExpanded ? AppColors.surfaceElevated : AppColors.cardBackground)
                )
                .overlay(
                    RoundedRectangle(cornerRadius: AppSpacing.largeCornerRadius)
                        .strokeBorder(
                            isExpanded ? AppColors.primary.opacity(0.3) : Color.clear,
                            lineWidth: 1.5
                        )
                )
            }
            .buttonStyle(PlainButtonStyle())

            // Content (animated)
            if isExpanded {
                VStack(spacing: 0) {
                    content()
                        .padding(.horizontal, AppSpacing.md)
                        .padding(.vertical, AppSpacing.md)
                }
                .background(AppColors.cardBackground.opacity(0.5))
                .cornerRadius(AppSpacing.largeCornerRadius)
                .padding(.top, AppSpacing.xs)
                .transition(.opacity.combined(with: .move(edge: .top)))
            }
        }
    }
}

// MARK: - Accordion Manager Helper

/// Enum for tracking which profile section is expanded
enum ProfileSection: String, CaseIterable, Identifiable {
    case actions = "Actions"
    case personality = "Personality & Interests"
    case relationship = "Relationship"
    case lifeStory = "Life Story"
    case stats = "Stats & Health"
    case items = "Items & Possessions"

    var id: String { rawValue }

    var icon: String {
        switch self {
        case .actions: return "hand.tap"
        case .personality: return "sparkles"
        case .relationship: return "heart.circle"
        case .lifeStory: return "book"
        case .stats: return "chart.bar"
        case .items: return "bag"
        }
    }
}

// MARK: - Preview

#if DEBUG
struct AccordionSection_Previews: PreviewProvider {
    struct PreviewWrapper: View {
        @State private var expandedSection: ProfileSection? = .actions

        var body: some View {
            ScrollView {
                VStack(spacing: AppSpacing.sm) {
                    ForEach(ProfileSection.allCases) { section in
                        AccordionSection(
                            title: section.rawValue,
                            icon: section.icon,
                            isExpanded: Binding(
                                get: { expandedSection == section },
                                set: { isExpanded in
                                    expandedSection = isExpanded ? section : nil
                                }
                            )
                        ) {
                            VStack(alignment: .leading, spacing: AppSpacing.sm) {
                                Text("Content for \(section.rawValue)")
                                    .font(.appBody)
                                    .foregroundColor(AppColors.primaryText)

                                Text("This is placeholder content that would show details about this section.")
                                    .font(.appCaption)
                                    .foregroundColor(AppColors.secondaryText)
                            }
                        }
                    }
                }
                .padding()
            }
            .background(AppColors.background)
        }
    }

    static var previews: some View {
        PreviewWrapper()
    }
}
#endif