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

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

  void _salinFormat(BuildContext context) {
    const formatText = '''
Penerima :
Alamat :
No. Wa :
Barang :
Total :
Pembayaran :
''';

    Clipboard.setData(const ClipboardData(text: formatText));
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("Format pengiriman berhasil disalin!"),
        duration: Duration(seconds: 2),
      ),
    );
  }

  Widget _buildSection({
  required String title,
  required String description,
  required IconData icon,
}) {
  return Container(
    width: double.infinity,
    margin: const EdgeInsets.symmetric(vertical: 8),
    padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.blue.shade50,
      borderRadius: BorderRadius.circular(14),
      border: Border.all(
        color: Colors.blue.shade200,
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.05),
          blurRadius: 6,
          offset: const Offset(0, 3),
        )
      ],
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: const EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.blue.shade100,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Icon(
            icon,
            color: const Color(0xFF1976D2),
            size: 24,
          ),
        ),

        const SizedBox(width: 14),

        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: const TextStyle(
                  fontSize: 16.5,
                  fontWeight: FontWeight.bold,
                  color: Color(0xFF1976D2),
                ),
              ),

              const SizedBox(height: 6),

              Text(
                description,
                style: const TextStyle(
                  fontSize: 15,
                  height: 1.6,
                  color: Colors.black87,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}


  Widget _buildExampleBox() {
  Widget item(String title, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          
          const SizedBox(width: 10),

          SizedBox(
            width: 100,
            child: Text(
              title,
              style: const TextStyle(
                fontWeight: FontWeight.w600,
              ),
            ),
          ),

          const Text(" : "),

          Expanded(
            child: Text(
              value,
              style: const TextStyle(color: Colors.black87),
            ),
          ),
        ],
      ),
    );
  }

  return Container(
    width: double.infinity,
    padding: const EdgeInsets.all(18),
    margin: const EdgeInsets.symmetric(vertical: 10),
    decoration: BoxDecoration(
      color: Colors.blue.shade50,
      borderRadius: BorderRadius.circular(14),
      border: Border.all(
        color: Colors.blue.shade200,
      ),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.05),
          blurRadius: 6,
          offset: const Offset(0, 3),
        )
      ],
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Text(
          "Contoh Format Pengiriman",
          style: TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
          ),
        ),

        const Divider(height: 20),

        item("Penerima", "[Nama Penerima]"),
        item("Alamat",
            "[Detail Alamat], [Kota/Kab.], [Provinsi]"),
        item("No. WA", "08581245xxxx"),
        item("Barang", "Barang"),
        item("Total", "100.000"),
        item("Pembayaran", "[COD / NonCOD]"),
      ],
    ),
  );
}


  Widget _buildRulesBox() {
  Widget ruleItem(String text) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 6),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: const EdgeInsets.only(top: 3),
            padding: const EdgeInsets.all(4),
            decoration: BoxDecoration(
              color: Colors.blue.shade100,
              shape: BoxShape.circle,
            ),
            child: const Icon(
              Icons.check,
              size: 14,
              color: Color(0xFF1976D2),
            ),
          ),
          const SizedBox(width: 10),
          Expanded(
            child: Text(
              text,
              style: const TextStyle(
                fontSize: 15,
                height: 1.6,
                color: Colors.black87,
              ),
            ),
          ),
        ],
      ),
    );
  }

  return Container(
    width: double.infinity,
    padding: const EdgeInsets.all(16),
    margin: const EdgeInsets.only(top: 8, bottom: 16),
    decoration: BoxDecoration(
      color: Colors.blue.shade50,
      borderRadius: BorderRadius.circular(14),
      border: Border.all(color: Colors.blue.shade200),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Row(
          children: [
            Icon(
              Icons.rule,
              color: Color(0xFF1976D2),
            ),
            SizedBox(width: 8),
            Text(
              "Aturan Format Pengiriman",
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Color(0xFF1976D2),
              ),
            ),
          ],
        ),

        const SizedBox(height: 12),

        ruleItem("Penerima : diisi nama penerima barang"),
        ruleItem(
            "Alamat : wajib mencantumkan kota/kabupaten dan provinsi"),
        ruleItem(
            "No. WA : nomor WhatsApp penerima yang aktif"),
        ruleItem("Barang : nama barang yang dikirim"),
        ruleItem(
            "Total : hanya angka tanpa simbol (contoh: 75000)"),
        ruleItem(
            "Pembayaran : hanya ‘COD’ atau ‘Non COD’"),
      ],
    ),
  );
}


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text(
          "Panduan Pengguna",
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w600,
          ),
        ),
        centerTitle: true,
        backgroundColor: const Color(0xFF1976D2),
        elevation: 2,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(18),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: Column(
                children: [
                  const Icon(
                    Icons.help_outline_rounded,
                    color: Color(0xFF1976D2),
                    size: 72,
                  ),
                  const SizedBox(height: 8),
                  Text(
                    "Panduan Pengguna Aplikasi",
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.grey.shade800,
                    ),
                  ),
                  const SizedBox(height: 6),
                  Text(
                    "Ikuti langkah-langkah di bawah untuk menggunakan aplikasi dengan mudah.",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      fontSize: 14.5,
                      color: Colors.grey.shade700,
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 24),

            _buildSection(
              title: "Langkah 1 — Isi Data Toko",
              description:
                  "Setelah berhasil registrasi dan login, langkah pertama adalah mengisi data toko Anda. "
                  "Menu untuk mengisi data toko dapat ditemukan di bagian menu ‘Akun’.",
              icon: Icons.store_rounded,
            ),

            _buildSection(
              title: "Langkah 2 — Input Data Resi",
              description:
                  "Setelah data toko diisi, Anda dapat menambahkan data pengiriman dengan mengikuti format yang telah ditentukan di bawah ini:",
              icon: Icons.receipt_long_rounded,
            ),

            _buildExampleBox(),

            Center(
              child: ElevatedButton.icon(
                onPressed: () => _salinFormat(context),
                icon: const Icon(Icons.copy_rounded),
                label: const Text("Salin Format Pengiriman"),
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF1976D2),
                  foregroundColor: Colors.white,
                  padding:
                      const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                  textStyle: const TextStyle(
                    fontSize: 15.5,
                    fontWeight: FontWeight.w600,
                  ),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
            ),

            const SizedBox(height: 18),

            _buildSection(
              title: "Ketentuan Pengisian",
              description:
                  "Pastikan setiap kolom diisi dengan benar agar data resi tersimpan dan terbaca dengan baik oleh sistem.",
              icon: Icons.rule_rounded,
            ),

            _buildRulesBox(),

            _buildSection(
              title: "Tips Penggunaan",
              description:
                  "💡 Pastikan format sesuai contoh, gunakan huruf kapital di awal kata, dan hindari penggunaan simbol yang tidak perlu.",
              icon: Icons.lightbulb_rounded,
            ),

            const SizedBox(height: 24),
            Center(
              child: Text(
                "Terima kasih telah menggunakan aplikasi kami 👋",
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.grey.shade700,
                  fontStyle: FontStyle.italic,
                ),
              ),
            ),
            const SizedBox(height: 12),
          ],
        ),
      ),
    );
  }
}
