Untitled

/**
 * Dev-only MUI samples for verifying light/dark theme sync with Jira.
 * Remove before merge when no longer needed.
 */

import React, { useState } from 'react'
import { useThemeObserver } from '@atlaskit/tokens'
import Alert from '@mui/material/Alert'
import AlertTitle from '@mui/material/AlertTitle'
import Autocomplete from '@mui/material/Autocomplete'
import Avatar from '@mui/material/Avatar'
import Button from '@mui/material/Button'
import Checkbox from '@mui/material/Checkbox'
import Chip from '@mui/material/Chip'
import FormControl from '@mui/material/FormControl'
import FormControlLabel from '@mui/material/FormControlLabel'
import FormGroup from '@mui/material/FormGroup'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import Paper from '@mui/material/Paper'
import Radio from '@mui/material/Radio'
import RadioGroup from '@mui/material/RadioGroup'
import Select from '@mui/material/Select'
import Stack from '@mui/material/Stack'
import Step from '@mui/material/Step'
import StepLabel from '@mui/material/StepLabel'
import Stepper from '@mui/material/Stepper'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import { useColorScheme } from '@mui/material/styles'

const AUTOCOMPLETE_OPTIONS = ['Alpha', 'Beta', 'Gamma']

function Section({ title, hint, children }) {
  return (
    <Stack spacing={1}>
      <Typography variant="subtitle2">{title}</Typography>
      {hint ? (
        <Typography variant="caption" color="text.secondary">
          {hint}
        </Typography>
      ) : null}
      {children}
    </Stack>
  )
}

export function MuiThemePreview() {
  const { colorMode: jiraColorMode } = useThemeObserver()
  const { mode: muiMode, systemMode } = useColorScheme()
  const [selectValue, setSelectValue] = useState('beta')
  const [autocompleteValue, setAutocompleteValue] = useState('Beta')
  const [checkboxChecked, setCheckboxChecked] = useState(true)
  const [radioValue, setRadioValue] = useState('selected')

  return (
    <Paper variant="outlined" sx={{ p: 2, mb: 2 }}>
      <Typography variant="h6" gutterBottom>
        MUI theme preview
      </Typography>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        Switch Jira light/dark (profile or appearance). MUI and FuegoKit should
        follow. Jira: <strong>{jiraColorMode ?? '…'}</strong> · MUI mode:{' '}
        <strong>{muiMode ?? '…'}</strong>
        {systemMode ? ` (system: ${systemMode})` : null}
      </Typography>

      <Stack spacing={3}>
        <Section title="Buttons">
          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
            <Button variant="contained">Primary</Button>
            <Button variant="contained" color="secondary">
              Secondary
            </Button>
            <Button variant="outlined">Outlined</Button>
            <Button variant="text">Text</Button>
          </Stack>
        </Section>

        <Section
          title="Avatar"
          hint="Tests MuiAvatar icon.inverse text on subtle background."
        >
          <Stack direction="row" spacing={1} alignItems="center">
            <Avatar size="small" />
            <Avatar />
            <Avatar size="large" />
          </Stack>
        </Section>

        <Section
          title="Chips"
          hint="Filled chips use static pastel backgrounds — label stays dark in both modes."
        >
          <Stack direction="row" spacing={1} flexWrap="wrap" useFlexGap>
            <Chip label="Filled default" variant="filled" />
            <Chip label="Filled primary" color="primary" variant="filled" />
            <Chip label="Filled success" color="success" variant="filled" />
            <Chip label="Outlined primary" color="primary" variant="outlined" />
          </Stack>
        </Section>

        <Section title="Text field">
          <TextField
            label="Sample field"
            placeholder="Type here"
            size="small"
            sx={{ maxWidth: 320 }}
          />
        </Section>

        <Section
          title="Select"
          hint="Open the menu — selected MenuItem uses selected background token."
        >
          <FormControl size="small" sx={{ minWidth: 240 }}>
            <InputLabel id="mui-preview-select-label">Sample select</InputLabel>
            <Select
              labelId="mui-preview-select-label"
              label="Sample select"
              value={selectValue}
              onChange={(event) => setSelectValue(event.target.value)}
            >
              <MenuItem value="alpha">Option Alpha</MenuItem>
              <MenuItem value="beta">Option Beta (selected)</MenuItem>
              <MenuItem value="gamma">Option Gamma</MenuItem>
            </Select>
          </FormControl>
        </Section>

        <Section
          title="Autocomplete"
          hint="Open the list — selected option uses the selected background token."
        >
          <Autocomplete
            options={AUTOCOMPLETE_OPTIONS}
            value={autocompleteValue}
            onChange={(_event, value) => setAutocompleteValue(value)}
            sx={{ maxWidth: 320 }}
            renderInput={(params) => (
              <TextField {...params} label="Autocomplete" size="small" />
            )}
          />
        </Section>

        <Section
          title="Checkbox & radio"
          hint="Radio checked state tests icon.inverse fill on brand background."
        >
          <FormGroup row>
            <FormControlLabel
              control={
                <Checkbox
                  checked={checkboxChecked}
                  onChange={(event) => setCheckboxChecked(event.target.checked)}
                />
              }
              label="Checkbox"
            />
            <FormControl component="fieldset">
              <RadioGroup
                row
                value={radioValue}
                onChange={(event) => setRadioValue(event.target.value)}
              >
                <FormControlLabel
                  value="selected"
                  control={<Radio />}
                  label="Radio selected"
                />
                <FormControlLabel
                  value="other"
                  control={<Radio />}
                  label="Radio other"
                />
              </RadioGroup>
            </FormControl>
          </FormGroup>
        </Section>

        <Section
          title="Stepper"
          hint="Disabled step label uses text.disabled."
        >
          <Stepper activeStep={1} sx={{ maxWidth: 480 }}>
            <Step completed>
              <StepLabel>Completed</StepLabel>
            </Step>
            <Step>
              <StepLabel>Active</StepLabel>
            </Step>
            <Step disabled>
              <StepLabel>Disabled step</StepLabel>
            </Step>
          </Stepper>
        </Section>

        <Section title="Alerts (standard)">
          <Stack spacing={1}>
            <Alert severity="info">Info — palette & background</Alert>
            <Alert severity="success">Success</Alert>
            <Alert severity="warning">Warning</Alert>
            <Alert severity="error">Error</Alert>
          </Stack>
        </Section>

        <Section
          title="Alerts (outlined)"
          hint="Tests outlined alert elevation shadow from theme.shadows."
        >
          <Stack spacing={1}>
            <Alert variant="outlined" severity="info">
              <AlertTitle>Outlined info</AlertTitle>
              Outlined variant with box shadow
            </Alert>
            <Alert variant="outlined" severity="warning">
              Outlined warning
            </Alert>
          </Stack>
        </Section>
      </Stack>
    </Paper>
  )
}