import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../services/mqtt_service.dart';
import '../services/supabase_service.dart';

class RecordingScreen extends StatefulWidget {
  const RecordingScreen({super.key});

  @override
  State<RecordingScreen> createState() => _RecordingScreenState();
}

class _RecordingScreenState extends State<RecordingScreen> {
  final TextEditingController _intervalController = TextEditingController();
  List<Map<String, dynamic>> _gallery = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    try {
      final interval = await SupabaseService().getIntervalSetting();
      final images = await SupabaseService().getFotoDataset();
      setState(() {
        _intervalController.text = interval.toString();
        _gallery = images;
        _isLoading = false;
      });
    } catch (e) {
      debugPrint('Error loading recording data: $e');
      setState(() => _isLoading = false);
    }
  }

  void _controlRecording(bool start) async {
    final mqtt = Provider.of<MqttService>(context, listen: false);
    final intervalVal = int.tryParse(_intervalController.text) ?? 30;

    if (start) {
      mqtt.publish('coffee/record/interval', intervalVal.toString());
      mqtt.publish('coffee/record/cmd', 'START');
      await SupabaseService().updateIntervalSetting(intervalVal);
    } else {
      mqtt.publish('coffee/record/cmd', 'STOP');
    }

    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(start ? 'Perekaman Dimulai' : 'Perekaman Berhenti')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: _isLoading 
          ? const Center(child: CircularProgressIndicator(color: Colors.green))
          : Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                padding: const EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: const Color(0xFF1A1A1A),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('Interval Waktu (menit)', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
                    const SizedBox(height: 10),
                    TextField(
                      controller: _intervalController,
                      keyboardType: TextInputType.number,
                      style: const TextStyle(color: Colors.white),
                      decoration: InputDecoration(
                        hintText: '30',
                        hintStyle: const TextStyle(color: Colors.grey),
                        filled: true,
                        fillColor: Colors.black,
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(15),
                          borderSide: const BorderSide(color: Colors.grey),
                        ),
                      ),
                    ),
                    const SizedBox(height: 20),
                    SizedBox(
                      width: double.infinity,
                      height: 50,
                      child: ElevatedButton(
                        onPressed: () => _controlRecording(true),
                        style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                        child: const Text('Mulai Perekaman', style: TextStyle(color: Colors.white)),
                      ),
                    ),
                    const SizedBox(height: 10),
                    SizedBox(
                      width: double.infinity,
                      height: 50,
                      child: ElevatedButton(
                        onPressed: () => _controlRecording(false),
                        style: ElevatedButton.styleFrom(backgroundColor: Colors.redAccent),
                        child: const Text('Berhenti Perekaman', style: TextStyle(color: Colors.white)),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 30),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text('Galeri Citra Dataset', style: TextStyle(color: Colors.white, fontSize: 18, fontWeight: FontWeight.bold)),
                  IconButton(
                    icon: const Icon(Icons.refresh, color: Colors.green),
                    onPressed: _loadData,
                  )
                ],
              ),
              const SizedBox(height: 20),
              Expanded(
                child: _gallery.isEmpty 
                  ? const Center(child: Text('Belum ada data citra', style: TextStyle(color: Colors.grey)))
                  : GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                  ),
                  itemCount: _gallery.length,
                  itemBuilder: (context, index) {
                    final item = _gallery[index];
                    return GestureDetector(
                      onTap: () => Navigator.pushNamed(context, '/image_result', arguments: {
                        'id': item['id'].toString(),
                        'date': item['timestamp']?.split(' ')[0] ?? '',
                        'time': item['timestamp']?.split(' ')[1] ?? '',
                        'temp': '${item['suhu']} °C',
                        'humidity': '${item['kelembapan']} %',
                        'light': '${item['intensitas']} Lux',
                        'location': 'Gudang Pengering',
                        'intake': item['kipas1'] ?? 'OFF',
                        'exhaust': item['kipas2'] ?? 'OFF'
                      }),
                      child: Container(
                        decoration: BoxDecoration(
                          color: const Color(0xFF1A1A1A),
                          borderRadius: BorderRadius.circular(15),
                          image: item['url_foto'] != null ? DecorationImage(
                            image: NetworkImage(item['url_foto']),
                            fit: BoxFit.cover,
                          ) : null,
                        ),
                        child: item['url_foto'] == null 
                            ? const Icon(Icons.image, color: Colors.grey, size: 50)
                            : null,
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}