import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { MatchDetailData } from "@/types/api";
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native";

interface CricketMatchInfoCardProps {
  data: MatchDetailData;
  isDark: boolean;
}

export function CricketMatchInfoCard({
  data,
  isDark,
}: CricketMatchInfoCardProps) {
  const { t } = useTranslation();
  const { match } = data;

  const infoItems = [
    {
      icon: "business" as const,
      label: t("detail.info_card.stadium"), // "名称" (Name) in screenshot
      value: match.eventStadium,
    },
    {
      icon: "location-sharp" as const,
      label: t("detail.info_card.country"), // "地点" (Location) in screenshot - using country/city if available
      value: match.countryName || match.leagueName, // JSON has empty countryName in example, maybe leagueName or city? Example "Windhoek" is a city. API usually has `eventCity`? `Untitled-1` doesn't show city. Use what we have.
    },
    // Capacity missing in JSON, skipping.
    {
      icon: "calendar-outline" as const,
      label: t("detail.info_card.date"),
      value: match.eventDateStart || match.eventDate,
    },
    {
      icon: "information-circle-outline" as const,
      label: t("detail.info_card.toss"),
      value: match.eventToss,
    },
  ].filter((item) => item.value && item.value.trim() !== "");

  if (infoItems.length === 0) return null;

  return (
    <ThemedView
      style={[
        styles.container,
        { backgroundColor: isDark ? "#1E1E20" : "#FFF" },
      ]}
    >
      <ThemedText style={[styles.title, { color: isDark ? "#CCC" : "#666" }]}>
        {t("detail.info_card.title")}
      </ThemedText>

      <View style={styles.content}>
        {infoItems.map((item, index) => (
          <View key={index} style={styles.row}>
            <View style={styles.leftContainer}>
              <IconSymbol
                name={item.icon}
                size={20}
                color={isDark ? "#888" : "#999"}
              />
              <ThemedText style={styles.label}>{item.label}</ThemedText>
            </View>
            <ThemedText style={styles.value} numberOfLines={2}>
              {item.value}
            </ThemedText>
          </View>
        ))}
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    marginBottom: 32, // bottom spacer
    borderRadius: 12,
    padding: 16,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: {
    fontSize: 14,
    fontWeight: "bold",
    marginBottom: 20,
  },
  content: {
    gap: 20,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  leftContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  label: {
    color: "#888",
    fontSize: 14,
    width: 60, // Fixed width for alignment like in screenshot
  },
  value: {
    fontSize: 14,
    fontWeight: "500",
    flex: 1,
    textAlign: "right",
  },
});