import React, { FC } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import lineColorList from "@/assets/originData/lineColorList";
import { lightColors, useThemeColors } from "@/lib/theme";

type Props = {
  item: any[];   // StationProps[] （路線をまたぐ同名駅の配列）
  width: number;
  height: number;
  onPress?: () => void;
};

/**
 * グリッド表示専用の軽量駅カード。
 * Sign コンポーネントを使わず、駅番号・駅名をシンプルに描画するだけで
 * hooks・Lottie・前後駅計算などを一切持たない純粋な表示コンポーネント。
 */
export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPress }) => {
  const { fixed } = useThemeColors();
  const station = item[0];
  const isSpot = !!station.isSpot;
  const lineId = isSpot ? "" : (station.StationNumber?.slice(0, 1) ?? "Y");
  const lineNum = isSpot ? "" : (station.StationNumber?.slice(1) ?? "");
  const lineColor = lineColorList[lineId] ?? fixed.primary;
  const rawName = station.Station_JP ?? "";
  const displayName = rawName.startsWith(".") ? rawName.slice(1) : rawName;
  const nameLen = displayName.length;
  const nameFontSize = nameLen <= 3 ? 22 : nameLen <= 5 ? 16 : 12;

  return (
    <TouchableOpacity
      onPress={onPress}
      activeOpacity={0.85}
      style={{
        width,
        height,
        borderColor: fixed.primary,
        borderWidth: 1,
        backgroundColor: lightColors.background,
        overflow: "hidden",
      }}
    >
      {/* 駅番号バッジ */}
      <View
        style={{
          position: "absolute",
          top: "8%",
          right: "8%",
          width: height * 0.28,
          height: height * 0.28,
          borderRadius: height * 0.14,
          borderColor: lineColor,
          borderWidth: 2,
          backgroundColor: lightColors.background,
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Text
          style={{
            fontSize: height * 0.1,
            fontWeight: "bold",
            color: lightColors.text,
            textAlign: "center",
            lineHeight: height * 0.12,
          }}
          numberOfLines={2}
          adjustsFontSizeToFit
        >
          {lineId + "\n" + lineNum}
        </Text>
      </View>

      {/* 駅名（日本語・英語） */}
      <View
        style={{
          position: "absolute",
          top: "10%",
          left: 0,
          right: 0,
          bottom: "28%",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <Text
          style={{
            fontSize: nameFontSize,
            fontWeight: "bold",
            color: lightColors.textStationName,
            textAlign: "center",
          }}
          adjustsFontSizeToFit
          numberOfLines={1}
        >
          {displayName}
        </Text>
        <Text
          style={{
            fontSize: 8,
            color: lightColors.textStationName,
            textAlign: "center",
            marginTop: 2,
          }}
          numberOfLines={1}
          adjustsFontSizeToFit
        >
          {station.Station_EN}
        </Text>
      </View>

      {/* 下帯 */}
      <View
        style={{
          position: "absolute",
          bottom: 0,
          left: 0,
          right: 0,
          height: "26%",
          backgroundColor: fixed.primary,
        }}
      />
    </TouchableOpacity>
  );
});