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

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

export function ScoreTable({ data, isDark }: ScoreTableProps) {
  const { t } = useTranslation();
  const { match } = data;
  const bgColor = isDark ? "#1C1C1E" : "#FFF";
  const headerTextColor = isDark ? "#666" : "#999";

  // Mock quarters for demo purposes as seen in screenshot
  // In real app, these would come from the API (e.g. match.eventQuarter or specific fields)
  const headers = [
    t("detail.score_table.team"),
    t("detail.score_table.total"),
    "1",
    "2",
    "3",
    "4",
  ];
  const rows = [
    {
      logo: match.homeTeamLogo,
      name: match.eventHomeTeam,
      total: 0,
      q1: 0,
      q2: 0,
      q3: 0,
      q4: 0,
    },
    {
      logo: match.awayTeamLogo,
      name: match.eventAwayTeam,
      total: 0,
      q1: 0,
      q2: 0,
      q3: 0,
      q4: 0,
    },
  ];

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
      <View style={styles.header}>
        {headers.map((h, i) => (
          <ThemedText
            key={h}
            style={[
              styles.headerText,
              {
                color: headerTextColor,
                flex: i === 0 ? 3 : 1,
                textAlign: i === 0 ? "left" : "center",
              },
            ]}
          >
            {h}
          </ThemedText>
        ))}
      </View>

      {rows.map((row, idx) => (
        <View key={idx} style={[styles.row, idx === 0 && styles.rowBorder]}>
          <View style={styles.teamCell}>
            <Image source={{ uri: row.logo }} style={styles.teamLogo} />
          </View>
          <ThemedText style={styles.cellText}>{row.total}</ThemedText>
          <ThemedText style={styles.cellText}>{row.q1}</ThemedText>
          <ThemedText style={styles.cellText}>{row.q2}</ThemedText>
          <ThemedText style={styles.cellText}>{row.q3}</ThemedText>
          <ThemedText style={styles.cellText}>{row.q4}</ThemedText>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    borderRadius: 12,
    padding: 16,
    // Shadow
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  header: {
    flexDirection: "row",
    paddingBottom: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "rgba(150,150,150,0.2)",
  },
  headerText: {
    fontSize: 12,
    fontWeight: "500",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
  },
  rowBorder: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "rgba(150,150,150,0.1)",
  },
  teamCell: {
    flex: 3,
    flexDirection: "row",
    alignItems: "center",
  },
  teamLogo: {
    width: 24,
    height: 24,
    resizeMode: "contain",
  },
  cellText: {
    flex: 1,
    textAlign: "center",
    fontSize: 14,
    fontWeight: "500",
  },
});