import { Box, Stack, Container, CircularProgress } from '@mui/material';
import QrCodeIcon from '@mui/icons-material/QrCode';
import GlobalSnackbar, { useSnackbar } from '@/components/GlobalSnackbar';
import UrlToQrCodeSection from '@/components/UrlToQrCodeSection';
import QrCodeToUrlSection from '@/components/QrCodeToUrlSection';
import { useStorageState } from '@/utils/useStorageState';
import { dashboardPageStyles } from '@/config/pageTheme';
import PageHeader from '@/components/PageHeader';

const QrCodePage = () => {
  const { snackbarProps, showMessage } = useSnackbar({ autoHideDuration: 1500 });

  // 使用自定义钩子管理展开状态
  const [urlExpanded, setUrlExpanded, urlInitialized] = useStorageState('qrCode/urlExpanded', true);
  const [qrExpanded, setQrExpanded, qrInitialized] = useStorageState('qrCode/qrExpanded', false);

  // 初始化未完成时显示加载状态
  if (!urlInitialized || !qrInitialized) {
    return (
      <Container
        sx={{
          py: 4,
          maxWidth: 400,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          minHeight: 200,
        }}
      >
        <CircularProgress />
      </Container>
    );
  }

  return (
    <Box sx={{ minHeight: '100%', pb: 3, bgcolor: dashboardPageStyles.backgroundColor }}>
      <Container sx={{ py: 2, maxWidth: 400, bgcolor: dashboardPageStyles.backgroundColor }}>
        <PageHeader
          title="二维码工具"
          subtitle="生成和解析二维码"
          icon={<QrCodeIcon />}
          sx={{ mb: 2.5 }}
        />

        <Stack spacing={3}>
          <UrlToQrCodeSection
            expanded={urlExpanded}
            onExpandedChange={setUrlExpanded}
            showMessage={showMessage}
          />

          <QrCodeToUrlSection
            expanded={qrExpanded}
            onExpandedChange={setQrExpanded}
            showMessage={showMessage}
          />
        </Stack>
        <GlobalSnackbar {...snackbarProps} />
      </Container>
    </Box>
  );
};

export default QrCodePage;