import 'package:flutter/material.dart';
import 'package:supplier_new/common/settings.dart';
import 'package:supplier_new/plans/plan_details.dart';
import 'package:supplier_new/plans/plan_requests.dart';
import 'package:supplier_new/plans/plans_model.dart';
import 'package:supplier_new/plans/search_plan_appbar.dart';

class AllPlans extends StatefulWidget {
  final String navigationFrom;
  AllPlans({
    super.key,
    required this.navigationFrom,
  });

  @override
  State<AllPlans> createState() => _AllPlansState();
}

class _AllPlansState extends State<AllPlans> {
  final TextEditingController searchController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final List<PlansModel> plans = [
      PlansModel(
        status: "Active",
        apartment: "Green Valley Apartments",
        liters: "10,000 L - Drinking water",
        price: "₹3,400",
        advance: "10% Advance",
        deliveries: "10/22 Deliveries",
        frequency: "4/week",
      ),
      PlansModel(
        status: "Active",
        apartment: "Lakeview Towers",
        liters: "8,000 L - Drinking water",
        price: "₹2,900",
        advance: "5% Advance",
        deliveries: "8/20 Deliveries",
        frequency: "3/week",
      ),
      PlansModel(
        status: "Active",
        apartment: "Hilltop Residency",
        liters: "12,000 L - Drinking water",
        price: "₹4,500",
        advance: "15% Advance",
        deliveries: "12/25 Deliveries",
        frequency: "5/week",
      ),
      PlansModel(
        status: "Inactive",
        apartment: "Silver Oak Villas",
        liters: "6,000 L - Drinking water",
        price: "₹2,100",
        advance: "0% Advance",
        deliveries: "0/15 Deliveries",
        frequency: "0/week",
      ),
    ];

    return Scaffold(
      backgroundColor: const Color(0XFFFFFFFF),
      appBar: widget.navigationFrom.toString().toLowerCase()=='dashboard'?SearchPlanAppBar(
        controller: searchController,
        onBack: () => Navigator.pop(context),
        onHelp: () {
          print("Help tapped");
        },
      ):null,
      body: SingleChildScrollView(
        child: Column(
          children: [
            /// 🔹 Grey top section
            Container(
              decoration: const BoxDecoration(
                color: Color(0XFFF2F2F2),
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(24),
                  bottomRight: Radius.circular(24),
                ),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
              child: Column(
                children: [
                  Text(
                    "05",
                    style: fontTextStyle(64, const Color(0XFF2D2E30), FontWeight.w700),
                  ),
                  Text(
                    "Active Plans",
                    style: fontTextStyle(24, const Color(0XFF2D2E30), FontWeight.w600),
                  ),
                  const SizedBox(height: 24),

                  /// Bore Water + Drinking Water
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      PlanCategoryCard(
                        image: Image.asset(
                          'images/bore-water.png',
                          fit: BoxFit.contain,
                          height: 40,
                          width: 40,
                        ),
                        value: "02",
                        label: "Bore Water",
                      ),
                      PlanCategoryCard(
                        image: Image.asset(
                          'images/drinking-water.png',
                          height: 40,
                          width: 40,
                          fit: BoxFit.contain,
                        ),
                        value: "03",
                        label: "Drinking Water",
                      ),
                    ],
                  ),
                  const SizedBox(height: 24),

                  /// Button
                  SizedBox(
                    width: double.infinity,
                    child: ElevatedButton(
                      style: ElevatedButton.styleFrom(
                        backgroundColor: const Color(0XFF8270DB),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(32),
                        ),
                        padding: const EdgeInsets.symmetric(
                            horizontal: 16, vertical: 16),
                      ),
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const PlanRequestsPage()),
                        );
                      },
                      child: Text(
                        "View Plan Requests",
                        style: fontTextStyle(
                            16, const Color(0XFFFFFFFF), FontWeight.w500),
                      ),
                    ),
                  ),
                ],
              ),
            ),



            /// 🔹 White bottom section (filters + list)
            Container(
              color: Color(0XFFFFFFFF),
              child: Column(
                children: [
                  const SizedBox(height: 12),

                  /// Filters Row
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    padding: const EdgeInsets.symmetric(horizontal: 12),
                    child: Row(
                      children: [
                        FilterChipWidget(label: "Building"),
                        const SizedBox(width: 8),
                        FilterChipWidget(label: "Status"),
                        const SizedBox(width: 8),
                        FilterChipWidget(label: "Date"),
                        const SizedBox(width: 8),
                        FilterChipWidget(label: "Amount"),
                      ],
                    ),
                  ),

                  const SizedBox(height: 20),

                  /// Order List
                  ListView.builder(
                    padding: const EdgeInsets.all(12),
                    itemCount: plans.length,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index) {
                      final delivery = plans[index];
                      return PlansCard(delivery: delivery);
                    },
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// Curve clipper for smooth transition
class SmallCurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, size.height);

    // Smooth downward curve
    path.quadraticBezierTo(
      size.width / 2, -20, // control point (curve depth)
      size.width, size.height,
    );

    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

/// Category Card
class PlanCategoryCard extends StatelessWidget {
  final Image image;
  final String value;
  final String label;

  const PlanCategoryCard({
    super.key,
    required this.image,
    required this.value,
    required this.label,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(width: 40, height: 40, child: image),
        const SizedBox(height: 8),
        Text(
          value,
          style: fontTextStyle(20, const Color(0XFF515253), FontWeight.w700),
        ),
        const SizedBox(height: 4),
        Text(
          label,
          style: fontTextStyle(16, const Color(0XFF515253), FontWeight.w400),
        ),
      ],
    );
  }
}

