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

import '../../../common/theme/theme.dart';
import '../../components/button/button.dart';
import 'widgets/appbar.dart';
import 'widgets/customer_card.dart';
import 'widgets/customer_tile.dart';

// Customer Model
class Customer {
  final String id;
  final String name;
  final String email;
  final String phone;
  final String address;
  final double totalPurchases;
  final int totalOrders;
  final DateTime lastVisit;
  final String membershipLevel;
  final bool isActive;

  Customer({
    required this.id,
    required this.name,
    required this.email,
    required this.phone,
    required this.address,
    required this.totalPurchases,
    required this.totalOrders,
    required this.lastVisit,
    required this.membershipLevel,
    required this.isActive,
  });
}

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

  @override
  State<CustomerPage> createState() => _CustomerPageState();
}

class _CustomerPageState extends State<CustomerPage>
    with TickerProviderStateMixin {
  final TextEditingController _searchController = TextEditingController();
  String _searchQuery = '';
  bool _isGridView = false;

  // Sample customer data
  final List<Customer> _customers = [
    Customer(
      id: '001',
      name: 'Ahmad Wijaya',
      email: 'ahmad@email.com',
      phone: '+62 812-3456-7890',
      address: 'Jl. Raya No. 123, Jakarta',
      totalPurchases: 2500000,
      totalOrders: 15,
      lastVisit: DateTime.now().subtract(Duration(days: 2)),
      membershipLevel: 'Gold',
      isActive: true,
    ),
    Customer(
      id: '002',
      name: 'Siti Nurhaliza',
      email: 'siti@email.com',
      phone: '+62 813-4567-8901',
      address: 'Jl. Merdeka No. 45, Bandung',
      totalPurchases: 1800000,
      totalOrders: 12,
      lastVisit: DateTime.now().subtract(Duration(days: 5)),
      membershipLevel: 'Silver',
      isActive: true,
    ),
    Customer(
      id: '003',
      name: 'Budi Santoso',
      email: 'budi@email.com',
      phone: '+62 814-5678-9012',
      address: 'Jl. Sudirman No. 67, Surabaya',
      totalPurchases: 3200000,
      totalOrders: 20,
      lastVisit: DateTime.now().subtract(Duration(days: 1)),
      membershipLevel: 'Platinum',
      isActive: true,
    ),
    Customer(
      id: '004',
      name: 'Maya Sari',
      email: 'maya@email.com',
      phone: '+62 815-6789-0123',
      address: 'Jl. Diponegoro No. 89, Yogyakarta',
      totalPurchases: 950000,
      totalOrders: 8,
      lastVisit: DateTime.now().subtract(Duration(days: 30)),
      membershipLevel: 'Bronze',
      isActive: false,
    ),
  ];

  // Animation
  late AnimationController _rotationController;
  late Animation<double> _rotationAnimation;

  @override
  initState() {
    super.initState();
    _rotationController = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat();
    _rotationAnimation = Tween<double>(
      begin: 0,
      end: 2 * math.pi,
    ).animate(_rotationController);
  }

  @override
  void dispose() {
    _searchController.dispose();
    _rotationController.dispose();
    super.dispose();
  }

  List<Customer> get filteredCustomers {
    var filtered = _customers.where((customer) {
      final matchesSearch =
          customer.name.toLowerCase().contains(_searchQuery.toLowerCase()) ||
          customer.email.toLowerCase().contains(_searchQuery.toLowerCase()) ||
          customer.phone.contains(_searchQuery);

      return matchesSearch;
    }).toList();

    return filtered;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppColor.background,
      body: CustomScrollView(
        slivers: [
          // SliverAppBar with gradient
          SliverAppBar(
            expandedHeight: 120.0,
            floating: false,
            pinned: true,
            backgroundColor: AppColor.primary,
            flexibleSpace: CustomerAppbar(
              rotationAnimation: _rotationAnimation,
            ),
            actions: [ActionIconButton(onTap: () {}, icon: LineIcons.search)],
          ),

          // Search and Filter Section
          SliverToBoxAdapter(
            child: Container(
              color: AppColor.white,
              child: Column(
                children: [
                  // View toggle and sort
                  Padding(
                    padding: EdgeInsets.only(left: 16, right: 16, bottom: 0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          '${filteredCustomers.length} customers found',
                          style: TextStyle(
                            color: AppColor.textSecondary,
                            fontSize: 14,
                          ),
                        ),
                        Row(
                          children: [
                            IconButton(
                              icon: Icon(
                                _isGridView ? Icons.list : Icons.grid_view,
                                color: AppColor.primary,
                              ),
                              onPressed: () {
                                setState(() {
                                  _isGridView = !_isGridView;
                                });
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),

          // Customer List
          _isGridView ? _buildCustomerGrid() : _buildCustomerList(),
        ],
      ),
    );
  }

  Widget _buildCustomerList() {
    return SliverList(
      delegate: SliverChildBuilderDelegate((context, index) {
        final customer = filteredCustomers[index];
        return CustomerTile(customer: customer);
      }, childCount: filteredCustomers.length),
    );
  }

  Widget _buildCustomerGrid() {
    return SliverPadding(
      padding: EdgeInsets.all(16),
      sliver: SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
          childAspectRatio: 0.8,
        ),
        delegate: SliverChildBuilderDelegate((context, index) {
          final customer = filteredCustomers[index];
          return CustomerCard(customer: customer);
        }, childCount: filteredCustomers.length),
      ),
    );
  }
}