/**
 * This file is part of the SplendidBear Websites' projects.
 *
 * Copyright (c) 2026 @ www.splendidbear.org
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

import React from 'react';
import Dialog from '@mui/material/Dialog';
import { styled } from '@mui/material/styles';
import { PlayerColumn } from '@mine-components';
import { bool, func, shape, string, number, object } from 'prop-types';

const BonusStatsDialog = ({ open, onClose, red, blue }) => (
  <StyledDialog open={open} onClose={onClose}>
    <div className="bsd">
      <div className="bsd-header">
        <div className="bsd-header-text">
          <span className="bsd-label">Scoring</span>
          <h2 className="bsd-title">
            <i className="fa fa-star" />
            Bonus Statistics
          </h2>
        </div>
        <button className="bsd-close" onClick={onClose} aria-label="Close">
          <i className="fa fa-times" />
        </button>
      </div>
      <div className="bsd-body">
        <PlayerColumn color="red" player={red} />
        <PlayerColumn color="blue" player={blue} />
      </div>
      <p className="bsd-note">
        Bonus points are awarded alongside the main score for skillful play.
      </p>
    </div>
  </StyledDialog>
);

const StyledDialog = styled(Dialog)({
  '& .MuiDialog-paper': {
    background: '#07090d',
    backgroundImage: `
      linear-gradient(rgba(35, 111, 135, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(35, 111, 135, 0.08) 1px, transparent 1px)
    `,
    backgroundSize: '46px 46px',
    border: '1px solid rgba(35, 111, 135, 0.4)',
    borderRadius: '12px',
    boxShadow: '0 0 80px rgba(35, 111, 135, 0.15), 0 32px 80px rgba(0, 0, 0, 0.9)',
    width: '560px',
    maxWidth: '94vw',
    overflow: 'hidden',
    color: '#fff',
  },
  '& .MuiBackdrop-root': {
    background: 'rgba(2, 4, 8, 0.88)',
    backdropFilter: 'blur(4px)',
  },
});

export default BonusStatsDialog;

BonusStatsDialog.propTypes = {
  open:    bool.isRequired,
  onClose: func.isRequired,
  red:     shape({
    name:        string,
    bonusPoints: number,
    bonusStats:  object,
  }).isRequired,
  blue:    shape({
    name:        string,
    bonusPoints: number,
    bonusStats:  object,
  }).isRequired,
};