import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';

import '../../core/theme/app_colors.dart';

/// 图标组件，对应 uni-app 版页面里的 `<text class="iconfont icon-xxx">`。
///
/// **为什么是混合方案**：源工程只提供了 8 个真实字形（`iconfont.ttf`），而页面里
/// 引用的 `icon-lightning` / `icon-location` / `icon-star` 等**在字体里并不存在**，
/// 源工程实际渲染为空白。为保证复刻后的界面可读可用，这里：
/// - 8 个真实字形继续用搬运过来的 `iconfont.ttf` 渲染，保持逐像素一致；
/// - 其余语义图标改用 SVG 路径绘制，线条风格与源设计语言保持一致。
class XIcon extends StatelessWidget {
  const XIcon(
    this.name, {
    super.key,
    this.size = 20,
    this.color = AppColors.textMuted,
  });

  final String name;
  final double size;
  final Color color;

  /// `iconfont.ttf` 中真实存在的字形 -> Unicode 码点（取自源 `iconfont.css`）。
  static const Map<String, int> glyphs = {
    'shandian': 0xe6a4,
    'tongzhi': 0xe60a,
    'qianbao': 0xe60b,
    'yaoqing': 0x100a5,
    'dingdan': 0xe62a,
    'weixin': 0xe665,
    'wode': 0xe607,
    'shouyi': 0x10186,
  };

  /// 语义图标的 SVG 路径（24×24 视图框，`currentColor` 会被替换成实际色值）。
  static const Map<String, String> paths = {
    'bolt': '<path d="M13 2L4.5 13.5H11l-2 8.5L19 10h-6.5z"/>',
    'location':
        '<path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7z"/><circle cx="12" cy="9" r="2.5"/>',
    'clock':
        '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
    'filter': '<path d="M4 5h16l-7 8v5l-2 1v-6z"/>',
    'map':
        '<path d="M9 4L3 7v13l6-3 6 3 6-3V4l-6 3z"/><path d="M9 4v13M15 7v13" stroke="currentColor" stroke-width="1.5" fill="none"/>',
    'refresh':
        '<path d="M20 11a8 8 0 1 0-1.5 5.6" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/><path d="M20 5v6h-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
    'check':
        '<path d="M4 12.5l5 5L20 6.5" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
    'forward':
        '<path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
    'back':
        '<path d="M15 5l-7 7 7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
    'arrow-down':
        '<path d="M6 9l6 6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
    'star': '<path d="M12 3l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.8 6.2 20.9l1.1-6.5L2.6 9.8l6.5-.9z"/>',
    'verified':
        '<path d="M12 2l2.5 2.5 3.5-.5 1 3.4 3 2-1 3.6 1 3.6-3 2-1 3.4-3.5-.5L12 22l-3.5-1-3.5.5-.5-3-3-2 1-4-.5-3H3l3-2 1-3.4 3.5.5z"/><path d="M8 12l3 3 5-6" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
    'notification':
        '<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zM18 16v-5.5c0-3.1-1.6-5.6-4.5-6.3V3.5a1.5 1.5 0 0 0-3 0v.7C7.6 4.9 6 7.4 6 10.5V16l-2 2v1h16v-1l-2-2z"/>',
    'share':
        '<path d="M18 16.1c-.8 0-1.5.3-2 .8l-7.1-4.1c.1-.3.1-.5.1-.8s0-.5-.1-.8l7-4.1c.5.5 1.3.8 2.1.8 1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3c0 .3 0 .5.1.8L8.1 9.8C7.6 9.3 6.9 9 6 9c-1.7 0-3 1.3-3 3s1.3 3 3 3c.9 0 1.6-.3 2.1-.8l7.1 4.1c-.1.2-.1.5-.1.7 0 1.6 1.3 3 3 3s3-1.3 3-3-1.4-2.9-3.1-2.9z"/>',
    'navigation':
        '<path d="M12 2l10 10-10 10L2 12z"/><path d="M12 8.6l3.4 3.4-3.4 3.4" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
    'call':
        '<path d="M6.6 3c.6 0 1.2.4 1.4 1l1 3c.2.5.1 1.1-.3 1.5L7 9.6c1 1.9 2.5 3.4 4.4 4.4l1.1-1.7c.4-.4 1-.5 1.5-.3l3 1c.6.2 1 .8 1 1.4V18c0 1-1 2-2 2C8 20 4 16 4 5c0-1 1-2 2-2z"/>',
    'add-photo':
        '<path d="M4 8h3l1.5-2h5L15 8h3a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2z"/><circle cx="10" cy="13.5" r="3"/><path d="M19 2v5M16.5 4.5h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
    'info':
        '<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2"/><path d="M12 11v6M12 7.4v.2" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
    'warning': '<path d="M12 3L2 20h20zM12 9v5M12 17.5v.1"/>',
    'wallet':
        '<rect x="3" y="6" width="18" height="13" rx="2.5"/><path d="M3 10.5h18" stroke="#ffffff" stroke-width="1.6" fill="none"/><circle cx="16.6" cy="14.4" r="1.3" fill="#ffffff"/>',
    'list':
        '<rect x="4" y="3" width="16" height="18" rx="2.5"/><path d="M8 8h8M8 12h8M8 16h5" stroke="#ffffff" stroke-width="1.8" stroke-linecap="round" fill="none"/>',
    'settings':
        '<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></g>',
    'trend-up':
        '<path d="M4 17l5-5 3 3 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M13 9h5v5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>',
    'close':
        '<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/>',
    'person': '<circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.5-6.5 8-6.5s8 2.5 8 6.5v1H4z"/>',
    'camera':
        '<rect x="3" y="6" width="18" height="14" rx="2"/><path d="M8 6l1.5-2h5L16 6"/><circle cx="12" cy="13" r="3.5"/>',
  };

