import 'package:sysfarma_mobile/src/core/theme/app_tokens.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

class ReportsScreen extends ConsumerWidget {
  const ReportsScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final tiles = <_ReportTile>[
      const _ReportTile(
        icon: Icons.bar_chart_rounded,
        title: 'General',
        subtitle: 'Ventas, tendencia y top productos',
        color: AppTokens.primary,
        route: '/reports/general',
      ),
      const _ReportTile(
        icon: Icons.warning_amber_rounded,
        title: 'Stock crítico',
        subtitle: 'Sin stock y bajo stock',
        color: AppTokens.danger,
        route: '/reports/critical-stock',
      ),
      const _ReportTile(
        icon: Icons.event_busy_rounded,
        title: 'Por vencer',
        subtitle: 'Lotes próximos a vencer',
        color: AppTokens.warning,
        route: '/reports/expiring-lots',
      ),
      const _ReportTile(
        icon: Icons.person_outline_rounded,
        title: 'Por vendedor',
        subtitle: 'Ventas agrupadas por usuario',
        color: AppTokens.success,
        route: '/reports/by-seller',
      ),
      const _ReportTile(
        icon: Icons.inventory_2_rounded,
        title: 'Inventario',
        subtitle: 'Stock, costo y utilidad',
        color: AppTokens.secondary,
        route: '/reports/inventory',
      ),
      const _ReportTile(
        icon: Icons.label_important_rounded,
        title: 'Lotes',
        subtitle: 'Productos con y sin lote',
        color: AppTokens.cta,
        route: '/reports/lots-overview',
      ),
      const _ReportTile(
        icon: Icons.point_of_sale_rounded,
        title: 'Cajas',
        subtitle: 'Historial y reportes PDF',
        color: AppTokens.primary,
        route: '/reports/cashes',
      ),
      const _ReportTile(
        icon: Icons.category_rounded,
        title: 'Por categoría',
        subtitle: 'Qué categoría vende más',
        color: AppTokens.secondary,
        route: '/reports/by-category',
      ),
      const _ReportTile(
        icon: Icons.schedule_rounded,
        title: 'Por horarios',
        subtitle: 'En qué horas se vende',
        color: AppTokens.cta,
        route: '/reports/by-hour',
      ),
    ];

    return SafeArea(
      child: ListView(
        padding: AppTokens.pagePadding,
        children: [
          GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            itemCount: tiles.length,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 12,
              mainAxisSpacing: 12,
              childAspectRatio: 1.05,
            ),
            itemBuilder: (context, index) {
              final tile = tiles[index];
              return _ReportCard(
                tile: tile,
                onTap: () => context.go(tile.route),
              );
            },
          ),
        ],
      ),
    );
  }
}

class _ReportTile {
  const _ReportTile({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.color,
    required this.route,
  });

  final IconData icon;
  final String title;
  final String subtitle;
  final Color color;
  final String route;
}

class _ReportCard extends StatelessWidget {
  const _ReportCard({required this.tile, required this.onTap});

  final _ReportTile tile;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Material(
      color: AppTokens.surface,
      borderRadius: BorderRadius.circular(AppTokens.radiusMedium),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(AppTokens.radiusMedium),
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(AppTokens.radiusMedium),
            border: Border.all(color: AppTokens.border),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                width: 48,
                height: 48,
                decoration: BoxDecoration(
                  color: tile.color.withValues(alpha: 0.12),
                  borderRadius: BorderRadius.circular(14),
                ),
                child: Icon(tile.icon, color: tile.color, size: 26),
              ),
              const SizedBox(height: 8),
              Text(
                tile.title,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.titleSmall?.copyWith(
                      fontWeight: FontWeight.w700,
                    ),
              ),
              const SizedBox(height: 2),
              Text(
                tile.subtitle,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).textTheme.bodySmall?.copyWith(
                      color: AppTokens.secondary,
                    ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}