import 'package:flutter/material.dart';

class TimespentView extends StatefulWidget {
  @override
  _TimespentViewState createState() => _TimespentViewState();
}

class _TimespentViewState extends State<TimespentView> {
  final List<Map<String, String>> _activities = [];
  final TextEditingController _activityController = TextEditingController();
  final TextEditingController _timeController = TextEditingController();

  void _addActivity() {
    if (_activityController.text.isNotEmpty &&
        _timeController.text.isNotEmpty) {
      setState(() {
        _activities.add({
          'activity': _activityController.text,
          'time': _timeController.text,
        });
      });
      _activityController.clear();
      _timeController.clear();
    }
  }

  @override
  void dispose() {
    _activityController.dispose();
    _timeController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // Get screen width
    double screenWidth = MediaQuery.of(context).size.width;
    // Calculate responsive padding
    double horizontalPadding = screenWidth > 600 ? screenWidth * 0.1 : 16.0;

    return Scaffold(
      appBar: AppBar(
        title: Text('Timesheet'),
        backgroundColor: Colors.blue[800],
      ),
      body: Center( // Wrap with Center for better alignment on larger screens
        child: Container(
          constraints: BoxConstraints(maxWidth: 800), // Maximum width on large screens
          child: SingleChildScrollView(
            child: Padding(
              padding: EdgeInsets.symmetric(
                horizontal: horizontalPadding,
                vertical: 16.0
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Center(
                    child: Text(
                      'Timesheet Today',
                      style: TextStyle(
                        fontSize: screenWidth > 600 ? 32 : 26,
                        fontWeight: FontWeight.bold,
                        color: Colors.blue[900],
                      ),
                    ),
                  ),
                  SizedBox(height: 20),
                  Card(
                    elevation: 4,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15),
                    ),
                    child: Padding(
                      padding: EdgeInsets.all(screenWidth > 600 ? 24.0 : 12.0),
                      child: Column(
                        children: [
                          TextField(
                            controller: _activityController,
                            decoration: InputDecoration(
                              labelText: 'Activity Name',
                              labelStyle: TextStyle(color: Colors.blue[900]),
                              focusedBorder: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.blue),
                                borderRadius: BorderRadius.circular(10),
                              ),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10),
                              ),
                            ),
                          ),
                          SizedBox(height: 12),
                          TextField(
                            controller: _timeController,
                            decoration: InputDecoration(
                              labelText: 'Time (e.g., 09:00 AM - 11:00 AM)',
                              labelStyle: TextStyle(color: Colors.blue[900]),
                              focusedBorder: OutlineInputBorder(
                                borderSide: BorderSide(color: Colors.blue),
                                borderRadius: BorderRadius.circular(10),
                              ),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(10),
                              ),
                            ),
                          ),
                          SizedBox(height: 16),
                          SizedBox(
                            width: double.infinity,
                            child: ElevatedButton.icon(
                              onPressed: _addActivity,
                              icon: Icon(Icons.add, color: Colors.white),
                              label: Text('Add Activity'),
                              style: ElevatedButton.styleFrom(
                                backgroundColor: Colors.blue[800],
                                foregroundColor: Colors.white,
                                padding: EdgeInsets.symmetric(
                                  vertical: screenWidth > 600 ? 16.0 : 12.0
                                ),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(10),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  SizedBox(height: 20),
                  Text(
                    'Activities List',
                    style: TextStyle(
                      fontSize: screenWidth > 600 ? 26 : 22,
                      fontWeight: FontWeight.w600,
                      color: Colors.blue[900],
                    ),
                  ),
                  SizedBox(height: 10),
                  _activities.isEmpty
                      ? Center(
                          child: Text(
                            'No activities added yet!',
                            style: TextStyle(
                              color: Colors.grey[600],
                              fontSize: screenWidth > 600 ? 18 : 16,
                            ),
                          ),
                        )
                      : ListView.builder(
                          shrinkWrap: true,
                          physics: NeverScrollableScrollPhysics(),
                          itemCount: _activities.length,
                          itemBuilder: (context, index) {
                            return Card(
                              color: Colors.blue[50],
                              elevation: 3,
                              margin: EdgeInsets.symmetric(vertical: 6),
                              child: ListTile(
                                contentPadding: EdgeInsets.symmetric(
                                  horizontal: screenWidth > 600 ? 24.0 : 16.0,
                                  vertical: screenWidth > 600 ? 12.0 : 8.0,
                                ),
                                leading: Icon(Icons.check_circle,
                                    color: Colors.blue[700],
                                    size: screenWidth > 600 ? 28 : 24),
                                title: Text(
                                  _activities[index]['activity']!,
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: screenWidth > 600 ? 18 : 16,
                                  ),
                                ),
                                subtitle: Text(
                                  _activities[index]['time']!,
                                  style: TextStyle(
                                    fontSize: screenWidth > 600 ? 16 : 14,
                                  ),
                                ),
                                trailing: IconButton(
                                  icon: Icon(Icons.delete,
                                      color: Colors.red[600],
                                      size: screenWidth > 600 ? 28 : 24),
                                  onPressed: () {
                                    setState(() {
                                      _activities.removeAt(index);
                                    });
                                  },
                                ),
                              ),
                            );
                          },
                        ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}