import SwiftUI

struct TranscriptionListItem: View {
    let transcription: Transcription
    let isSelected: Bool
    let isChecked: Bool
    let onSelect: () -> Void
    let onToggleCheck: () -> Void

    var body: some View {
        HStack(spacing: ProatSpacing.xs) {
            Toggle("", isOn: Binding(
                get: { isChecked },
                set: { _ in onToggleCheck() }
            ))
            .toggleStyle(CircularCheckboxStyle())
            .labelsHidden()

            VStack(alignment: .leading, spacing: 4) {
                HStack {
                    Text(transcription.timestamp, format: .dateTime.month(.abbreviated).day().hour().minute())
                        .font(ProatFont.klein)
                        .fontWeight(.medium)
                        .foregroundColor(.proatText3)
                    Spacer()
                    if transcription.duration > 0 {
                        Text(transcription.duration.formatTiming())
                            .font(ProatFont.klein)
                            .fontWeight(.medium)
                            .padding(.horizontal, 6)
                            .padding(.vertical, 3)
                            .background(
                                RoundedRectangle(cornerRadius: 4, style: .continuous)
                                    .fill(Color.proatBgSunken)
                            )
                            .foregroundColor(.proatText2)
                    }
                }

                Text(transcription.enhancedText ?? transcription.text)
                    .font(ProatFont.body)
                    .lineLimit(2)
                    .foregroundColor(.proatText1)
            }
        }
        .padding(ProatSpacing.xs)
        .background {
            if isSelected {
                RoundedRectangle(cornerRadius: ProatRadius.knop, style: .continuous)
                    .fill(Color.proatTealTint)
                    .overlay(
                        RoundedRectangle(cornerRadius: ProatRadius.knop, style: .continuous)
                            .stroke(Color.proatTeal.opacity(0.5), lineWidth: 1)
                    )
            } else {
                RoundedRectangle(cornerRadius: ProatRadius.knop, style: .continuous)
                    .fill(Color.proatBgRaised)
                    .overlay(
                        RoundedRectangle(cornerRadius: ProatRadius.knop, style: .continuous)
                            .stroke(Color.proatBorder, lineWidth: 1)
                    )
            }
        }
        .contentShape(Rectangle())
        .onTapGesture { onSelect() }
    }
}

struct CircularCheckboxStyle: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        Button(action: {
            configuration.isOn.toggle()
        }) {
            Image(systemName: configuration.isOn ? "checkmark.circle.fill" : "circle")
                .symbolRenderingMode(.hierarchical)
                .foregroundColor(configuration.isOn ? Color.proatTeal : Color.proatText3)
                .font(.system(size: 18))
        }
        .buttonStyle(.plain)
    }
}
