import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useMemo } from "react";
import img from "../../config/images";
import { ListCardProps } from "../../../types/list/types";
import { formatGameTime, calculateDuration } from "@/utils/timeUtils";
import { navigateTo } from "@/utils/navigation";
import images from '@/config/images'
import "./index.scss";

const ListCard: React.FC<ListCardProps> = ({
  id,
  title,
  original_start_time,
  start_time,
  end_time,
  location,
  distance_km,
  current_players,
  max_players,
  skill_level_min,
  skill_level_max,
  play_type,
  image_list = [],
  court_type,
  key,
  participants, // 参与者图片
  venue_image_list, // 场馆图片
  venue_description,
  game_type, // 球局类型
}) => {
  // 参与者要前三个数据
  const participantsImageList = participants?.slice(0, 3) || [];
  // 场地 要第一个数据
  // const venueImageList = venue_image_list?.slice(0, 1) || [];
  const venueImage = venue_image_list?.[0]?.url || "";

  // 是否显示畅打球局
  const isShowSmoothPlayingGame = game_type === "畅打球局";

  const renderItemImage = (src: string) => {
    return (
      <Image
        src={src}
        className="image"
        mode="aspectFill"
        lazyLoad
        defaultSource="https://images.unsplash.com/photo-1554068865-24cecd4e34b8?w=200&h=200&fit=crop&crop=center"
      />
    );
  };

  const handleViewDetail = () => {
    navigateTo({
      url: `/game_pages/detail/index?id=${id}&from=list`,
    });
  };

  // 处理地点截断，确保固定信息始终显示
  const displayLocation = useMemo(() => {
    if (!location) return null; // 直接返回 null，不渲染

    // 获取屏幕宽度，用于计算实际容器宽度
    const systemInfo = Taro.getSystemInfoSync();
    const screenWidth = systemInfo.windowWidth || 375;
    // 容器宽度 = 屏幕宽度 - 左右 padding - 图片区域宽度
    const containerWidthPx = screenWidth - 130;

    // 计算固定信息宽度
    const extraInfo = `${court_type ? `・${court_type}` : ''}${distance_km ? `・${distance_km}km` : ''}`;

    // 估算字符宽度（基于 12px 字体）
    const getTextWidth = (text: string) => {
      let width = 0;
      for (let char of text) {
        if (/[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char)) {
          width += 12; // 中文字符 12px
        } else {
          width += 6; // 英文字符和数字 6px
        }
      }
      return width;
    };

    const extraWidth = getTextWidth(extraInfo);
    const locationWidth = getTextWidth(location);

    // 可用宽度 = 容器宽度 - 固定信息宽度 - 省略号宽度（18px）
    const availableWidth = containerWidthPx - extraWidth - 18;

    // 如果地点宽度小于可用宽度，不需要截断
    if (locationWidth <= availableWidth) {
      return location;
    }

    // 需要截断地点
    let maxChars = 0;
    let currentWidth = 0;
    for (let i = 0; i < location.length; i++) {
      const char = location[i];
      const charWidth = /[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char) ? 12 : 6;
      if (currentWidth + charWidth > availableWidth) {
        break;
      }
      currentWidth += charWidth;
      maxChars++;
    }

    return location.slice(0, maxChars) + '...';
  }, [location, court_type, distance_km]);

  // 根据图片数量决定展示样式
  const renderImages = () => {
    if (image_list?.length === 0) return null;

    if (image_list?.length === 1) {
      return (
        <View className="single-image">
          <View className="image-container">
            {renderItemImage(image_list?.[0])}
          </View>
        </View>
      );
    }

    if (image_list?.length === 2) {
      return (
        <View className="double-image">
          <View className="image-container">
            {renderItemImage(image_list?.[0])}
          </View>
          <View className="image-container">
            {renderItemImage(image_list?.[1])}
          </View>
        </View>
      );
    }

    // 3张或更多图片
    return (
      <View className="triple-image">
        <View className="image-container">
          {renderItemImage(image_list?.[0])}
        </View>
        <View className="image-container">
          {renderItemImage(image_list?.[1])}
        </View>
        <View className="image-container">
          {renderItemImage(image_list?.[2])}
        </View>
      </View>
    );
  };
  return (
    <View className="listCard" key={key}>
      <View className="listItem" onClick={handleViewDetail}>
        {/* 左侧内容区域 */}
        <View className="content">
          {/* 标题 */}
          {title && (
            <View className="titleWrapper">
              <Text className="title">{title}</Text>
              <Image
                src={img.ICON_LIST_RIGHT_ARROW}
                className="title-right-arrow"
                mode="aspectFit"
              />
            </View>
          )}

          {/* 时间信息 */}
          <View className="date-time">
            <Text>{formatGameTime(original_start_time || start_time)}</Text>
            {/* 时长 如 2小时 */}
            {end_time && (
              <Text>
                {" "}
                {calculateDuration(original_start_time || start_time, end_time)}
              </Text>
            )}
          </View>

          {/* 地点,室内外,距离 */}

          <View className="location">
            {displayLocation && (
              <Text className="location-text location-position">
                {displayLocation}
              </Text>
            )}
            <Text className="location-text location-time-distance">
              {court_type && `・${court_type}`}
              {distance_km && `・${distance_km}km`}
            </Text>
          </View>

          {/* 底部信息行：头像组、报名人数、技能等级、比赛类型 */}
          <View className="bottom-info">
            {participantsImageList && participantsImageList.length > 0 && (
              <View className="left-section">
                <View className="avatar-group">
                  {participantsImageList.map((item, index) => (
                    <View key={index} className="avatar">
                      <Image
                        className="avatar-image"
                        src={item?.user?.avatar_url}
                        mode="aspectFill"
                      />
                    </View>
                  ))}
                </View>
              </View>
            )}

            <View className="tags">
              <View className="tag">
                <Text className="tag-text">
                  已加入 {current_players}/
                  <Text className="tag-text-max">{max_players}</Text>
                </Text>
              </View>
              <View className="tag ntprTag">
                <Image src={images.ICON_LIST_NTPR} className='ntprIcon' />
                <Text className="tag-text">
                  {Number(skill_level_min)?.toFixed(1)} - {Number(skill_level_max)?.toFixed(1)}
                </Text>
                {/* 分割线 */}
                <View className="typeLine" />
                <Text className="tag-text">{play_type}</Text>
              </View>
              {/* {play_type && (
                <View className="tag">
                  <Text className="tag-text">{play_type}</Text>
                </View>
              )} */}
            </View>
          </View>
        </View>

        {/* 右侧图片区域 */}
        <View className="image-section">{renderImages()}</View>
      </View>
      {/* 畅打球局 */}
      {isShowSmoothPlayingGame && (
        <View className="smoothPlayingGame">
          <View className="smoothWrapper">
            <Image
              className="iconListPlayingGame"
              src={require("@/static/list/changdaqiuju.png")}
              mode="widthFix"
            />
            {/* <Text className="smoothTitle">{game_type}</Text> */}
          </View>
          {
            venue_description && (<View className="line" />)
          }
          {
            venue_description &&
            (

              <View className="localAreaContainer">
                <View className="localAreaTitle">场馆方:</View>
                <View className="localAreaWrapper">
                  <Image className="localArea" src={venueImage} />
                  <Text className="localAreaText">{venue_description}</Text>
                </View>
              </View>
            )
          }
        </View>
      )}
    </View>
  );
};

export default ListCard;