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

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

export function LineupsCard({ data, isDark }: LineupsCardProps) {
  const { t } = useTranslation();
  const { match } = data;
  const bgColor = isDark ? "#1C1C1E" : "#FFF";
  const borderColor = isDark ? "#2C2C2E" : "#EEE";

  const players = (match as any).players || null;

  if (!players || (!players.home_team && !players.away_team)) {
    return null;
  }

  const hasLineups = 
    (players.home_team && Array.isArray(players.home_team) && players.home_team.length > 0) ||
    (players.away_team && Array.isArray(players.away_team) && players.away_team.length > 0);

  if (!hasLineups) {
    return null;
  }

  return (
    <View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
      <ThemedText style={styles.title}>
        {t("detail.events.lineups")}
      </ThemedText>
      <View style={styles.content}>
        {players.home_team && Array.isArray(players.home_team) && players.home_team.length > 0 && (
          <View style={styles.teamLineup}>
            <ThemedText style={styles.teamName}>
              {match.eventHomeTeam}
            </ThemedText>
            {players.home_team.slice(0, 11).map((player: Player, idx: number) => (
              <View key={idx} style={styles.playerRow}>
                <ThemedText style={styles.playerNumber}>
                  {player.player_number || player.number || idx + 1}
                </ThemedText>
                <ThemedText style={styles.playerName} numberOfLines={1}>
                  {player.player_name || player.player || player.name || ""}
                </ThemedText>
                {player.position && (
                  <ThemedText style={styles.playerPosition}>
                    {player.position}
                  </ThemedText>
                )}
              </View>
            ))}
          </View>
        )}
        {players.away_team && Array.isArray(players.away_team) && players.away_team.length > 0 && (
          <View style={[styles.teamLineup, { marginTop: 16 }]}>
            <ThemedText style={styles.teamName}>
              {match.eventAwayTeam}
            </ThemedText>
            {players.away_team.slice(0, 11).map((player: Player, idx: number) => (
              <View key={idx} style={styles.playerRow}>
                <ThemedText style={styles.playerNumber}>
                  {player.player_number || player.number || idx + 1}
                </ThemedText>
                <ThemedText style={styles.playerName} numberOfLines={1}>
                  {player.player_name || player.player || player.name || ""}
                </ThemedText>
                {player.position && (
                  <ThemedText style={styles.playerPosition}>
                    {player.position}
                  </ThemedText>
                )}
              </View>
            ))}
          </View>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    marginTop: 0,
    borderRadius: 12,
    padding: 16,
    borderWidth: 1,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  title: {
    fontSize: 14,
    fontWeight: "600",
    marginBottom: 12,
    opacity: 0.7,
  },
  content: {
    gap: 0,
  },
  teamLineup: {
    marginTop: 8,
  },
  teamName: {
    fontSize: 13,
    fontWeight: "600",
    marginBottom: 8,
    opacity: 0.8,
  },
  playerRow: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 4,
    gap: 8,
  },
  playerNumber: {
    fontSize: 12,
    fontWeight: "600",
    width: 24,
    textAlign: "center",
    opacity: 0.6,
  },
  playerName: {
    fontSize: 13,
    fontWeight: "500",
    flex: 1,
  },
  playerPosition: {
    fontSize: 11,
    fontWeight: "500",
    opacity: 0.5,
    textTransform: "uppercase",
  },
});