import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:line_icons/line_icons.dart';

import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart';
import '../../components/appbar/appbar.dart';
import 'widgets/purchase_tile.dart';
import 'widgets/stat_card.dart';
import 'widgets/status_chip.dart';

@RoutePage()
class PurchasePage extends StatefulWidget {
  const PurchasePage({super.key});

  @override
  State<PurchasePage> createState() => _PurchasePageState();
}

class _PurchasePageState extends State<PurchasePage>
    with TickerProviderStateMixin {
  late AnimationController cardAnimation;
  String selectedFilter = 'Semua';
  final List<String> filterOptions = [
    'Semua',
    'Pending',
    'Completed',
    'Cancelled',
  ];

  final List<Map<String, dynamic>> purchaseData = [
    {
      'id': 'PO-001',
      'supplier': 'PT. Sumber Rezeki',
      'date': '15 Aug 2025',
      'total': 2500000,
      'status': 'Completed',
      'items': 15,
    },
    {
      'id': 'PO-002',
      'supplier': 'CV. Maju Jaya',
      'date': '14 Aug 2025',
      'total': 1750000,
      'status': 'Pending',
      'items': 8,
    },
    {
      'id': 'PO-003',
      'supplier': 'PT. Global Supply',
      'date': '13 Aug 2025',
      'total': 3200000,
      'status': 'Completed',
      'items': 22,
    },
    {
      'id': 'PO-004',
      'supplier': 'UD. Berkah Mandiri',
      'date': '12 Aug 2025',
      'total': 890000,
      'status': 'Cancelled',
      'items': 5,
    },
  ];

  @override
  void initState() {
    super.initState();

    cardAnimation = AnimationController(
      duration: const Duration(milliseconds: 1200),
      vsync: this,
    );

    cardAnimation.forward();
  }

  @override
  void dispose() {
    cardAnimation.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 120.0,
            floating: false,
            pinned: true,
            elevation: 0,
            backgroundColor: AppColor.primary,

            flexibleSpace: CustomAppBar(title: context.lang.purchase),
          ),

          // Stats Cards
          SliverToBoxAdapter(
            child: Container(
              color: AppColor.background,
              padding: const EdgeInsets.all(16.0),
              child: Row(
                children: [
                  Expanded(
                    child: PurchaseStatCard(
                      title: context.lang.total_purchase,
                      value: 'Rp 8.340.000',
                      icon: LineIcons.shoppingCart,
                      iconColor: AppColor.success,
                      cardAnimation: cardAnimation,
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: PurchaseStatCard(
                      title: context.lang.pending_order,
                      value: '3 ${context.lang.orders}',
                      icon: LineIcons.clock,
                      iconColor: AppColor.warning,
                      cardAnimation: cardAnimation,
                    ),
                  ),
                ],
              ),
            ),
          ),

          // Filter Section
          SliverToBoxAdapter(
            child: Container(
              color: AppColor.surface,
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        context.lang.history_purchase,
                        style: AppStyle.lg.copyWith(
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 12,
                          vertical: 6,
                        ),
                        decoration: BoxDecoration(
                          color: AppColor.primary,
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: Text(
                          '${purchaseData.length} ${context.lang.orders}',
                          style: AppStyle.sm.copyWith(
                            color: AppColor.textWhite,
                          ),
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(height: 12),
                  SizedBox(
                    height: 40,
                    child: ListView.builder(
                      scrollDirection: Axis.horizontal,
                      itemCount: filterOptions.length,
                      itemBuilder: (context, index) {
                        final isSelected =
                            selectedFilter == filterOptions[index];
                        return PurchaseStatusChip(
                          isSelected: isSelected,
                          text: filterOptions[index],
                          onSelected: (selected) {
                            setState(() {
                              selectedFilter = filterOptions[index];
                            });
                          },
                        );
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),

          // Purchase List
          SliverPadding(
            padding: const EdgeInsets.all(16),
            sliver: SliverList(
              delegate: SliverChildBuilderDelegate((context, index) {
                final purchase = purchaseData[index];
                return AnimatedBuilder(
                  animation: cardAnimation,
                  builder: (context, child) {
                    final delay = index * 0.1;
                    final animValue = (cardAnimation.value - delay).clamp(
                      0.0,
                      1.0,
                    );

                    return Transform.translate(
                      offset: Offset(0, 30 * (1 - animValue)),
                      child: Opacity(
                        opacity: animValue,
                        child: PurchaseTile(purchase: purchase, index: index),
                      ),
                    );
                  },
                );
              }, childCount: purchaseData.length),
            ),
          ),

          // Bottom spacing for FAB
          const SliverToBoxAdapter(child: SizedBox(height: 80)),
        ],
      ),
    );
  }
}