import SwiftUI
import Bedrock

/// Displays a vertical list of added contact fields with tap to edit and drag to reorder
struct AddedContactFieldsView: View {
    @Binding var fields: [AddedContactField]
    var themeColor: Color = Color(red: 0.2, green: 0.2, blue: 0.2)
    let onEdit: (AddedContactField) -> Void
    
    @State private var draggingField: AddedContactField?
    
    var body: some View {
        if fields.isEmpty {
            EmptyView()
        } else {
            VStack(spacing: 0) {
                ForEach(fields) { field in
                    FieldRow(
                        field: field,
                        themeColor: themeColor,
                        onTap: { onEdit(field) },
                        onDelete: { deleteField(field) }
                    )
                    .draggable(field.id.uuidString) {
                        // Drag preview
                        FieldRowPreview(field: field, themeColor: themeColor)
                    }
                    .dropDestination(for: String.self) { items, _ in
                        guard let droppedId = items.first,
                              let droppedUUID = UUID(uuidString: droppedId),
                              let fromIndex = fields.firstIndex(where: { $0.id == droppedUUID }),
                              let toIndex = fields.firstIndex(where: { $0.id == field.id }),
                              fromIndex != toIndex else {
                            return false
                        }
                        withAnimation(.spring(duration: Design.Animation.quick)) {
                            let movedField = fields.remove(at: fromIndex)
                            fields.insert(movedField, at: toIndex)
                        }
                        return true
                    }
                    
                    if field.id != fields.last?.id {
                        Divider()
                            .padding(.leading, Design.CardSize.avatarSize + Design.Spacing.large + Design.Spacing.medium)
                    }
                }
            }
            .background(Color.AppBackground.elevated)
            .clipShape(.rect(cornerRadius: Design.CornerRadius.large))
        }
    }
    
    private func deleteField(_ field: AddedContactField) {
        withAnimation {
            fields.removeAll { $0.id == field.id }
        }
    }
}

#Preview {
    @Previewable @State var fields: [AddedContactField] = {
        let address = PostalAddress(street: "6565 Headquarters Dr", city: "Plano", state: "TX", postalCode: "75024")
        return [
            AddedContactField(fieldType: .email, value: "matt@example.com", title: "Work"),
            AddedContactField(fieldType: .email, value: "personal@example.com", title: "Personal"),
            AddedContactField(fieldType: .phone, value: "+1 (555) 123-4567", title: "Cell"),
            AddedContactField(fieldType: .address, value: address.encode(), title: "Work"),
            AddedContactField(fieldType: .linkedIn, value: "linkedin.com/in/mattbruce", title: "Connect with me")
        ]
    }()
    
    ScrollView {
        AddedContactFieldsView(fields: $fields) { field in
            Design.debugLog("Edit: \(field.fieldType.displayName)")
        }
        .padding()
    }
    .background(Color.AppBackground.base)
}
