// src/components/ScoreTracker.js
import React, { useState } from 'react';
import { useScore, ACTIONS } from '../context/ScoreContext';
import { Button, Grid, Typography, TextField } from '@mui/material';

const ScoreTracker = () => {
  const { state, dispatch } = useScore();
  const [arrowScores, setArrowScores] = useState(['', '', '', '', '']); // Track scores for each arrow

  const gameType = state.currentGame.gameType;
  const maxArrowsPerRound = gameType === '450' ? 3 : 5; // 3 for 450 game, 5 for 300 game
  const maxScore = gameType === '450' ? 10 : 5; // Max score per arrow depends on the game

  // Handle arrow score input change
  const handleScoreChange = (index, value) => {
    const updatedScores = [...arrowScores];
    updatedScores[index] = value;
    setArrowScores(updatedScores);
  };

  const handleAddRound = () => {
    // Validate all scores: numeric between 0 and maxScore, or 'X'
    const valid = arrowScores.slice(0, maxArrowsPerRound).every(score =>
      (score >= 0 && score <= maxScore) || score.toUpperCase() === 'X'
    );
    if (!valid) {
      alert(`Please enter valid scores between 0-${maxScore} or X for bullseyes.`);
      return;
    }

    // Dispatch each arrow score for the round
    arrowScores.slice(0, maxArrowsPerRound).forEach((score) => {
      const arrowScore = score.toUpperCase() === 'X' ? maxScore : parseInt(score, 10);

      dispatch({
        type: ACTIONS.ADD_ARROW,
        payload: {
          roundIndex: state.currentGame.rounds.length, // Current round index
          score: arrowScore,
          isBullseye: score.toUpperCase() === 'X',
        },
      });
    });

    // Reset the arrow scores for the next round
    setArrowScores(['', '', '', '', '']);
  };

  return (
    <Grid container spacing={3} justifyContent="center" alignItems="center" style={{ minHeight: '80vh' }}>
      <Grid item xs={12}>
        <Typography variant="h4" align="center" gutterBottom>
          Score Tracker: {gameType} Round
        </Typography>
      </Grid>

      <Grid item xs={12}>
        <Typography variant="h6" align="center">
          Round {state.currentGame.rounds.length + 1}
        </Typography>
      </Grid>

      {/* Arrow score inputs */}
      {Array.from({ length: maxArrowsPerRound }).map((_, index) => (
        <Grid item xs={12} sm={6} key={index}>
          <TextField
            label={`Arrow ${index + 1} Score`}
            value={arrowScores[index]}
            onChange={(e) => handleScoreChange(index, e.target.value)}
            fullWidth
            placeholder={`Enter 0-${maxScore} or X`}
          />
        </Grid>
      ))}

      {/* Add round button */}
      <Grid item xs={12}>
        <Button variant="contained" color="primary" onClick={handleAddRound} fullWidth>
          Add Round
        </Button>
      </Grid>

      {/* Current game status */}
      <Grid item xs={12}>
        <Typography variant="h6" align="center">
          Total Score: {state.currentGame.totalScore}
        </Typography>
        <Typography variant="h6" align="center">
          Total Bullseyes: {state.currentGame.totalBullseyes}
        </Typography>
      </Grid>

      {/* Display all round scores */}
      <Grid item xs={12}>
        <Typography variant="h6" align="center" gutterBottom>
          All Round Scores:
        </Typography>
        <Grid container spacing={2}>
          {state.currentGame.rounds.map((round, roundIndex) => (
            <Grid item xs={12} key={roundIndex}>
              <Typography variant="body1" align="center">
                Round {roundIndex + 1}: {round.arrows.join(', ')} (Total: {round.total}, Bullseyes: {round.bullseyes})
              </Typography>
            </Grid>
          ))}
        </Grid>
      </Grid>
    </Grid>
  );
};

export default ScoreTracker;