import 'package:flutter/material.dart';

import '../tema/pluriwave_theme.dart';
import 'pluri_glass_surface.dart';
import 'pluri_icon.dart';

class PluriNavItem {
  const PluriNavItem({required this.glyph, required this.label});

  final PluriIconGlyph glyph;
  final String label;
}

class PluriBottomNavigation extends StatelessWidget {
  const PluriBottomNavigation({
    super.key,
    required this.items,
    required this.selectedIndex,
    required this.onSelected,
  });

  final List<PluriNavItem> items;
  final int selectedIndex;
  final ValueChanged<int> onSelected;

  @override
  Widget build(BuildContext context) {
    final t = context.pluriTokens;
    return PluriGlassSurface(
      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 7),
      borderRadius: BorderRadius.circular(999),
      glowColor: t.glowColor.withValues(alpha: 0.28),
      child: Row(
        children: [
          for (var i = 0; i < items.length; i++)
            Expanded(
              flex: i == selectedIndex ? 15 : 10,
              child: _PluriNavButton(
                item: items[i],
                selected: i == selectedIndex,
                onTap: () => onSelected(i),
              ),
            ),
        ],
      ),
    );
  }
}

class _PluriNavButton extends StatelessWidget {
  const _PluriNavButton({
    required this.item,
    required this.selected,
    required this.onTap,
  });

  final PluriNavItem item;
  final bool selected;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final t = context.pluriTokens;
    final foreground = Theme.of(context).colorScheme.onSurface;
    return Semantics(
      button: true,
      selected: selected,
      label: item.label,
      child: AnimatedContainer(
        duration: context.pluriMotion.normal,
        curve: Curves.easeOutCubic,
        margin: EdgeInsets.symmetric(horizontal: selected ? 3 : 2),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(999),
          gradient: selected
              ? LinearGradient(
                  colors: [
                    t.electricMagenta.withValues(alpha: 0.32),
                    t.warmCoral.withValues(alpha: 0.18),
                  ],
                )
              : null,
          border: Border.all(
            color: selected
                ? Colors.white.withValues(alpha: 0.22)
                : Colors.white.withValues(alpha: 0.06),
          ),
          boxShadow: selected
              ? [
                  BoxShadow(
                    color: t.glowColor.withValues(alpha: 0.36),
                    blurRadius: 24,
                    spreadRadius: -6,
                    offset: const Offset(0, 8),
                  ),
                ]
              : const [],
        ),
        child: InkWell(
          borderRadius: BorderRadius.circular(999),
          onTap: onTap,
          child: Padding(
            padding: EdgeInsets.symmetric(
              horizontal: selected ? 8 : 3,
              vertical: selected ? 8 : 7,
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                AnimatedScale(
                  scale: selected ? 1.16 : 0.96,
                  duration: context.pluriMotion.quick,
                  curve: Curves.easeOutBack,
                  child: PluriIcon(
                    glyph: item.glyph,
                    variant: selected
                        ? PluriIconVariant.activeGlow
                        : PluriIconVariant.filled,
                    size: selected ? 42 : 34,
                  ),
                ),
                AnimatedSize(
                  duration: context.pluriMotion.quick,
                  curve: Curves.easeOutCubic,
                  child: selected
                      ? Padding(
                          padding: const EdgeInsets.only(top: 2),
                          child: Text(
                            item.label,
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis,
                            style: Theme.of(context).textTheme.labelSmall?.copyWith(
                                  color: foreground,
                                  fontWeight: FontWeight.w900,
                                  letterSpacing: -0.2,
                                ),
                          ),
                        )
                      : const SizedBox.shrink(),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}