//
//  ActionMenuSheet.swift
//  vibes
//
//  Action menu sheet with options for Model, Upload, Record, Library, and Persona
//

import SwiftUI

struct ActionMenuSheet: View {
    @Environment(\.dismiss) private var dismiss

    let currentModel: String
    let onModelSelect: (String) -> Void
    let onUploadTap: () -> Void
    let onRecordTap: () -> Void
    let onLibraryTap: () -> Void
    let onPersonaTap: () -> Void

    var body: some View {
        VStack(spacing: 0) {
            // Grabber and action buttons
            VStack(spacing: 12) {
                RoundedRectangle(cornerRadius: 100)
                    .fill(Color.white.opacity(0.1))
                    .frame(width: 32, height: 4)

                // Three action buttons in a row
                HStack(spacing: 16) {
                    ActionSheetButton(icon: "Icon/upload", title: "Upload", onTap: {
                        dismiss()
                        onUploadTap()
                    })

                    ActionSheetButton(icon: "Icon/cover-microphone", title: "Record", onTap: {
                        dismiss()
                        onRecordTap()
                    })

                    ActionSheetButton(icon: "Icon/library", title: "Library", onTap: {
                        dismiss()
                        onLibraryTap()
                    })
                }
            }
            .padding(16)
            .frame(maxWidth: .infinity)

            // Menu cells container
            VStack(spacing: 0) {
                VStack(spacing: 0) {
                    // Model - with menu
                    Menu {
                        Button {
                            onModelSelect("v5")
                        } label: {
                            HStack {
                                Text("v5")
                                if currentModel == "v5" {
                                    Image(systemName: "checkmark")
                                }
                            }
                        }

                        Button {
                            onModelSelect("v4.5")
                        } label: {
                            HStack {
                                Text("v4.5")
                                if currentModel == "v4.5" {
                                    Image(systemName: "checkmark")
                                }
                            }
                        }

                        Button {
                            onModelSelect("v4")
                        } label: {
                            HStack {
                                Text("v4")
                                if currentModel == "v4" {
                                    Image(systemName: "checkmark")
                                }
                            }
                        }

                        Divider()

                        Menu {
                            Button {
                                onModelSelect("v3")
                            } label: {
                                HStack {
                                    Text("v3")
                                    if currentModel == "v3" {
                                        Image(systemName: "checkmark")
                                    }
                                }
                            }

                            Button {
                                onModelSelect("v2")
                            } label: {
                                HStack {
                                    Text("v2")
                                    if currentModel == "v2" {
                                        Image(systemName: "checkmark")
                                    }
                                }
                            }
                        } label: {
                            HStack {
                                Text("Legacy Models")
                                if currentModel == "v3" || currentModel == "v2" {
                                    Image(systemName: "checkmark")
                                }
                            }
                        }
                    } label: {
                        ActionMenuCellContent(
                            icon: "Icon/sparkles",
                            title: "Model",
                            subtitle: currentModel
                        )
                    }
                    .buttonStyle(PlainButtonStyle())
                    .menuOrder(.fixed)

                    // Persona
                    ActionMenuCell(
                        icon: "Icon/plus",
                        title: "Persona",
                        subtitle: "Imitate a vocal or instrument",
                        onTap: {
                            dismiss()
                            onPersonaTap()
                        }
                    )
                    
                    //Inspo
                    ActionMenuCell(
                        icon: "Icon/plus",
                        title: "Inspo",
                        subtitle: "Use songs to inspire your creation",
                        onTap: {
                            dismiss()
                            onPersonaTap()
                        }
                    )
                }
                .background(Color.white.opacity(0.04))
                .cornerRadius(16)
            }
            .padding(.horizontal, 16)

            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Constants.Colors.Background.Smoke.dense)
        .presentationDetents([.height(350)])
        .presentationDragIndicator(.hidden)
        .presentationCornerRadius(24)
    }
}

// Cell content that can be used in both buttons and menus
private struct ActionMenuCellContent: View {
    let icon: String
    let title: String
    let subtitle: String

    var body: some View {
        HStack(spacing: 10) {
            // Icon
            Image(icon)
                .resizable()
                .renderingMode(.template)
                .frame(width: 24, height: 24)
                .foregroundColor(Constants.Colors.Foreground.primary)

            // Title and subtitle
            VStack(alignment: .leading, spacing: 0) {
                Text(title)
                    .font(Constants.Typography.mediumTitle)
                    .foregroundColor(Constants.Colors.Foreground.primary)
                    .tracking(0.32)

                Text(subtitle)
                    .font(Constants.Typography.xSmallRegular)
                    .foregroundColor(Constants.Colors.Foreground.tertiary)
                    .tracking(0.24)
            }
            .frame(maxWidth: .infinity, alignment: .leading)

            // Chevron
            Image("Icon/chevron-right")
                .resizable()
                .renderingMode(.template)
                .frame(width: 16, height: 16)
                .foregroundColor(Constants.Colors.Foreground.tertiary)
        }
        .padding(16)
    }
}

private struct ActionMenuCell: View {
    let icon: String
    let title: String
    let subtitle: String
    let onTap: () -> Void

    var body: some View {
        Button(action: onTap) {
            ActionMenuCellContent(
                icon: icon,
                title: title,
                subtitle: subtitle
            )
        }
        .buttonStyle(PlainButtonStyle())
    }
}

// Action button component for Upload, Record, Library
private struct ActionSheetButton: View {
    let icon: String
    let title: String
    let onTap: () -> Void

    var body: some View {
        Button(action: onTap) {
            VStack(spacing: 8) {
                Image(icon)
                    .resizable()
                    .renderingMode(.template)
                    .frame(width: 24, height: 24)
                    .foregroundColor(Constants.Colors.Foreground.primary)

                Text(title)
                    .font(Constants.Typography.mediumTitle)
                    .foregroundColor(.white)
                    .tracking(0.32)
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, 24)
            .background(Color.white.opacity(0.04))
            .cornerRadius(16)
        }
        .buttonStyle(PlainButtonStyle())
    }
}

#Preview {
    ActionMenuSheet(
        currentModel: "v4.5",
        onModelSelect: { model in print("Model selected: \(model)") },
        onUploadTap: { print("Upload tapped") },
        onRecordTap: { print("Record tapped") },
        onLibraryTap: { print("Library tapped") },
        onPersonaTap: { print("Persona tapped") }
    )
    .preferredColorScheme(.dark)
}