import React, { useState } from 'react';
import { TextField, Typography, Container, Grid, Card, CardContent } from '@mui/material';
import {
  mean, median, mode, standardDeviation
} from 'simple-statistics';

const MeanMedianMode = () => {
  const [numbers, setNumbers] = useState([]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
    const nums = e.target.value.split(',').map(Number).filter(n => !isNaN(n));
    setNumbers(nums);
  };

  const getMode = (numbers) => {
    try {
      const modeResult = mode(numbers);
      return Array.isArray(modeResult) ? modeResult.join(', ') : modeResult.toString();
    } catch (e) {
      return 'No mode';
    }
  };

  return (
    <Container className="flex flex-col items-center justify-center h-screen bg-gray-100">
      <Typography variant="h4" className="mb-4">Basic Statistics Calculator</Typography>
      <TextField
        label="Enter numbers (comma separated)"
        variant="outlined"
        value={input}
        onChange={handleInputChange}
        className="w-full mb-4"
      />
      <Grid container spacing={2}>
        {numbers.length > 0 && (
          <>
            <Grid item xs={12} sm={6} md={3}>
              <Card>
                <CardContent className="text-center">
                  <Typography variant="h6">Mean</Typography>
                  <Typography variant="body1">{mean(numbers).toFixed(2)}</Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Card>
                <CardContent className="text-center">
                  <Typography variant="h6">Median</Typography>
                  <Typography variant="body1">{median(numbers).toFixed(2)}</Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Card>
                <CardContent className="text-center">
                  <Typography variant="h6">Mode</Typography>
                  <Typography variant="body1">{getMode(numbers)}</Typography>
                </CardContent>
              </Card>
            </Grid>
            <Grid item xs={12} sm={6} md={3}>
              <Card>
                <CardContent className="text-center">
                  <Typography variant="h6">Standard Deviation</Typography>
                  <Typography variant="body1">{standardDeviation(numbers).toFixed(2)}</Typography>
                </CardContent>
              </Card>
            </Grid>
          </>
        )}
      </Grid>
    </Container>
  );
};

export default MeanMedianMode;