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

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

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

  // Basic parsing for cricket scores from string "Score1 - Score2"
  const scores = match.eventFinalResult
    ? match.eventFinalResult.split("-")
    : [];
  const homeScore = scores[0]?.trim();
  const awayScore = scores[1]?.trim();

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

      <View style={styles.content}>
        {/* Home Team */}
        <View style={styles.teamRow}>
          <View style={styles.teamInfo}>
            <Image
              source={{ uri: match.homeTeamLogo }}
              style={styles.logo}
              resizeMode="contain"
            />
            <ThemedText style={styles.teamName}>
              {match.eventHomeTeam}
            </ThemedText>
          </View>
          {homeScore ? (
            <ThemedText style={styles.scoreText}>{homeScore}</ThemedText>
          ) : null}
        </View>

        <View style={styles.divider} />

        {/* Away Team */}
        <View style={styles.teamRow}>
          <View style={styles.teamInfo}>
            <Image
              source={{ uri: match.awayTeamLogo }}
              style={styles.logo}
              resizeMode="contain"
            />
            <ThemedText style={styles.teamName}>
              {match.eventAwayTeam}
            </ThemedText>
          </View>
          {awayScore ? (
            <ThemedText style={styles.scoreText}>{awayScore}</ThemedText>
          ) : null}
        </View>
      </View>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    borderRadius: 12,
    padding: 16,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  title: {
    fontSize: 14,
    fontWeight: "bold",
    marginBottom: 16,
  },
  content: {
    gap: 12,
  },
  teamRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingVertical: 8,
  },
  teamInfo: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
  },
  logo: {
    width: 32,
    height: 32,
    marginRight: 12,
  },
  teamName: {
    fontSize: 16,
    fontWeight: "500",
    flexShrink: 1,
  },
  scoreText: {
    fontSize: 16,
    color: "#2196F3",
    fontWeight: "bold",
    marginLeft: 8,
  },
  divider: {
    height: 1,
    backgroundColor: "#F0F0F0",
    marginLeft: 44, // Align with text
  },
});