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

@RoutePage()
class SettingsPage extends ConsumerWidget {
  const SettingsPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final modelState = ref.watch(aiModelSettingsControllerProvider);
    final controller =
        ref.read(aiModelSettingsControllerProvider.notifier);

    return Scaffold(
      backgroundColor: AppColors.surface,
      body: Column(
        children: [
          // ── Top bar ──────────────────────────────────────────────────────
          _TopBar(onBack: () => context.router.maybePop()),

          // ── Scrollable content ──────────────────────────────────────────
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(UIConstants.pagePadding),
              child: Center(
                child: ConstrainedBox(
                  constraints: const BoxConstraints(maxWidth: 680),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Page title
                      Text(
                        'Settings',
                        style: GoogleFonts.inter(
                          fontSize: 22,
                          fontWeight: FontWeight.w700,
                          color: AppColors.textPrimary,
                          letterSpacing: -0.3,
                        ),
                      ),
                      const SizedBox(height: UIConstants.spacing32),

                      // AI Models section
                      _AiModelsSection(
                        modelState: modelState,
                        onDownload: controller.downloadAll,
                        onValidate: controller.validateModels,
                      ),

                      const SizedBox(height: UIConstants.spacing32),

                      // Knowledge Base section
                      _KnowledgeBaseSection(
                        onTap: () => context.router
                            .push(const KnowledgeBaseRoute()),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// =============================================================================
// Top bar
// =============================================================================
class _TopBar extends StatelessWidget {
  const _TopBar({required this.onBack});

  final VoidCallback onBack;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 52,
      padding: const EdgeInsets.symmetric(horizontal: UIConstants.spacing16),
      decoration: const BoxDecoration(
        color: AppColors.surfaceContainer,
        border: Border(bottom: BorderSide(color: AppColors.border)),
      ),
      child: Row(
        children: [
          _IconBtn(
            icon: Icons.arrow_back_rounded,
            tooltip: 'Go back',
            onTap: onBack,
          ),
          const SizedBox(width: UIConstants.spacing12),
          Text(
            'Settings',
            style: GoogleFonts.inter(
              fontSize: 14,
              fontWeight: FontWeight.w600,
              color: AppColors.textPrimary,
            ),
          ),
        ],
      ),
    );
  }
}

// =============================================================================
// AI Models section
// =============================================================================
class _AiModelsSection extends StatelessWidget {
  const _AiModelsSection({
    required this.modelState,
    required this.onDownload,
    required this.onValidate,
  });

  final AiModelSettingsState modelState;
  final VoidCallback onDownload;
  final VoidCallback onValidate;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Section heading
        Text(
          'AI Models',
          style: GoogleFonts.inter(
            fontSize: 13,
            fontWeight: FontWeight.w600,
            color: AppColors.textMuted,
            letterSpacing: 0.8,
          ),
        ),
        const SizedBox(height: UIConstants.spacing12),

        // Card
        Container(
          decoration: BoxDecoration(
            color: AppColors.surfaceContainer,
            borderRadius: BorderRadius.circular(UIConstants.borderRadius),
            border: Border.all(color: AppColors.border),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Status rows
              const _ModelRow(
                name: 'llama-server binary',
                description: 'llama.cpp inference server (build b8130)',
                icon: Icons.terminal_rounded,
              ),
              const Divider(height: 1, color: AppColors.border),
              const _ModelRow(
                name: 'Nomic Embed v1.5 Q4_K_M',
                description: 'Text embedding model (~300 MB)',
                icon: Icons.hub_outlined,
              ),
              const Divider(height: 1, color: AppColors.border),
              const _ModelRow(
                name: 'Qwen 2.5 7B Instruct Q4_K_M',
                description: 'Chat / reasoning model (~4.7 GB)',
                icon: Icons.psychology_outlined,
              ),

              // Divider before status / actions
              const Divider(height: 1, color: AppColors.border),

              Padding(
                padding: const EdgeInsets.all(UIConstants.spacing16),
                child: _StatusAndActions(
                  modelState: modelState,
                  onDownload: onDownload,
                  onValidate: onValidate,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

// =============================================================================
// Single model info row
// =============================================================================
class _ModelRow extends StatelessWidget {
  const _ModelRow({
    required this.name,
    required this.description,
    required this.icon,
  });

  final String name;
  final String description;
  final IconData icon;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: UIConstants.spacing16,
        vertical: UIConstants.spacing12,
      ),
      child: Row(
        children: [
          Container(
            width: 36,
            height: 36,
            decoration: BoxDecoration(
              color: AppColors.surfaceContainerHigh,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Icon(icon, size: 16, color: AppColors.textSecondary),
          ),
          const SizedBox(width: UIConstants.spacing12),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  name,
                  style: GoogleFonts.inter(
                    fontSize: 13,
                    fontWeight: FontWeight.w500,
                    color: AppColors.textPrimary,
                  ),
                ),
                const SizedBox(height: 2),
                Text(
                  description,
                  style: GoogleFonts.inter(
                    fontSize: 12,
                    color: AppColors.textMuted,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// =============================================================================
// Status badge + action buttons
// =============================================================================
class _StatusAndActions extends StatelessWidget {
  const _StatusAndActions({
    required this.modelState,
    required this.onDownload,
    required this.onValidate,
  });

  final AiModelSettingsState modelState;
  final VoidCallback onDownload;
  final VoidCallback onValidate;

  @override
  Widget build(BuildContext context) {
    // While downloading, show progress UI
    if (modelState.isDownloading) {
      return _DownloadingView(modelState: modelState);
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // Status badge
        _StatusBadge(validated: modelState.areModelsValidated),

        if (modelState.errorMessage != null) ...[
          const SizedBox(height: UIConstants.spacing12),
          _ErrorRow(message: modelState.errorMessage!),
        ],

        const SizedBox(height: UIConstants.spacing16),

        // Action buttons
        if (!modelState.areModelsValidated)
          _ActionButton(
            label: 'Download AI Models (~5 GB)',
            icon: Icons.download_rounded,
            color: AppColors.accent,
            textColor: AppColors.zinc950,
            onPressed: onDownload,
          )
        else
          _ActionButton(
            label: 'Re-validate Files',
            icon: Icons.verified_outlined,
            color: Colors.transparent,
            textColor: AppColors.textSecondary,
            borderColor: AppColors.border,
            onPressed: onValidate,
          ),
      ],
    );
  }
}

class _StatusBadge extends StatelessWidget {
  const _StatusBadge({required this.validated});

  final bool validated;

  @override
  Widget build(BuildContext context) {
    final color = validated ? AppColors.success : AppColors.textMuted;
    final bgColor =
        validated ? AppColors.successMuted : AppColors.surfaceContainerHigh;
    final label = validated ? 'Ready' : 'Missing';
    final icon =
        validated ? Icons.check_circle_outline : Icons.radio_button_unchecked;

    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          'Status: ',
          style: GoogleFonts.inter(
            fontSize: 13,
            color: AppColors.textSecondary,
          ),
        ),
        const SizedBox(width: UIConstants.spacing4),
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
          decoration: BoxDecoration(
            color: bgColor,
            borderRadius: BorderRadius.circular(20),
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(icon, size: 13, color: color),
              const SizedBox(width: 5),
              Text(
                label,
                style: GoogleFonts.inter(
                  fontSize: 12,
                  fontWeight: FontWeight.w600,
                  color: color,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

class _DownloadingView extends StatelessWidget {
  const _DownloadingView({required this.modelState});

  final AiModelSettingsState modelState;

  @override
  Widget build(BuildContext context) {
    final pct = (modelState.progress * 100).toStringAsFixed(1);

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: Text(
                modelState.currentTask,
                style: GoogleFonts.inter(
                  fontSize: 13,
                  color: AppColors.textSecondary,
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Text(
              '$pct %',
              style: GoogleFonts.inter(
                fontSize: 13,
                fontWeight: FontWeight.w600,
                color: AppColors.accent,
              ),
            ),
          ],
        ),
        const SizedBox(height: UIConstants.spacing8),
        ClipRRect(
          borderRadius: BorderRadius.circular(4),
          child: LinearProgressIndicator(
            value: modelState.progress,
            minHeight: 6,
            backgroundColor: AppColors.zinc800,
            valueColor:
                const AlwaysStoppedAnimation<Color>(AppColors.accent),
          ),
        ),
        if (modelState.errorMessage != null) ...[
          const SizedBox(height: UIConstants.spacing12),
          _ErrorRow(message: modelState.errorMessage!),
        ],
      ],
    );
  }
}

class _ErrorRow extends StatelessWidget {
  const _ErrorRow({required this.message});

  final String message;

  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const Icon(
          Icons.error_outline_rounded,
          color: AppColors.destructive,
          size: 14,
        ),
        const SizedBox(width: UIConstants.spacing8),
        Expanded(
          child: Text(
            message,
            style: GoogleFonts.inter(
              fontSize: 12,
              color: AppColors.destructive,
              height: 1.4,
            ),
          ),
        ),
      ],
    );
  }
}

class _ActionButton extends StatefulWidget {
  const _ActionButton({
    required this.label,
    required this.icon,
    required this.color,
    required this.textColor,
    required this.onPressed,
    this.borderColor,
  });

  final String label;
  final IconData icon;
  final Color color;
  final Color textColor;
  final Color? borderColor;
  final VoidCallback onPressed;

  @override
  State<_ActionButton> createState() => _ActionButtonState();
}

class _ActionButtonState extends State<_ActionButton> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    final hasBorder = widget.borderColor != null;

    return MouseRegion(
      onEnter: (_) => setState(() => _hovered = true),
      onExit: (_) => setState(() => _hovered = false),
      child: AnimatedContainer(
        duration: UIConstants.animationDuration,
        height: 40,
        decoration: BoxDecoration(
          color: hasBorder
              ? (_hovered ? AppColors.zinc800 : Colors.transparent)
              : (_hovered
                  ? widget.color.withValues(alpha: 0.85)
                  : widget.color),
          borderRadius: BorderRadius.circular(UIConstants.smallBorderRadius),
          border: hasBorder
              ? Border.all(color: widget.borderColor!)
              : null,
        ),
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            borderRadius:
                BorderRadius.circular(UIConstants.smallBorderRadius),
            onTap: widget.onPressed,
            child: Padding(
              padding: const EdgeInsets.symmetric(
                horizontal: UIConstants.spacing16,
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(widget.icon, size: 16, color: widget.textColor),
                  const SizedBox(width: UIConstants.spacing8),
                  Text(
                    widget.label,
                    style: GoogleFonts.inter(
                      fontSize: 13,
                      fontWeight: FontWeight.w600,
                      color: widget.textColor,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// =============================================================================
// Generic icon button
// =============================================================================
class _IconBtn extends StatefulWidget {
  const _IconBtn({
    required this.icon,
    required this.onTap,
    this.tooltip = '',
  });

  final IconData icon;
  final VoidCallback onTap;
  final String tooltip;

  @override
  State<_IconBtn> createState() => _IconBtnState();
}

class _IconBtnState extends State<_IconBtn> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    return Tooltip(
      message: widget.tooltip,
      child: MouseRegion(
        onEnter: (_) => setState(() => _hovered = true),
        onExit: (_) => setState(() => _hovered = false),
        child: GestureDetector(
          onTap: widget.onTap,
          child: AnimatedContainer(
            duration: UIConstants.animationDuration,
            width: 32,
            height: 32,
            decoration: BoxDecoration(
              color: _hovered ? AppColors.zinc800 : Colors.transparent,
              borderRadius: BorderRadius.circular(6),
            ),
            child: Icon(
              widget.icon,
              size: 18,
              color:
                  _hovered ? AppColors.textPrimary : AppColors.textSecondary,
            ),
          ),
        ),
      ),
    );
  }
}

// =============================================================================
// Knowledge Base navigation section
// =============================================================================
class _KnowledgeBaseSection extends StatelessWidget {
  const _KnowledgeBaseSection({required this.onTap});

  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Knowledge Base',
          style: GoogleFonts.inter(
            fontSize: 13,
            fontWeight: FontWeight.w600,
            color: AppColors.textMuted,
            letterSpacing: 0.8,
          ),
        ),
        const SizedBox(height: UIConstants.spacing12),
        _KnowledgeBaseCard(onTap: onTap),
      ],
    );
  }
}

class _KnowledgeBaseCard extends StatefulWidget {
  const _KnowledgeBaseCard({required this.onTap});

  final VoidCallback onTap;

  @override
  State<_KnowledgeBaseCard> createState() => _KnowledgeBaseCardState();
}

class _KnowledgeBaseCardState extends State<_KnowledgeBaseCard> {
  bool _hovered = false;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => setState(() => _hovered = true),
      onExit: (_) => setState(() => _hovered = false),
      child: GestureDetector(
        onTap: widget.onTap,
        child: AnimatedContainer(
          duration: UIConstants.animationDuration,
          decoration: BoxDecoration(
            color: _hovered
                ? AppColors.surfaceContainerHigh
                : AppColors.surfaceContainer,
            borderRadius: BorderRadius.circular(UIConstants.borderRadius),
            border: Border.all(
              color: _hovered
                  ? AppColors.accent.withValues(alpha: 0.3)
                  : AppColors.border,
            ),
          ),
          padding: const EdgeInsets.symmetric(
            horizontal: UIConstants.spacing16,
            vertical: UIConstants.spacing16,
          ),
          child: Row(
            children: [
              Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                  color: AppColors.accentMuted,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: const Icon(
                  Icons.hub_outlined,
                  color: AppColors.accent,
                  size: 20,
                ),
              ),
              const SizedBox(width: UIConstants.spacing16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Manage Knowledge Base',
                      style: GoogleFonts.inter(
                        fontSize: 14,
                        fontWeight: FontWeight.w500,
                        color: AppColors.textPrimary,
                      ),
                    ),
                    const SizedBox(height: 3),
                    Text(
                      'Add trainer notes to give the AI context-aware answers.',
                      style: GoogleFonts.inter(
                        fontSize: 12,
                        color: AppColors.textMuted,
                      ),
                    ),
                  ],
                ),
              ),
              Icon(
                Icons.chevron_right_rounded,
                color:
                    _hovered ? AppColors.accent : AppColors.textMuted,
                size: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}