import SwiftUI
import Bedrock
import Charts

struct InsightCardView: View {
    let card: InsightCard
    let store: RitualStore
    @State private var showingDetail = false

    var body: some View {
        Button {
            showingDetail = true
        } label: {
            cardContent
        }
        .buttonStyle(.plain)
        .sheet(isPresented: $showingDetail) {
            InsightDetailSheet(card: card, store: store)
        }
    }
    
    private var cardContent: some View {
        VStack(alignment: .leading, spacing: Design.Spacing.medium) {
            HStack {
                Text(card.title)
                    .font(.subheadline)
                    .bold()
                    .foregroundStyle(AppTextColors.secondary)
                
                Spacer()
                
                // Subtle tap affordance
                Image(systemName: "chevron.right")
                    .font(.caption2)
                    .foregroundStyle(AppTextColors.tertiary)
                    .accessibilityHidden(true)
            }
            
            // Show value prominently
            Text(card.value)
                .font(.title)
                .foregroundStyle(AppTextColors.primary)
                .bold()
            
            // Show caption if present (non-chart cards)
            if !card.caption.isEmpty {
                Text(card.caption)
                    .font(.caption)
                    .foregroundStyle(AppTextColors.secondary)
            }
            
            // Show full-width mini bar chart at bottom (Athlytic style)
            // Always reserve consistent height for chart area to keep cards aligned
            if let trendData = card.trendData, !trendData.isEmpty {
                Chart(trendData) { point in
                    BarMark(
                        x: .value("Day", point.label),
                        y: .value("Completion", point.value)
                    )
                    .foregroundStyle(
                        point.value >= 1.0 ? AppStatus.success :
                        point.value >= 0.5 ? AppAccent.primary :
                        AppTextColors.tertiary
                    )
                    .cornerRadius(2)
                }
                .chartYScale(domain: 0...1)
                .chartXAxis(.hidden)
                .chartYAxis(.hidden)
                .frame(height: 20)
                .accessibilityHidden(true)
            } else {
                // Placeholder to maintain consistent card height
                Spacer()
                    .frame(height: 20)
            }
        }
        .padding(Design.Spacing.large)
        .background(AppSurface.card)
        .clipShape(.rect(cornerRadius: Design.CornerRadius.large))
        .accessibilityElement(children: .combine)
        .accessibilityHint(String(localized: "Tap for details"))
    }
}

#Preview {
    InsightCardView(
        card: InsightCard(
            title: "Completion",
            value: "72%",
            caption: "Today's progress",
            explanation: "Your completion percentage for today across all rituals.",
            symbolName: "chart.bar.fill"
        ),
        store: RitualStore.preview
    )
    .padding(Design.Spacing.large)
    .background(AppSurface.primary)
}