/// Filter Chip
class FilterChipWidget extends StatelessWidget {
  final String label;
  const FilterChipWidget({super.key, required this.label});

  @override
  Widget build(BuildContext context) {
    return ChoiceChip(
      label: Text(label),
      selected: false,
      onSelected: (_) {},
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
      backgroundColor: Colors.white,
      side: BorderSide(color: Colors.grey.shade300),
    );
  }
}

/// Plan Card
class PlansCard extends StatelessWidget {
  final PlansModel delivery;

  const PlansCard({super.key, required this.delivery});

  @override
  Widget build(BuildContext context) {
    bool isActive = delivery.status == "Active";

    return GestureDetector(
      onTap: (){
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => PlanDetails(),
          ),
        );
      },
      child: Container(
        margin: const EdgeInsets.only(bottom: 12),
        padding: const EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(12),
          border: Border.all(color: const Color(0xFFE5E5E5)),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.03),
              blurRadius: 5,
              offset: const Offset(0, 2),
            )
          ],
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Status Chip
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
              decoration: BoxDecoration(
                color: isActive ? const Color(0xFFE9F9EE) : const Color(0xFFF2F2F2),
                borderRadius: BorderRadius.circular(6),
                border: Border.all(
                  color: isActive ? const Color(0xFF3BB273) : Colors.grey.shade400,
                ),
              ),
              child: Text(
                delivery.status,
                style: TextStyle(
                  fontSize: 12,
                  fontWeight: FontWeight.w500,
                  color: isActive ? const Color(0xFF3BB273) : Colors.grey.shade600,
                ),
              ),
            ),
            const SizedBox(height: 8),

            // Apartment + Price Row
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  delivery.apartment,
                  style: const TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.w600,
                    color: Color(0xFF2A2A2A),
                  ),
                ),
                Text(
                  delivery.price,
                  style: const TextStyle(
                    fontSize: 15,
                    fontWeight: FontWeight.w600,
                    color: Color(0xFF2A2A2A),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 4),

            // Liters & Advance
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  delivery.liters,
                  style: const TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF7B5AF4),
                  ),
                ),
                Text(
                  delivery.advance,
                  style: const TextStyle(
                    fontSize: 12,
                    color: Color(0xFF646566),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 12),

            // Deliveries row with background
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
              decoration: BoxDecoration(
                color: const Color(0xFFF8F6FF),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    delivery.deliveries,
                    style: const TextStyle(
                      fontSize: 13,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF2A2A2A),
                    ),
                  ),
                  Text(
                    delivery.frequency,
                    style: const TextStyle(
                      fontSize: 13,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF7B5AF4),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
