Untitled

import SwiftUI

struct ContentView: View {
    @StateObject private var viewModel = TrackerViewModel()
    
    var body: some View {
        ScrollView {
            VStack(spacing: 12) {
                // Mode Switcher for Demo Purposes (Toggle between Left & Right screens)
                HStack {
                    Button(action: { viewModel.isTracking = true }) {
                        Text("Active")
                            .font(.system(size: 11, weight: viewModel.isTracking ? .bold : .regular))
                    }
                    .background(viewModel.isTracking ? Color.blue.opacity(0.3) : Color.clear)
                    .cornerRadius(8)
                    
                    Button(action: { viewModel.isTracking = false }) {
                        Text("History")
                            .font(.system(size: 11, weight: !viewModel.isTracking ? .bold : .regular))
                    }
                    .background(!viewModel.isTracking ? Color.green.opacity(0.3) : Color.clear)
                    .cornerRadius(8)
                }
                .padding(.horizontal)
                
                if viewModel.isTracking {
                    ActiveTrackerView(vm: viewModel)
                } else {
                    HistoryTrackerView(vm: viewModel)
                }
            }
        }
    }
}

// MARK: - LEFT SCREEN: Active Tracking
struct ActiveTrackerView: View {
    @ObservedObject var vm: TrackerViewModel
    
    var body: some View {
        VStack(spacing: 8) {
            // Header Top Stats
            HStack {
                Text("< 0:01h")
                Spacer()
                Text(Date(), style: .time)
            }
            .font(.system(size: 11))
            .foregroundColor(.gray)
            
            // Section Divider Line
            HStack {
                Rectangle().frame(height: 1).foregroundColor(.gray.opacity(0.5))
                Text("\(formatTime(vm.startTime))-now")
                    .font(.system(size: 13, weight: .bold))
                    .layoutPriority(1)
                Rectangle().frame(height: 1).foregroundColor(.gray.opacity(0.5))
            }
            
            // Time Adjustment Controls
            HStack(spacing: 14) {
                // Rewind Button
                Button(action: { vm.adjustTime(by: -1) }) {
                    Image(systemName: "arrow.uturn.backward")
                        .font(.system(size: 16, weight: .bold))
                }
                .buttonStyle(CircularTimeButtonStyle(color: Color(red: 0.2, green: 0.28, blue: 0.45)))
                
                VStack {
                    Text(formatTime(vm.startTime))
                        .font(.system(size: 18, weight: .medium))
                    Text("Start Time")
                        .font(.system(size: 11))
                        .foregroundColor(.gray)
                }
                
                // Forward / Refresh Button
                Button(action: { vm.adjustTime(by: 1) }) {
                    Image(systemName: "arrow.clockwise")
                        .font(.system(size: 16, weight: .bold))
                }
                .buttonStyle(CircularTimeButtonStyle(color: Color(red: 0.2, green: 0.28, blue: 0.45)))
            }
            
            // Large Timer Display
            Text(vm.elapsedTimeString)
                .font(.system(size: 34, weight: .regular, design: .default))
                .padding(.vertical, 2)
            
            // Note Field with Dictation Support
            TextFieldLink(prompt: Text("Add a note")) {
                Label("Add a note", systemImage: "mic.fill")
                    .font(.system(size: 14))
                    .frame(maxWidth: .infinity, alignment: .leading)
            } label: { text in
                vm.noteText = text
            }
            .buttonStyle(NoteFieldButtonStyle(backgroundColor: Color(red: 0.2, green: 0.28, blue: 0.45)))
        }
        .padding(.horizontal, 4)
    }
    
    func formatTime(_ date: Date) -> String {
        let formatter = DateFormatter()
        formatter.dateFormat = "h:mma"
        return formatter.string(from: date).lowercased()
    }
}

// MARK: - RIGHT SCREEN: History View
struct HistoryTrackerView: View {
    @ObservedObject var vm: TrackerViewModel
    
    var body: some View {
        VStack(spacing: 8) {
            // Header Top Stats
            HStack {
                Text("< 0:55h")
                Spacer()
                Text(Date(), style: .time)
            }
            .font(.system(size: 11))
            .foregroundColor(.gray)
            
            // Section Divider Line
            HStack {
                Rectangle().frame(height: 1).foregroundColor(.gray.opacity(0.5))
                Text("\(formatTime(vm.historyStartTime))-\(formatTime(vm.historyEndTime))")
                    .font(.system(size: 13, weight: .bold))
                    .layoutPriority(1)
                Rectangle().frame(height: 1).foregroundColor(.gray.opacity(0.5))
            }
            
            // Time Adjustment Controls
            HStack(spacing: 14) {
                Button(action: { vm.adjustTime(by: -1) }) {
                    Image(systemName: "arrow.uturn.backward")
                        .font(.system(size: 16, weight: .bold))
                }
                .buttonStyle(CircularTimeButtonStyle(color: Color(red: 0.18, green: 0.42, blue: 0.24)))
                
                VStack {
                    Text(formatTime(vm.historyEndTime))
                        .font(.system(size: 18, weight: .medium))
                    Text("End Time")
                        .font(.system(size: 11))
                        .foregroundColor(.gray)
                }
                
                Button(action: { vm.adjustTime(by: 1) }) {
                    Image(systemName: "arrow.clockwise")
                        .font(.system(size: 16, weight: .bold))
                }
                .buttonStyle(CircularTimeButtonStyle(color: Color(red: 0.18, green: 0.42, blue: 0.24)))
            }
            
            // Dynamic/Interactive Dictation Note Field
            TextFieldLink(prompt: Text("Add a note")) {
                HStack {
                    Text(vm.historyNote.isEmpty ? "Add a note" : vm.historyNote)
                        .font(.system(size: 14))
                    Spacer()
                    Image(systemName: "mic.fill")
                        .font(.system(size: 12))
                }
            } label: { text in
                vm.historyNote = text
            }
            .buttonStyle(NoteFieldButtonStyle(backgroundColor: Color(red: 0.18, green: 0.42, blue: 0.24)))
            
            // Archive / Context Item below
            VStack(spacing: 4) {
                HStack {
                    Rectangle().frame(height: 1).foregroundColor(.gray.opacity(0.5))
                    Text("10:30a-11:03a")
                        .font(.system(size: 11, weight: .bold))
                        .foregroundColor(.white)
                        .layoutPriority(1)
                    Rectangle().frame(height: 1).foregroundColor(.gray.opacity(0.5))
                }
                
                Text("Fixed some bugs")
                    .font(.system(size: 14))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding()
                    .background(Color(red: 0.18, green: 0.42, blue: 0.24))
                    .cornerRadius(8)
            }
        }
        .padding(.horizontal, 4)
    }
    
    func formatTime(_ date: Date) -> String {
        let formatter = DateFormatter()
        formatter.dateFormat = "h:mma"
        return formatter.string(from: date).lowercased()
    }
}

// MARK: - Custom Styles
struct CircularTimeButtonStyle: ButtonStyle {
    var color: Color
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .frame(width: 34, height: 34)
            .background(color)
            .foregroundColor(.white)
            .clipShape(Circle())
            .opacity(configuration.isPressed ? 0.7 : 1.0)
    }
}

struct NoteFieldButtonStyle: ButtonStyle {
    var backgroundColor: Color
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(.horizontal, 10)
            .padding(.vertical, 10)
            .background(backgroundColor)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}