import React from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import InputAdornment from '@mui/material/InputAdornment';

// TabPanel component for tab content
interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

export const TabPanel: React.FC<TabPanelProps> = ({ children, value, index, ...other }) => {
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`company-settings-tabpanel-${index}`}
      aria-labelledby={`company-settings-tab-${index}`}
      {...other}
    >
      {value === index && <Box sx={{ pt: 3 }}>{children}</Box>}
    </div>
  );
};

// Compact number input with unit inside the field
interface NumberInputProps {
  value: number;
  onChange: (value: number) => void;
  unit?: string;
  step?: number;
  min?: number;
  max?: number;
  disabled?: boolean;
  width?: number;
}

export const NumberInput: React.FC<NumberInputProps> = ({
  value,
  onChange,
  unit,
  step = 0.5,
  min = 0,
  max = 999,
  disabled = false,
  width = 120,
}) => {
  return (
    <TextField
      size="small"
      type="number"
      value={value}
      onChange={(e) => onChange(parseFloat(e.target.value) || 0)}
      disabled={disabled}
      inputProps={{ step, min, max }}
      sx={{
        width,
        '& .MuiInputBase-input': {
          textAlign: 'right',
          pr: unit ? 0 : 1,
        },
        '& .MuiOutlinedInput-root': {
          borderRadius: 1,
        },
      }}
      InputProps={{
        endAdornment: unit ? (
          <InputAdornment position="end">
            <Typography variant="body2" color="text.secondary" sx={{ minWidth: 24 }}>
              {unit}
            </Typography>
          </InputAdornment>
        ) : undefined,
      }}
    />
  );
};

// Setting row with label left, input right
interface SettingRowProps {
  label: string;
  children: React.ReactNode;
  helperText?: string;
}

export const SettingRow: React.FC<SettingRowProps> = ({ label, children, helperText }) => (
  <Box
    sx={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      py: 1.5,
      minHeight: 48,
    }}
  >
    <Box sx={{ flex: 1, pr: 2 }}>
      <Typography variant="body2" color="text.primary">
        {label}
      </Typography>
      {helperText && (
        <Typography variant="caption" color="text.secondary">
          {helperText}
        </Typography>
      )}
    </Box>
    <Box sx={{ flexShrink: 0 }}>{children}</Box>
  </Box>
);

// Checkbox row with label and optional description
interface CheckboxRowProps {
  label: string;
  checked: boolean;
  onChange: (checked: boolean) => void;
  helperText?: string;
  disabled?: boolean;
}

export const CheckboxRow: React.FC<CheckboxRowProps> = ({
  label,
  checked,
  onChange,
  helperText,
  disabled,
}) => (
  <Box sx={{ py: 1 }}>
    <FormControlLabel
      control={
        <Checkbox
          checked={checked}
          onChange={(e) => onChange(e.target.checked)}
          disabled={disabled}
          size="small"
          sx={{ py: helperText ? 0.5 : 0 }}
        />
      }
      label={
        <Box>
          <Typography variant="body2" color="text.primary">
            {label}
          </Typography>
          {helperText && (
            <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
              {helperText}
            </Typography>
          )}
        </Box>
      }
      sx={{ alignItems: helperText ? 'flex-start' : 'center', ml: 0 }}
    />
  </Box>
);

// Section header - plain text
interface SectionHeaderProps {
  title: string;
}

export const SectionHeader: React.FC<SectionHeaderProps> = ({ title }) => (
  <Typography
    variant="subtitle1"
    fontWeight="600"
    color="text.primary"
    sx={{ mb: 1.5, mt: 3, '&:first-of-type': { mt: 0 } }}
  >
    {title}
  </Typography>
);