import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { DialogShell } from './DialogShell';
import { Button } from '../Button';
import { Typography } from '../Typography';
import Box from '@mui/material/Box';

const meta: Meta<typeof DialogShell> = {
  title: 'Atoms/DialogShell',
  component: DialogShell,
  tags: ['autodocs'],
  parameters: { layout: 'centered' },
};

export default meta;
type Story = StoryObj<typeof DialogShell>;

/** Default dialog with title, body, and footer */
export const Default: Story = {
  render: () => {
    const [open, setOpen] = useState(false);
    return (
      <>
        <Button variant="contained" onClick={() => setOpen(true)}>
          Open dialog
        </Button>
        <DialogShell
          open={open}
          onClose={() => setOpen(false)}
          title="Dialog title"
          footer={
            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button variant="contained" size="small" onClick={() => setOpen(false)}>
                Done
              </Button>
            </Box>
          }
        >
          <Typography variant="body1">
            This is the dialog body content. It scrolls when the content exceeds the max height.
          </Typography>
        </DialogShell>
      </>
    );
  },
};

/** Dialog with a back button */
export const WithBackButton: Story = {
  render: () => {
    const [open, setOpen] = useState(false);
    return (
      <>
        <Button variant="contained" onClick={() => setOpen(true)}>
          Open dialog
        </Button>
        <DialogShell
          open={open}
          onClose={() => setOpen(false)}
          title="Step 2 of 3"
          onBack={() => alert('Back')}
          backLabel="Back to step 1"
          footer={
            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
              <Button variant="outlined" color="secondary" onClick={() => setOpen(false)}>
                Cancel
              </Button>
              <Button variant="contained" onClick={() => setOpen(false)}>
                Continue
              </Button>
            </Box>
          }
        >
          <Typography variant="body1">
            Content for the second step of a multi-step dialog.
          </Typography>
        </DialogShell>
      </>
    );
  },
};

/** Long content that triggers scrollable body */
export const LongContent: Story = {
  render: () => {
    const [open, setOpen] = useState(false);
    return (
      <>
        <Button variant="contained" onClick={() => setOpen(true)}>
          Open dialog
        </Button>
        <DialogShell
          open={open}
          onClose={() => setOpen(false)}
          title="Scrollable content"
          footer={
            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Button variant="contained" size="small" onClick={() => setOpen(false)}>
                Done
              </Button>
            </Box>
          }
        >
          {Array.from({ length: 12 }, (_, i) => (
            <Typography key={i} variant="body1" sx={{ mb: 2 }}>
              Paragraph {i + 1}: This is sample content to demonstrate the scrollable body area.
              When the content exceeds the dialog&apos;s max height, the body scrolls while the
              header and footer remain fixed.
            </Typography>
          ))}
        </DialogShell>
      </>
    );
  },
};

/** Dialog without a footer */
export const NoFooter: Story = {
  render: () => {
    const [open, setOpen] = useState(false);
    return (
      <>
        <Button variant="contained" onClick={() => setOpen(true)}>
          Open dialog
        </Button>
        <DialogShell open={open} onClose={() => setOpen(false)} title="Information">
          <Typography variant="body1" sx={{ mb: 2 }}>
            This dialog has no footer — just a close button in the header.
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Useful for informational popups or content that doesn&apos;t need actions.
          </Typography>
        </DialogShell>
      </>
    );
  },
};
