import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // Receiving arguments from the previous screen
    final args = ModalRoute.of(context)?.settings.arguments as Map<String, dynamic>? ?? {
      'id': '1',
      'date': '2025/11/18',
      'time': '14:35:00',
      'temp': '45.5 °C',
      'humidity': '52 %',
      'light': '200 Lux',
      'location': 'Gudang A',
      'intake': 'ON',
      'exhaust': 'ON'
    };

    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: const Text('Detail Data Citra', style: TextStyle(color: Colors.white)),
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.grey),
          onPressed: () => Navigator.pop(context),
        ),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.download, color: Colors.green),
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            // Image Box
            Container(
              height: 250,
              width: double.infinity,
              decoration: BoxDecoration(
                color: const Color(0xFF1A1A1A),
                borderRadius: BorderRadius.circular(20),
              ),
              clipBehavior: Clip.hardEdge,
              child: args['url_foto'] != null && args['url_foto'].toString().isNotEmpty
                  ? Image.network(
                      args['url_foto'],
                      fit: BoxFit.cover,
                      loadingBuilder: (context, child, progress) {
                        if (progress == null) return child;
                        return const Center(
                          child: CircularProgressIndicator(color: Colors.green),
                        );
                      },
                      errorBuilder: (context, error, stack) => Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Icon(Icons.broken_image, size: 80, color: Colors.grey),
                          Text('Citra #${args['id']}',
                              style: const TextStyle(color: Colors.grey)),
                        ],
                      ),
                    )
                  : Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const Icon(Icons.image, size: 80, color: Colors.grey),
                        Text('Citra #${args['id']}',
                            style: const TextStyle(color: Colors.grey)),
                      ],
                    ),
            ),
            const SizedBox(height: 20),
            
            // Data Card
            Container(
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                color: const Color(0xFF1A1A1A),
                borderRadius: BorderRadius.circular(20),
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const Icon(Icons.calendar_today, color: Colors.green, size: 16),
                      const SizedBox(width: 8),
                      Text(
                        '${args['date']} - ${args['time']}',
                        style: const TextStyle(color: Colors.green, fontWeight: FontWeight.bold, fontSize: 16),
                      ),
                    ],
                  ),
                  const SizedBox(height: 10),
                  Text('Lokasi: ${args['location']}', style: const TextStyle(color: Colors.grey, fontSize: 13)),
                  const Divider(color: Colors.grey, height: 30),
                  
                  _buildDataRow('Suhu', args['temp'], 'Kelembaban', args['humidity']),
                  const SizedBox(height: 15),
                  _buildDataRow('Cahaya', args['light'], 'Mode', 'Terjadwal'),
                  const Divider(color: Colors.grey, height: 30),
                  
                  _buildDataRow(
                    'Fan Intake', args['intake'], 
                    'Fan Exhaust', args['exhaust'], 
                    valueColor: Colors.green
                  ),
                ],
              ),
            ),
            const Spacer(),
            
            // Share Button
            SizedBox(
              width: double.infinity,
              height: 55,
              child: ElevatedButton.icon(
                onPressed: () {},
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
                icon: const Icon(Icons.share, color: Colors.white),
                label: const Text('Export Data Lengkap (.CSV)', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildDataRow(String label1, String value1, String label2, String value2, {Color valueColor = Colors.white}) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(label1, style: const TextStyle(color: Colors.grey, fontSize: 12)),
              const SizedBox(height: 4),
              Text(': $value1', style: TextStyle(color: valueColor, fontWeight: FontWeight.bold, fontSize: 15)),
            ],
          ),
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(label2, style: const TextStyle(color: Colors.grey, fontSize: 12)),
              const SizedBox(height: 4),
              Text(': $value2', style: TextStyle(color: valueColor, fontWeight: FontWeight.bold, fontSize: 15)),
            ],
          ),
        ),
      ],
    );
  }
}