import 'package:cheminova/controller/product_mannual_controller.dart';
import 'package:cheminova/models/product_mannual_model.dart';
import 'package:cheminova/screens/product/pdf_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import '../../widgets/custom_button.dart';

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

  @override
  _ProductsManualScreenState createState() => _ProductsManualScreenState();
}

class _ProductsManualScreenState extends State<ProductsManualScreen> {
  final ProductManualController _productManualController = Get.put(ProductManualController());

  @override
  void initState() {
    super.initState();
    _productManualController.fetchProductManuals(); // Fetch product manual list from API
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: _buildAppBar(),
      body: Stack(
        alignment: Alignment.topCenter,
        children: [
          _buildBackgroundImage(),
          Center(
            child: SingleChildScrollView(
              child: _buildCardContent(),
            ),
          ),
        ],
      ),
    );
  }

  // Extract AppBar to its own method
  AppBar _buildAppBar() {
    return AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      title: Center(child: Text("Product Manual")),
      leading: GestureDetector(
        onTap: () => Get.back(),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: SvgPicture.asset('assets/svg/menu.svg'),
        ),
      ),
      actions: [
        GestureDetector(
          onTap: () => Get.back(),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: SvgPicture.asset('assets/svg/back_arrow.svg'),
          ),
        ),
      ],
    );
  }

  // Extract background image widget
  Widget _buildBackgroundImage() {
    return Container(
      height: 900,
      decoration: const BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage('assets/images/image_1.png'),
        ),
      ),
      child: SizedBox(
        width: Get.width,
        height: Get.height * 0.7,
      ),
    );
  }

  // Build the card content
  Widget _buildCardContent() {
    return Obx(() {
      if (_productManualController.isLoading.value) {
        return const CircularProgressIndicator(); // Loading state
      }

      if (_productManualController.productManualList.isEmpty) {
        return const Text("No product manuals available"); // Empty state
      }

      return Card(
        margin: const EdgeInsets.symmetric(horizontal: 24),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(19),
          side: const BorderSide(color: Color(0xFFFDFDFD)),
        ),
        color: const Color(0xFFB4D1E5).withOpacity(0.9),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: _buildProductButtons(),
          ),
        ),
      );
    });
  }

  // Method to create a list of CustomButtons for products dynamically from API data
  List<Widget> _buildProductButtons() {
    return _productManualController.productManualList.map((productManual) {
      return CustomButton(
        text: productManual.title ?? "No Title", // Dynamically fetch product name
        onPressed: () => _navigateToPdfScreen(productManual),
      );
    }).toList();
  }

  // Method to handle navigation to PDF screen
  void _navigateToPdfScreen(ProductManualModel productManual) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => ViewPdfScreen(
          productManualModel: productManual,
        ),
      ),
    );
  }
}