  /// 源里两种命名风格混用（uni-app 的 `icon-xxx` 与 Material Symbols 名），
  /// 这里统一做别名收敛，调用方两种写法都能渲染。
  static const Map<String, String> _aliases = {
    'lightning': 'bolt',
    'time': 'clock',
    'cert': 'verified',
    'notify': 'notification',
    'arrow-right': 'forward',
    'order': 'list',
    'earnings': 'wallet',
    'chevron_left': 'back',
    'location_on': 'location',
    'directions': 'navigation',
    'add_a_photo': 'add-photo',
  };

  static final Map<String, String> _svgCache = {};

  static String _hex(Color color) =>
      '#${(color.toARGB32() & 0xFFFFFF).toRadixString(16).padLeft(6, '0')}';

  /// 归一化后的语义名：别名 -> 目标名。
  static String resolve(String name) => _aliases[name] ?? name;

  /// 生成 (图标, 颜色) 组合对应的 SVG 字符串，带缓存避免重复拼接。
  static String svgFor(String name, Color color) {
    final key = '$name|${color.toARGB32()}';
    return _svgCache.putIfAbsent(key, () {
      final body = (paths[resolve(name)] ?? paths['close']!).replaceAll(
        'currentColor',
        _hex(color),
      );
      return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" '
          'fill="${_hex(color)}">$body</svg>';
    });
  }

  @override
  Widget build(BuildContext context) {
    final glyph = glyphs[name];
    if (glyph != null) {
      // 源里的彩色字形：直接交给 iconfont.ttf 渲染，保留原字形配色。
      return SizedBox(
        width: size,
        height: size,
        child: Center(
          child: Text(
            String.fromCharCode(glyph),
            style: TextStyle(
              fontFamily: 'iconfont',
              fontSize: size,
              height: 1,
              color: color,
            ),
          ),
        ),
      );
    }

    return SizedBox(
      width: size,
      height: size,
      child: SvgPicture.string(
        svgFor(name, color),
        width: size,
        height: size,
        fit: BoxFit.contain,
      ),
    );
  }
}