/**
 * Time unit converter tool - converts between milliseconds and seconds
 */
import { useState } from 'react';
import {
  Box,
  TextField,
  Typography,
  Paper,
  Stack,
  IconButton,
  Collapse,
  Divider,
} from '@mui/material';
import {
  SwapVert as SwapVertIcon,
  ExpandMore as ExpandMoreIcon,
  ExpandLess as ExpandLessIcon,
} from '@mui/icons-material';

export default function TimeConverter() {
  const [milliseconds, setMilliseconds] = useState<string>('125');
  const [seconds, setSeconds] = useState<string>('0.125');
  const [isExpanded, setIsExpanded] = useState<boolean>(false);

  const handleMillisecondsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setMilliseconds(value);

    const ms = parseFloat(value);
    if (!isNaN(ms) && ms !== 0) {
      setSeconds((ms / 1000).toFixed(6).replace(/\.?0+$/, ''));
    } else {
      setSeconds('0');
    }
  };

  const handleSecondsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setSeconds(value);

    const s = parseFloat(value);
    if (!isNaN(s) && s !== 0) {
      setMilliseconds((s * 1000).toFixed(3).replace(/\.?0+$/, ''));
    } else {
      setMilliseconds('0');
    }
  };

  const handleSwap = () => {
    const temp = milliseconds;
    setMilliseconds(seconds);
    setSeconds(temp);
  };

  return (
    <Paper variant="outlined" sx={{ mt: 2 }}>
      {/* Header */}
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          p: 1.5,
          cursor: 'pointer',
          '&:hover': { bgcolor: 'action.hover' },
        }}
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <Typography variant="subtitle2" fontWeight={600} color="primary">
          🔄 Convertisseur de temps
        </Typography>
        <IconButton size="small">
          {isExpanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </IconButton>
      </Box>

      {/* Converter content */}
      <Collapse in={isExpanded}>
        <Divider />
        <Box sx={{ p: 2 }}>
          <Stack spacing={2}>
            {/* Milliseconds input */}
            <TextField
              label="Millisecondes (ms)"
              type="number"
              value={milliseconds}
              onChange={handleMillisecondsChange}
              fullWidth
              size="small"
              inputProps={{ step: 1 }}
              helperText="Temps en millisecondes"
              InputProps={{
                endAdornment: <Typography variant="caption" sx={{ ml: 1 }}>ms</Typography>
              }}
            />

            {/* Swap button */}
            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
              <IconButton
                onClick={handleSwap}
                color="primary"
                size="small"
                sx={{
                  bgcolor: 'action.hover',
                  '&:hover': { bgcolor: 'action.selected' }
                }}
              >
                <SwapVertIcon />
              </IconButton>
            </Box>

            {/* Seconds input */}
            <TextField
              label="Secondes (s)"
              type="number"
              value={seconds}
              onChange={handleSecondsChange}
              fullWidth
              size="small"
              inputProps={{ step: 0.001 }}
              helperText="Temps en secondes"
              InputProps={{
                endAdornment: <Typography variant="caption" sx={{ ml: 1 }}>s</Typography>
              }}
            />

            {/* Quick reference */}
            <Box sx={{ mt: 2, p: 1.5, bgcolor: 'info.light', borderRadius: 1 }}>
              <Typography variant="caption" fontWeight={600} display="block" gutterBottom>
                Référence rapide (valeurs du TP):
              </Typography>
              <Stack spacing={0.5}>
                <Typography variant="caption" fontFamily="monospace">
                  • Coordinateur: 10 ms = 0.010 s
                </Typography>
                <Typography variant="caption" fontFamily="monospace">
                  • Serveur rapide: 120 ms = 0.120 s
                </Typography>
                <Typography variant="caption" fontFamily="monospace">
                  • Serveur moyen: 190 ms = 0.190 s
                </Typography>
                <Typography variant="caption" fontFamily="monospace">
                  • Serveur lent: 240 ms = 0.240 s
                </Typography>
                <Typography variant="caption" fontFamily="monospace">
                  • Inter-arrivées: 125 ms = 0.125 s
                </Typography>
              </Stack>
            </Box>

            {/* Conversion formula */}
            <Box sx={{ mt: 1, p: 1.5, bgcolor: 'grey.100', borderRadius: 1 }}>
              <Typography variant="caption" fontWeight={600} display="block" gutterBottom>
                Formules:
              </Typography>
              <Typography variant="caption" fontFamily="monospace" display="block">
                1 s = 1,000 ms
              </Typography>
              <Typography variant="caption" fontFamily="monospace" display="block">
                1 ms = 0.001 s
              </Typography>
            </Box>
          </Stack>
        </Box>
      </Collapse>
    </Paper>
  );
}