import SwiftUI
import PencilKit

#Preview("Unterschrift · Dark Mode", traits: .fixedLayout(width: 700, height: 240)) {
    @Previewable @State var drawing = PKDrawing(strokes: [
        PKStroke(
            ink: PKInk(.pen, color: .black),
            path: PKStrokePath(controlPoints: [
                CGPoint(x: 100, y: 90), CGPoint(x: 150, y: 35),
                CGPoint(x: 140, y: 95), CGPoint(x: 210, y: 55),
                CGPoint(x: 240, y: 90), CGPoint(x: 320, y: 65)
            ].enumerated().map { index, point in
                PKStrokePoint(location: point, timeOffset: Double(index) * 0.1,
                              size: CGSize(width: 3, height: 3), opacity: 1, force: 1,
                              azimuth: 0, altitude: .pi / 2)
            }, creationDate: .now)
        )
    ])
    LeadSigningSignatureView(signerName: "Klaus Hoffmann", drawing: $drawing, isEnabled: true)
        .padding(20)
        .background(Color(uiColor: .systemGroupedBackground))
        .preferredColorScheme(.dark)
}

struct LeadSigningSignatureView: View {
    let signerName: String
    @Binding var drawing: PKDrawing
    let isEnabled: Bool

    var body: some View {
        VStack(spacing: 8) {
            HStack {
                Text("UNTERSCHRIFT · \(signerName)")
                    .font(.caption).foregroundStyle(.secondary)
                Spacer()
                Button("Löschen") { drawing = PKDrawing() }
                    .disabled(drawing.strokes.isEmpty || !isEnabled)
            }
            .padding(.horizontal, 16)
            ZStack {
                VStack {
                    Spacer()
                    if drawing.strokes.isEmpty {
                        Label("Mit Finger oder Apple Pencil unterschreiben", systemImage: "signature")
                            .font(.subheadline).foregroundStyle(.secondary)
                            .multilineTextAlignment(.center)
                    }
                    Spacer()
                    HStack {
                        Text("×").foregroundStyle(.secondary)
                        Spacer()
                    }
                    Rectangle().fill(Color(uiColor: .separator)).frame(height: 1)
                }
                .padding(24)
                .allowsHitTesting(false)
                LeadSignatureCanvas(drawing: $drawing)
                    .allowsHitTesting(isEnabled)
            }
            .frame(height: 150)
            .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 12))
            .clipShape(.rect(cornerRadius: 12))
        }
    }
}