Sybil-2/ios/Packages/Sybil/Sources/Sybil/SybilPhoneShellView.swift

import Observation
import SwiftUI

enum PhoneRoute: Hashable {
    case chat(String)
    case search(String)
    case draftChat
    case draftSearch
    case settings

    static func from(selection: SidebarSelection) -> PhoneRoute {
        switch selection {
        case let .chat(chatID):
            return .chat(chatID)
        case let .search(searchID):
            return .search(searchID)
        case .settings:
            return .settings
        }
    }
}

struct SybilPhoneShellView: View {
    @Bindable var viewModel: SybilViewModel
    @State private var path: [PhoneRoute] = []

    var body: some View {
        NavigationStack(path: $path) {
            SybilPhoneSidebarRoot(viewModel: viewModel, path: $path)
                .navigationTitle("")
                .navigationBarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .topBarLeading) {
                        SybilWordmark(size: 18)
                    }
                }
                .navigationDestination(for: PhoneRoute.self) { route in
                    SybilPhoneDestinationView(viewModel: viewModel, route: route)
                }
        }
        .tint(SybilTheme.primary)
    }
}

private struct SybilPhoneSidebarRoot: View {
    @Bindable var viewModel: SybilViewModel
    @Binding var path: [PhoneRoute]

    var body: some View {
        VStack(spacing: 0) {
            if let errorMessage = viewModel.errorMessage {
                Text(errorMessage)
                    .font(.sybil(.footnote))
                    .foregroundStyle(SybilTheme.danger)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 10)

                Divider()
                    .overlay(SybilTheme.border)
            }

            if viewModel.isLoadingCollections && viewModel.sidebarItems.isEmpty {
                VStack(alignment: .leading, spacing: 8) {
                    ProgressView()
                        .tint(SybilTheme.primary)
                    Text("Loading conversations…")
                        .font(.sybil(.footnote))
                        .foregroundStyle(SybilTheme.textMuted)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
                .padding(16)
            } else if viewModel.sidebarItems.isEmpty {
                VStack(spacing: 10) {
                    Image(systemName: "message.badge")
                        .font(.system(size: 20, weight: .medium))
                        .foregroundStyle(SybilTheme.textMuted)
                    Text("Start a chat or run your first search.")
                        .font(.sybil(.footnote))
                        .multilineTextAlignment(.center)
                        .foregroundStyle(SybilTheme.textMuted)
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .padding(16)
            } else {
                ScrollView {
                    LazyVStack(alignment: .leading, spacing: 8) {
                        ForEach(viewModel.sidebarItems) { item in
                            NavigationLink(value: PhoneRoute.from(selection: item.selection)) {
                                SybilPhoneSidebarRow(item: item)
                            }
                            .buttonStyle(.plain)
                            .contextMenu {
                                Button(role: .destructive) {
                                    Task {
                                        await viewModel.deleteItem(item.selection)
                                    }
                                } label: {
                                    Label("Delete", systemImage: "trash")
                                }
                            }
                        }
                    }
                    .padding(10)
                }
            }
        }
        .background(SybilTheme.panelGradient)
        .safeAreaInset(edge: .bottom, spacing: 0) {
            bottomToolbar
        }
    }

    private var bottomToolbar: some View {
        VStack(spacing: 0) {
            Divider()
                .overlay(SybilTheme.border)

            HStack(spacing: 12) {
                toolbarIconButton(systemImage: "gearshape", accessibilityLabel: "Settings") {
                    path = [.settings]
                }

                Spacer()

                toolbarIconButton(systemImage: "magnifyingglass", accessibilityLabel: "New search") {
                    viewModel.startNewSearch()
                    path = [.draftSearch]
                }

                toolbarIconButton(systemImage: "plus", accessibilityLabel: "New chat", isPrimary: true) {
                    viewModel.startNewChat()
                    path = [.draftChat]
                }
            }
            .padding(.horizontal, 18)
            .padding(.vertical, 10)
            .background(SybilTheme.panelGradient)
        }
    }

    private func toolbarIconButton(
        systemImage: String,
        accessibilityLabel: String,
        isPrimary: Bool = false,
        action: @escaping () -> Void
    ) -> some View {
        Button(action: action) {
            Image(systemName: systemImage)
                .font(.system(size: 18, weight: .semibold))
                .foregroundStyle(isPrimary ? SybilTheme.text : SybilTheme.textMuted)
                .frame(width: 42, height: 42)
                .background(
                    Circle()
                        .fill(
                            isPrimary
                                ? AnyShapeStyle(SybilTheme.primaryGradient)
                                : AnyShapeStyle(SybilTheme.surface.opacity(0.78))
                        )
                )
                .overlay(
                    Circle()
                        .stroke(isPrimary ? SybilTheme.primary.opacity(0.42) : SybilTheme.border.opacity(0.76), lineWidth: 1)
                )
        }
        .buttonStyle(.plain)
        .accessibilityLabel(accessibilityLabel)
    }
}

private struct SybilPhoneSidebarRow: View {
    var item: SidebarItem

    var body: some View {
        VStack(alignment: .leading, spacing: 6) {
            HStack(spacing: 8) {
                Image(systemName: item.kind == .chat ? "message" : "globe")
                    .font(.system(size: 12, weight: .semibold))
                    .foregroundStyle(SybilTheme.textMuted)
                    .frame(width: 22, height: 22)
                    .background(
                        RoundedRectangle(cornerRadius: 7)
                            .fill(SybilTheme.surface.opacity(0.72))
                            .overlay(
                                RoundedRectangle(cornerRadius: 7)
                                    .stroke(SybilTheme.border.opacity(0.72), lineWidth: 1)
                            )
                    )

                Text(item.title)
                    .font(.sybil(.subheadline, weight: .semibold))
                    .lineLimit(1)
            }

            HStack(spacing: 8) {
                Text(item.updatedAt.sybilRelativeLabel)
                    .font(.sybil(.caption2))
                    .foregroundStyle(SybilTheme.textMuted)

                if let initiated = item.initiatedLabel {
                    Spacer(minLength: 0)
                    Text(initiated)
                        .font(.sybil(.caption2))
                        .foregroundStyle(SybilTheme.textMuted.opacity(0.88))
                        .lineLimit(1)
                        .multilineTextAlignment(.trailing)
                        .frame(maxWidth: .infinity, alignment: .trailing)
                }
            }
        }
        .foregroundStyle(SybilTheme.text)
        .padding(.horizontal, 12)
        .padding(.vertical, 10)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(
            RoundedRectangle(cornerRadius: 12)
                .fill(LinearGradient(colors: [SybilTheme.surface.opacity(0.56), SybilTheme.surface.opacity(0.36)], startPoint: .topLeading, endPoint: .bottomTrailing))
        )
        .overlay(
            RoundedRectangle(cornerRadius: 12)
                .stroke(SybilTheme.border.opacity(0.72), lineWidth: 1)
        )
    }
}

private struct SybilPhoneDestinationView: View {
    @Bindable var viewModel: SybilViewModel
    let route: PhoneRoute

    var body: some View {
        SybilWorkspaceView(viewModel: viewModel)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            .navigationBarTitleDisplayMode(.inline)
            .task(id: route) {
                applyRoute()
            }
    }

    private func applyRoute() {
        switch route {
        case let .chat(chatID):
            viewModel.select(.chat(chatID))
        case let .search(searchID):
            viewModel.select(.search(searchID))
        case .draftChat:
            viewModel.startNewChat()
        case .draftSearch:
            viewModel.startNewSearch()
        case .settings:
            viewModel.openSettings()
        }
    }
}