import { Box, Stack, Typography, useTheme } from '@mui/material';
import {
  IconAntennaBars5,
  IconBatteryVertical4,
  IconWifi,
} from '@tabler/icons-react';
import { composeSx } from '@utils/components';

import { type PhoneMockupProps } from './types';

const DEFAULT_WIDTH = 320;
const BEZEL_THICKNESS = 8;
const STATUS_BAR_HEIGHT = 32;
const DYNAMIC_ISLAND_HEIGHT = 20;
const HOME_INDICATOR_AREA_HEIGHT = 28;
const OUTER_RADIUS = 36;
const SCREEN_RADIUS = 28;
const CAMERA_DOT_SIZE = 12;
const INDICATOR_WIDTH = 96;
const INDICATOR_HEIGHT = 5;
const STATUS_ICON_SIZE = 14;

/**
 * Decorative phone frame used to preview mobile views of admin-authored content.
 *
 * The parent container must have a defined height; the component fills it
 * vertically with `height: 100%`. Without a height anchor (e.g. an explicit
 * value or a flex/grid parent) the mockup collapses to zero.
 *
 * Layout:
 * - Outer lavender bezel with uniform `BEZEL_THICKNESS` padding on all sides.
 * - Inner screen (rounded, clipped) with a lavender status bar at the top
 *   (time + camera dot + signal icons) and a home indicator strip at the
 *   bottom. The middle area is the actual scrollable content surface for
 *   `children`.
 */
const PhoneMockup = ({
  children,
  width = DEFAULT_WIDTH,
  sx,
  screenSx,
}: PhoneMockupProps) => {
  const theme = useTheme();
  const bezelColor =
    theme.palette.newBase?.brand[100] ?? theme.palette.primary.light;
  const indicatorColor =
    theme.palette.newBase?.grey[950] ?? theme.palette.common.black;
  const screenColor =
    theme.palette.new?.background.elements.default ??
    theme.palette.common.white;
  // System bar (status bar + home indicator) sits on a light grey surface
  // matching the platform's default system UI tint — distinct from the
  // lavender bezel and from the white app content.
  const systemBarColor =
    theme.palette.new?.background.layout.default ?? theme.palette.grey[50];
  const statusIconColor =
    theme.palette.new?.text.neutral.default ?? theme.palette.common.black;

  return (
    <Box
      sx={composeSx(
        {
          width,
          height: '100%',
          maxHeight: '100%',
          backgroundColor: bezelColor,
          borderRadius: `${OUTER_RADIUS}px`,
          padding: `${BEZEL_THICKNESS}px`,
          boxSizing: 'border-box',
          display: 'flex',
          flexDirection: 'column',
          flexShrink: 0,
        },
        sx,
      )}
      role="presentation"
      aria-hidden="true"
    >
      <Stack
        sx={composeSx(
          {
            flex: 1,
            minHeight: 0,
            backgroundColor: screenColor,
            borderRadius: `${SCREEN_RADIUS}px`,
            overflow: 'hidden',
          },
          screenSx,
        )}
      >
        <Stack
          sx={{
            height: STATUS_BAR_HEIGHT,
            flexShrink: 0,
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            backgroundColor: systemBarColor,
            px: 2,
            gap: 1,
          }}
        >
          <Typography
            sx={{
              color: statusIconColor,
              fontSize: 12,
              fontWeight: 'fontWeightSemiBold',
              minWidth: 32,
            }}
          >
            9:30
          </Typography>
          <Box
            sx={{
              width: CAMERA_DOT_SIZE,
              height: CAMERA_DOT_SIZE,
              borderRadius: '50%',
              backgroundColor: indicatorColor,
            }}
          />
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 0.25,
              color: statusIconColor,
              minWidth: 32,
              justifyContent: 'flex-end',
            }}
          >
            <IconWifi size={STATUS_ICON_SIZE} />
            <IconAntennaBars5 size={STATUS_ICON_SIZE} />
            <IconBatteryVertical4 size={STATUS_ICON_SIZE} />
          </Stack>
        </Stack>
        <Stack
          sx={{
            height: DYNAMIC_ISLAND_HEIGHT,
            flexShrink: 0,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: systemBarColor,
          }}
        >
          <Box
            sx={{
              width: INDICATOR_WIDTH,
              height: INDICATOR_HEIGHT,
              backgroundColor: indicatorColor,
              borderRadius: `${INDICATOR_HEIGHT / 2}px`,
            }}
          />
        </Stack>
        <Box
          sx={{
            flex: 1,
            minHeight: 0,
            // `minWidth: 0` prevents intrinsically-wide children (e.g. tables,
            // iframes with hard-coded width attributes) from pushing the inner
            // screen wider than the phone bezel.
            minWidth: 0,
            width: '100%',
            overflowY: 'auto',
            overflowX: 'hidden',
            overscrollBehavior: 'contain',
          }}
        >
          {children}
        </Box>
        <Stack
          sx={{
            height: HOME_INDICATOR_AREA_HEIGHT,
            flexShrink: 0,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: systemBarColor,
          }}
        >
          <Box
            sx={{
              width: INDICATOR_WIDTH,
              height: INDICATOR_HEIGHT,
              backgroundColor: indicatorColor,
              borderRadius: `${INDICATOR_HEIGHT / 2}px`,
            }}
          />
        </Stack>
      </Stack>
    </Box>
  );
};

export type { PhoneMockupProps };

export default PhoneMockup;