import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';

class RiwayatScreen extends StatelessWidget {
  const RiwayatScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final DatabaseReference historyRef =
        FirebaseDatabase.instance.ref("hydroponic/history");

    return Scaffold(
      backgroundColor: Colors.grey.shade100,

      appBar: AppBar(
        title: const Text("Riwayat Monitoring"),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),

      body: StreamBuilder<DatabaseEvent>(
        stream: historyRef.onValue,
        builder: (context, snapshot) {
          if (!snapshot.hasData ||
              snapshot.data!.snapshot.value == null) {
            return const Center(
              child: Text(
                "Belum ada data riwayat",
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                ),
              ),
            );
          }

          final data = Map<dynamic, dynamic>.from(
            snapshot.data!.snapshot.value as Map,
          );

          final items = data.entries.toList().reversed.toList();

          return ListView.builder(
            padding: const EdgeInsets.all(12),
            itemCount: items.length,
            itemBuilder: (context, index) {
              final item =
                  Map<dynamic, dynamic>.from(items[index].value);

              return Card(
                elevation: 4,
                margin: const EdgeInsets.only(bottom: 12),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(16),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(14),
                  child: Column(
                    crossAxisAlignment:
                        CrossAxisAlignment.start,
                    children: [

                      // WAKTU
                      Row(
                        children: [
                          const Icon(
                            Icons.access_time,
                            color: Colors.green,
                          ),
                          const SizedBox(width: 8),

                          Expanded(
                            child: Text(
                              item['waktu']?.toString() ?? "-",
                              style: const TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 14,
                              ),
                            ),
                          ),
                        ],
                      ),

                      const SizedBox(height: 8),
                      const Divider(),

                      // PH DAN PPM
                      Row(
                        children: [

                          Expanded(
                            child: Container(
                              padding:
                                  const EdgeInsets.all(12),
                              decoration: BoxDecoration(
                                color: Colors.blue.shade50,
                                borderRadius:
                                    BorderRadius.circular(12),
                              ),
                              child: Column(
                                children: [
                                  const Icon(
                                    Icons.science,
                                    color: Colors.blue,
                                    size: 30,
                                  ),
                                  const SizedBox(height: 6),

                                  const Text(
                                    "pH",
                                    style: TextStyle(
                                      fontWeight:
                                          FontWeight.bold,
                                    ),
                                  ),

                                  const SizedBox(height: 4),

                                  Text(
                                    item['ph']
                                            ?.toString() ??
                                        "-",
                                    style:
                                        const TextStyle(
                                      fontSize: 22,
                                      fontWeight:
                                          FontWeight.bold,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),

                          const SizedBox(width: 10),

                          Expanded(
                            child: Container(
                              padding:
                                  const EdgeInsets.all(12),
                              decoration: BoxDecoration(
                                color:
                                    Colors.orange.shade50,
                                borderRadius:
                                    BorderRadius.circular(12),
                              ),
                              child: Column(
                                children: [
                                  const Icon(
                                    Icons.water_drop,
                                    color: Colors.orange,
                                    size: 30,
                                  ),
                                  const SizedBox(height: 6),

                                  const Text(
                                    "PPM",
                                    style: TextStyle(
                                      fontWeight:
                                          FontWeight.bold,
                                    ),
                                  ),

                                  const SizedBox(height: 4),

                                  Text(
                                    item['ppm']
                                            ?.toString() ??
                                        "-",
                                    style:
                                        const TextStyle(
                                      fontSize: 22,
                                      fontWeight:
                                          FontWeight.bold,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),

                      const SizedBox(height: 12),

                      // STATUS
                      Wrap(
                        spacing: 8,
                        runSpacing: 8,
                        children: [

                          Chip(
                            avatar: const Icon(
                              Icons.water_drop,
                              size: 18,
                            ),
                            label: Text(
                              item['status_tds']
                                      ?.toString() ??
                                  "-",
                            ),
                          ),

                          Chip(
                            avatar: const Icon(
                              Icons.science,
                              size: 18,
                            ),
                            label: Text(
                              item['status_ph']
                                      ?.toString() ??
                                  "-",
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}