'use client';
import { FunctionComponent, ReactNode, useState } from 'react';
import AppBar from '@mui/material/AppBar';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import IconButton from '@mui/material/IconButton';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';
import AppIcon from '../AppIcon';
import ConfirmDialog from '../ConfirmDialog';

export interface FormDialogShellProps {
  open: boolean;
  /** App-bar title (the form's add/edit heading). */
  title: string;
  /** Whether the hosted form has unsaved changes — gates the discard-confirm on close/backdrop/escape. */
  dirty: boolean;
  /** The real close — called immediately when not dirty, or after the discard is confirmed. */
  onClose: () => void;
  closeLabel: string;
  discardTitle: string;
  discardBody: string;
  discardConfirmLabel: string;
  discardCancelLabel: string;
  children: ReactNode;
}

/**
 * Full-screen-on-mobile form dialog: below the `sm` breakpoint the form takes over the whole
 * viewport (a single scroll region, an app-bar header with a close button) instead of a cramped
 * `maxWidth="sm"` modal double-scrolling against the keyboard; at `sm`+ it's a normal sized
 * dialog. Closing (the app-bar button, backdrop click, or Escape) while the form is `dirty` shows
 * a discard-confirm instead of silently dropping the draft. The hosted form keeps its own
 * save/cancel row inside `children` — this shell only owns the chrome + the dirty guard.
 * @component FormDialogShell
 */
const FormDialogShell: FunctionComponent<FormDialogShellProps> = ({
  open,
  title,
  dirty,
  onClose,
  closeLabel,
  discardTitle,
  discardBody,
  discardConfirmLabel,
  discardCancelLabel,
  children,
}) => {
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const [discardOpen, setDiscardOpen] = useState(false);

  const requestClose = () => {
    if (dirty) setDiscardOpen(true);
    else onClose();
  };

  return (
    <>
      <Dialog open={open} onClose={requestClose} fullScreen={fullScreen} fullWidth maxWidth="sm">
        <AppBar
          position="relative"
          color="default"
          elevation={0}
          sx={{ bgcolor: 'background.paper', borderBottom: 1, borderColor: 'divider' }}
        >
          <Toolbar>
            <IconButton edge="start" onClick={requestClose} aria-label={closeLabel} sx={{ marginInlineEnd: 1 }}>
              <AppIcon icon="close" />
            </IconButton>
            <Typography variant="h6" sx={{ flexGrow: 1, fontWeight: 700 }}>
              {title}
            </Typography>
          </Toolbar>
        </AppBar>
        <DialogContent sx={{ pt: 2 }}>{children}</DialogContent>
      </Dialog>

      <ConfirmDialog
        open={discardOpen}
        title={discardTitle}
        body={discardBody}
        confirmLabel={discardConfirmLabel}
        cancelLabel={discardCancelLabel}
        confirmColor="error"
        onConfirm={() => {
          setDiscardOpen(false);
          onClose();
        }}
        onClose={() => setDiscardOpen(false)}
      />
    </>
  );
};

export default FormDialogShell;
