import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xfffef3f2), // Putih kemerahan
      appBar: AppBar(
        title: const Text(
          'Tentang Aplikasi',
          style: TextStyle(fontWeight: FontWeight.bold, letterSpacing: 1),
        ),
        backgroundColor: Colors.red,
        foregroundColor: Colors.white,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // Header Gradasi Merah Putih
            Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 24),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Colors.red.shade700,
                    Colors.red.shade500,
                    Colors.red.shade300,
                    Colors.red.shade100,
                    Colors.white,
                  ],
                  stops: const [0.0, 0.3, 0.6, 0.85, 1.0],
                ),
                borderRadius: const BorderRadius.only(
                  bottomLeft: Radius.circular(40),
                  bottomRight: Radius.circular(40),
                ),
              ),
              child: Column(
                children: [
                  // Animasi Coffee Bean
                  TweenAnimationBuilder(
                    duration: const Duration(seconds: 2),
                    tween: Tween<double>(begin: 0, end: 1),
                    builder: (context, double value, child) {
                      return Transform.scale(
                        scale: value,
                        child: Container(
                          padding: const EdgeInsets.all(20),
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            border: Border.all(
                              color: Colors.white.withOpacity(0.5),
                              width: 2,
                            ),
                            boxShadow: [
                              BoxShadow(
                                blurRadius: 30,
                                color: Colors.white.withOpacity(0.3),
                                spreadRadius: 5,
                              ),
                            ],
                          ),
                          child: const Icon(
                            Icons.coffee,
                            size: 60,
                            color: Colors.white,
                          ),
                        ),
                      );
                    },
                  ),
                  const SizedBox(height: 20),
                  const Text(
                    'KopiCare IoT',
                    style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                      letterSpacing: 2,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Container(
                    width: 80,
                    height: 3,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(2),
                      color: Colors.white,
                    ),
                  ),
                  const SizedBox(height: 16),
                  const Text(
                    'Smart Coffee Drying System',
                    style: TextStyle(
                      fontSize: 14,
                      color: Colors.white,
                      letterSpacing: 1,
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 30),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                children: [
                  // Deskripsi Card
                  _buildWhiteCard(
                    icon: Icons.description,
                    title: 'Deskripsi',
                    content:
                        'Aplikasi ini dirancang untuk memonitor dan mengatur proses '
                        'pengeringan biji kopi secara cerdas menggunakan teknologi Internet '
                        'of Things (IoT). Dengan aplikasi ini, petani dapat memantau suhu, '
                        'kelembapan, dan berat biji kopi secara real-time, sehingga proses '
                        'pengeringan menjadi lebih efisien dan mengurangi resiko kerusakan '
                        'biji kopi.',
                    color: Colors.red,
                  ),
                  const SizedBox(height: 20),

                  // Fitur Utama Card
                  _buildWhiteCard(
                    icon: Icons.rocket_launch,
                    title: 'Fitur Utama',
                    content: '',
                    color: Colors.red,
                    child: Column(
                      children: [
                        _buildFeatureItem(
                            Icons.thermostat,
                            'Monitoring Suhu & Kelembapan',
                            'Real-time data sensor'),
                        _buildFeatureItem(
                            Icons.fitness_center,
                            'Monitoring Berat Biji Kopi',
                            'Pantau proses pengeringan'),
                        _buildFeatureItem(Icons.smart_toy, 'Kontrol Otomatis',
                            'Heater & kipas berbasis AI'),
                        _buildFeatureItem(Icons.timer, 'Interval Update',
                            'Atur frekuensi pengambilan data'),
                        _buildFeatureItem(Icons.history, 'Riwayat Pengeringan',
                            'Data tersimpan untuk analisis'),
                      ],
                    ),
                  ),
                  const SizedBox(height: 20),

                  // Manfaat Card
                  _buildWhiteCard(
                    icon: Icons.emoji_events,
                    title: 'Manfaat',
                    content: '',
                    color: Colors.red,
                    child: Column(
                      children: [
                        _buildBenefitItem(Icons.star, 'Kualitas Terjaga',
                            'Biji kopi kering optimal'),
                        _buildBenefitItem(Icons.timer, 'Efisiensi Waktu',
                            'Proses lebih cepat 40%'),
                        _buildBenefitItem(Icons.savings, 'Hemat Biaya',
                            'Mengurangi biaya operasional'),
                        _buildBenefitItem(Icons.analytics, 'Data Akurat',
                            'Monitoring presisi tinggi'),
                      ],
                    ),
                  ),
                  const SizedBox(height: 20),

                  // Proses Pengeringan Kopi
                  _buildWhiteCard(
                    icon: Icons.timeline,
                    title: 'Proses Pengeringan',
                    content: '',
                    color: Colors.red,
                    child: Column(
                      children: [
                        _buildProcessStep('1', 'Pemanasan Awal',
                            'Heater menyala hingga suhu optimal'),
                        _buildProcessStep('2', 'Pengeringan Utama',
                            'Suhu dijaga stabil, berat berkurang'),
                        _buildProcessStep('3', 'Pendinginan',
                            'Kipas menyala, suhu diturunkan'),
                        _buildProcessStep('4', 'Pengeringan Selesai',
                            'Target berat tercapai, proses stop'),
                      ],
                    ),
                  ),
                  const SizedBox(height: 20),

                  // Teknologi Card
                  _buildWhiteCard(
                    icon: Icons.devices,
                    title: 'Teknologi',
                    content: '',
                    color: Colors.red,
                    child: Wrap(
                      spacing: 10,
                      runSpacing: 10,
                      children: [
                        _buildTechChip('Flutter', Colors.blue),
                        _buildTechChip('IoT', Colors.red),
                        _buildTechChip('ESP32', Colors.green),
                        _buildTechChip('Sensor DHT22', Colors.orange),
                        _buildTechChip('Load Cell', Colors.purple),
                        _buildTechChip('Firebase', Colors.yellow.shade800),
                      ],
                    ),
                  ),
                  const SizedBox(height: 30),

                  // Footer
                  Container(
                    padding: const EdgeInsets.all(20),
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                        colors: [
                          Colors.red.shade700,
                          Colors.red.shade500,
                          Colors.red.shade300,
                        ],
                      ),
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                          blurRadius: 20,
                          color: Colors.red.withOpacity(0.3),
                        ),
                      ],
                    ),
                    child: Column(
                      children: [
                        const Icon(
                          Icons.coffee,
                          color: Colors.white,
                          size: 40,
                        ),
                        const SizedBox(height: 10),
                        const Text(
                          'KopiCare IoT',
                          style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            letterSpacing: 1,
                          ),
                        ),
                        const SizedBox(height: 5),
                        Text(
                          'Smart Coffee Drying System',
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.white.withOpacity(0.9),
                          ),
                        ),
                        const SizedBox(height: 15),
                        const Divider(color: Colors.white24),
                        const SizedBox(height: 10),
                        Text(
                          '© 2026 KopiCare IoT | Version 2.0.0',
                          style: TextStyle(
                            fontSize: 11,
                            color: Colors.white.withOpacity(0.7),
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 30),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildWhiteCard({
    required IconData icon,
    required String title,
    required String content,
    required Color color,
    Widget? child,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(25),
        boxShadow: [
          BoxShadow(
            blurRadius: 15,
            color: Colors.red.withOpacity(0.1),
            offset: const Offset(0, 8),
          ),
        ],
        border: Border.all(
          color: Colors.red.withOpacity(0.1),
          width: 1,
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Container(
                  padding: const EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.red.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(15),
                  ),
                  child: Icon(icon, color: Colors.red, size: 24),
                ),
                const SizedBox(width: 15),
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Color(0xff2d2d2d),
                    letterSpacing: 0.5,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 20),
            if (content.isNotEmpty)
              Text(
                content,
                style: const TextStyle(
                  fontSize: 14,
                  color: Color(0xff666666),
                  height: 1.5,
                ),
              ),
            if (child != null) child,
          ],
        ),
      ),
    );
  }

  Widget _buildFeatureItem(IconData icon, String title, String subtitle) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Colors.red.withOpacity(0.1),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Icon(icon, color: Colors.red, size: 20),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                    color: Color(0xff2d2d2d),
                  ),
                ),
                Text(
                  subtitle,
                  style: const TextStyle(
                    fontSize: 12,
                    color: Color(0xff888888),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildBenefitItem(IconData icon, String title, String subtitle) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Row(
        children: [
          Container(
            padding: const EdgeInsets.all(8),
            decoration: BoxDecoration(
              color: Colors.green.withOpacity(0.1),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Icon(icon, color: Colors.green, size: 20),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                    color: Color(0xff2d2d2d),
                  ),
                ),
                Text(
                  subtitle,
                  style: const TextStyle(
                    fontSize: 12,
                    color: Color(0xff888888),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildProcessStep(String number, String title, String description) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Row(
        children: [
          Container(
            width: 36,
            height: 36,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.red.shade700, Colors.red.shade500],
              ),
              shape: BoxShape.circle,
            ),
            child: Center(
              child: Text(
                number,
                style: const TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
            ),
          ),
          const SizedBox(width: 12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w600,
                    color: Color(0xff2d2d2d),
                  ),
                ),
                Text(
                  description,
                  style: const TextStyle(
                    fontSize: 12,
                    color: Color(0xff888888),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTechChip(String label, Color color) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      decoration: BoxDecoration(
        color: color.withOpacity(0.1),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(
          color: color.withOpacity(0.3),
          width: 1,
        ),
      ),
      child: Text(
        label,
        style: TextStyle(
          fontSize: 12,
          fontWeight: FontWeight.w500,
          color: color,
        ),
      ),
    );
  }
}
