import 'package:lucide_icons_flutter/lucide_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../core/theme/context_tokens.dart';
import '../core/theme/theme_controller.dart';

/// 顶栏主题选择器 pill（原型 .theme-pill）：衬衫图标 + 当前主题名 + ▾。
/// 点开 A/B/C 菜单切换主题（持久化），从「系统设置」迁来的入口。
/// [onSurface]：浅色变体（surface/border/muted），供登录注册等白底卡片使用
/// （默认深色顶栏配色 topControl/topBorder/topFg）。
class ThemePickerPill extends ConsumerWidget {
  final bool onSurface;
  const ThemePickerPill({super.key, this.onSurface = false});

  // 主题键 → 中文名（与原型 shell.js THEMES 一致）。
  static const _names = {'a': '经典蓝', 'b': '琥珀', 'c': '酒窖'};

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final t = context.tokens;
    final key = ref.watch(themeControllerProvider);
    final name = _names[key] ?? '经典蓝';

    return PopupMenuButton<String>(
      tooltip: '切换主题',
      offset: const Offset(0, 38),
      position: PopupMenuPosition.under,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
      color: t.surface,
      elevation: 8,
      onSelected: (v) => ref.read(themeControllerProvider.notifier).set(v),
      itemBuilder: (_) => _names.entries.map((e) {
        final sel = e.key == key;
        return PopupMenuItem<String>(
          value: e.key,
          height: 40,
          child: Row(
            children: [
              SizedBox(
                width: 18,
                child: sel
                    ? Icon(LucideIcons.check, size: 16, color: t.primary)
                    : null,
              ),
              const SizedBox(width: 4),
              Text(
                '${e.key.toUpperCase()} · ${e.value}',
                style: TextStyle(
                  fontSize: 13,
                  color: sel ? t.primary : t.text,
                  fontWeight: sel ? FontWeight.w600 : FontWeight.w400,
                ),
              ),
            ],
          ),
        );
      }).toList(),
      child: Container(
        height: 30,
        padding: const EdgeInsets.symmetric(horizontal: 11),
        decoration: BoxDecoration(
          color: onSurface ? t.surface : t.topControl,
          border: Border.all(color: onSurface ? t.border : t.topBorder),
          borderRadius: BorderRadius.circular(999),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(LucideIcons.shirt,
                size: 15, color: onSurface ? t.muted : t.sideFg),
            const SizedBox(width: 7),
            Text(name,
                style: TextStyle(
                    fontSize: 12, color: onSurface ? t.text : t.topFg)),
            const SizedBox(width: 7),
            Icon(LucideIcons.chevronDown,
                size: 14, color: onSurface ? t.muted : t.topFg),
          ],
        ),
      ),
    );
  }
}