import SwiftUI

struct VisitListCard: View {
    let visit: StadiumVisit
    @State private var isExpanded = false

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            // Header row (always visible)
            Button {
                Theme.Animation.withMotion(.easeInOut(duration: 0.2)) {
                    isExpanded.toggle()
                }
            } label: {
                HStack {
                    // Date
                    VStack(alignment: .leading, spacing: 2) {
                        Text(visit.visitDate.formatted(date: .abbreviated, time: .omitted))
                            .font(.subheadline.bold())
                        Text(visit.visitType.displayName)
                            .font(.caption)
                            .foregroundStyle(.secondary)
                    }

                    Spacer()

                    // Game info preview (if available)
                    if let matchup = visit.matchupDescription {
                        Text(matchup)
                            .font(.caption)
                            .foregroundStyle(.secondary)
                            .lineLimit(1)
                    }

                    // Chevron
                    Image(systemName: "chevron.right")
                        .font(.caption)
                        .foregroundStyle(.secondary)
                        .rotationEffect(.degrees(isExpanded ? 90 : 0))
                        .accessibilityLabel(isExpanded ? "Collapse details" : "Expand details")
                }
                .padding()
                .contentShape(Rectangle())
            }
            .buttonStyle(.plain)
            .accessibilityHint("Double-tap to expand visit details")

            // Expanded content
            if isExpanded {
                Divider()
                    .padding(.horizontal)

                VStack(alignment: .leading, spacing: 12) {
                    // Game details
                    if let matchup = visit.matchupDescription {
                        GameInfoRow(matchup: matchup, score: visit.finalScore)
                    }

                    // Seat location
                    if let seat = visit.seatLocation, !seat.isEmpty {
                        InfoRow(icon: "ticket", label: "Seat", value: seat)
                    }

                    // Notes
                    if let notes = visit.notes, !notes.isEmpty {
                        InfoRow(icon: "note.text", label: "Notes", value: notes)
                    }

                    // Photos count
                    if let photos = visit.photoMetadata, !photos.isEmpty {
                        InfoRow(
                            icon: "photo.on.rectangle",
                            label: "Photos",
                            value: "\(photos.count) photo\(photos.count == 1 ? "" : "s")"
                        )
                    }
                }
                .padding()
                .transition(.opacity.combined(with: .move(edge: .top)))
            }
        }
        .background(Color(.systemBackground))
        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

private struct GameInfoRow: View {
    let matchup: String
    let score: String?

    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 4) {
                Text(matchup)
                    .font(.subheadline.bold())

                if let score {
                    Text("Final: \(score)")
                        .font(.caption)
                        .foregroundStyle(.secondary)
                }
            }

            Spacer()
        }
    }
}

private struct InfoRow: View {
    let icon: String
    let label: String
    let value: String

    var body: some View {
        HStack(spacing: 8) {
            Image(systemName: icon)
                .font(.caption)
                .foregroundStyle(.secondary)
                .frame(width: 16)
                .accessibilityHidden(true)

            Text(label)
                .font(.caption)
                .foregroundStyle(.secondary)

            Text(value)
                .font(.caption)
                .lineLimit(2)
        }
    }
}

#Preview {
    VStack {
        Text("VisitListCard Preview")
    }
    .padding()
    .background(Color(.systemGroupedBackground))
}
