import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:trainhub_flutter/core/constants/ui_constants.dart';
import 'package:trainhub_flutter/core/router/app_router.dart';
import 'package:trainhub_flutter/core/theme/app_colors.dart';

class MissingModelsState extends StatelessWidget {
  const MissingModelsState({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 72,
            height: 72,
            decoration: BoxDecoration(
              color: AppColors.surfaceContainerHigh,
              borderRadius: BorderRadius.circular(18),
            ),
            child: const Icon(
              Icons.cloud_download_outlined,
              size: 36,
              color: AppColors.textMuted,
            ),
          ),
          const SizedBox(height: UIConstants.spacing24),
          Text(
            'AI models are missing.',
            style: GoogleFonts.inter(
              fontSize: 18,
              fontWeight: FontWeight.w600,
              color: AppColors.textPrimary,
              letterSpacing: -0.2,
            ),
          ),
          const SizedBox(height: UIConstants.spacing8),
          Text(
            'Please download them to use the AI chat.',
            style: GoogleFonts.inter(
              fontSize: 14,
              color: AppColors.textSecondary,
            ),
          ),
          const SizedBox(height: UIConstants.spacing32),
          const _GoToSettingsButton(),
        ],
      ),
    );
  }
}

class _GoToSettingsButton extends StatefulWidget {
  const _GoToSettingsButton();

  @override
  State<_GoToSettingsButton> createState() => _GoToSettingsButtonState();
}

class _GoToSettingsButtonState extends State<_GoToSettingsButton> {
  bool _isHovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => setState(() => _isHovered = true),
      onExit: (_) => setState(() => _isHovered = false),
      child: AnimatedContainer(
        duration: UIConstants.animationDuration,
        height: 44,
        decoration: BoxDecoration(
          color: _isHovered
              ? AppColors.accent.withValues(alpha: 0.85)
              : AppColors.accent,
          borderRadius: BorderRadius.circular(UIConstants.smallBorderRadius),
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            borderRadius:
                BorderRadius.circular(UIConstants.smallBorderRadius),
            onTap: () => context.router.push(const SettingsRoute()),
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: UIConstants.spacing24,
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Icon(
                    Icons.settings_outlined,
                    size: 16,
                    color: AppColors.zinc950,
                  ),
                  const SizedBox(width: UIConstants.spacing8),
                  Text(
                    'Go to Settings',
                    style: GoogleFonts.inter(
                      fontSize: 14,
                      fontWeight: FontWeight.w600,
                      color: AppColors.zinc950,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}