import SwiftUI
import Bedrock

/// A display row for a contact field - tap to edit, hold to drag
struct FieldRow: View {
    let field: AddedContactField
    let themeColor: Color
    let onTap: () -> Void
    let onDelete: () -> Void

    var body: some View {
        HStack(spacing: Design.Spacing.medium) {
            Image(systemName: "line.3.horizontal")
                .typography(.caption)
                .foregroundStyle(Color.Text.tertiary)
                .frame(width: Design.Spacing.large)

            Circle()
                .fill(themeColor)
                .frame(width: Design.CardSize.avatarSize, height: Design.CardSize.avatarSize)
                .overlay(
                    field.fieldType.iconImage()
                        .typography(.title3)
                        .foregroundStyle(.white)
                )

            Button(action: onTap) {
                VStack(alignment: .leading, spacing: Design.Spacing.xxSmall) {
                    Text(field.value.isEmpty ? field.fieldType.valuePlaceholder : field.shortDisplayValue)
                        .typography(.subheading)
                        .foregroundStyle(field.value.isEmpty ? Color.Text.secondary : Color.Text.primary)
                        .lineLimit(1)

                    Text(field.title.isEmpty ? field.fieldType.displayName : field.title)
                        .typography(.caption)
                        .foregroundStyle(Color.Text.secondary)
                        .lineLimit(1)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
            }
            .buttonStyle(.plain)

            Button(action: onDelete) {
                Image(systemName: "xmark.circle.fill")
                    .typography(.title3)
                    .foregroundStyle(Color.Text.secondary)
            }
            .buttonStyle(.plain)
            .accessibilityLabel(String(localized: "Delete"))
            .accessibilityHint(String(localized: "Removes this field"))
        }
        .padding(Design.Spacing.medium)
        .contentShape(.rect)
    }
}
