import type { Meta, StoryObj } from '@storybook/react'
import { Button } from '../Button'
import { Checkbox } from '../Checkbox'
import { Label } from '../Label'
import { Typography } from '../Typography'
import {
  Modal,
  ModalBody,
  ModalClose,
  ModalCloseButton,
  ModalContent,
  ModalDescription,
  ModalFooter,
  ModalHeader,
  ModalTitle,
  ModalTrigger,
} from './Modal'

const meta = {
  component: Modal,
  title: 'Blocks/Modal',
  subcomponents: {
    ModalTrigger,
    ModalContent,
    ModalHeader,
    ModalTitle,
    ModalDescription,
    ModalBody,
    ModalFooter,
    ModalClose,
    ModalCloseButton,
  },
  parameters: {
    layout: 'centered',
  },
  decorators: [
    (Story) => (
      <div className="flex items-center justify-center">
        <Story />
      </div>
    ),
  ],
  argTypes: {
    open: { control: 'boolean' },
    onOpenChange: { control: false },
  },
} satisfies Meta<typeof Modal>

export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: (_args) => (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="primary">Open Modal</Button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Modal Title</ModalTitle>
        </ModalHeader>
        <ModalBody>Modal content goes here</ModalBody>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="secondary">Cancel</Button>
          </ModalClose>
          <ModalClose asChild>
            <Button variant="primary">Confirm</Button>
          </ModalClose>
        </ModalFooter>
      </ModalContent>
    </Modal>
  ),
}

export const SmallModal: Story = {
  render: (_args) => (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="primary">Open Small Modal</Button>
      </ModalTrigger>
      <ModalContent size="sm">
        <ModalHeader>
          <ModalTitle>Small Modal</ModalTitle>
        </ModalHeader>
        <ModalBody>
          <Typography color="muted">
            This is a small modal with minimal content.
          </Typography>
        </ModalBody>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="primary" className="w-full">
              Close
            </Button>
          </ModalClose>
        </ModalFooter>
      </ModalContent>
    </Modal>
  ),
}

export const LargeModal: Story = {
  render: (_args) => (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="primary">Open Large Modal</Button>
      </ModalTrigger>
      <ModalContent size="lg">
        <ModalHeader>
          <ModalTitle>Large Modal Title</ModalTitle>
          <ModalDescription>
            This is a large modal that demonstrates the maximum width option.
          </ModalDescription>
        </ModalHeader>
        <ModalBody>
          <Typography>
            This modal uses the lg size variant, which provides more space for
            content. It is useful for displaying forms, tables, or other complex
            information that requires additional screen real estate.
          </Typography>
        </ModalBody>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="secondary">Cancel</Button>
          </ModalClose>
          <ModalClose asChild>
            <Button variant="primary">Confirm</Button>
          </ModalClose>
        </ModalFooter>
      </ModalContent>
    </Modal>
  ),
}

export const WithDividers: Story = {
  render: (_args) => (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="primary">Open Modal With Dividers</Button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader showDivider>
          <ModalTitle>Modal With Dividers</ModalTitle>
        </ModalHeader>
        <ModalBody>
          <div className="flex items-center gap-2">
            <Checkbox checked disabled />
            <Label>Enable Dividers</Label>
          </div>
        </ModalBody>
        <ModalFooter showDivider>
          <ModalClose asChild>
            <Button variant="secondary">Cancel</Button>
          </ModalClose>
          <ModalClose asChild>
            <Button variant="primary">Save Changes</Button>
          </ModalClose>
        </ModalFooter>
      </ModalContent>
    </Modal>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Use header and footer dividers when modal content needs stronger separation from actions.',
      },
    },
  },
}

export const WithDescription: Story = {
  render: (_args) => (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="primary">Open Modal With Description</Button>
      </ModalTrigger>
      <ModalContent>
        <ModalHeader>
          <ModalTitle>Modal Title</ModalTitle>
          <ModalDescription>
            This modal includes a description that provides additional context
            below the title.
          </ModalDescription>
        </ModalHeader>
        <ModalBody>
          <Typography>
            The description component is useful for providing additional context
            or instructions related to the modal purpose.
          </Typography>
        </ModalBody>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="secondary">Cancel</Button>
          </ModalClose>
          <ModalClose asChild>
            <Button variant="primary">Confirm</Button>
          </ModalClose>
        </ModalFooter>
      </ModalContent>
    </Modal>
  ),
}
export const WithoutCloseButton: Story = {
  render: (_args) => (
    <Modal>
      <ModalTrigger asChild>
        <Button variant="primary">Open Modal without Close</Button>
      </ModalTrigger>
      <ModalContent showCloseButton={false}>
        <ModalHeader>
          <ModalTitle>Modal Title</ModalTitle>
          <ModalDescription>
            This modal has no X button in the top-right corner. Users must use
            the action buttons below to dismiss it.
          </ModalDescription>
        </ModalHeader>
        <ModalBody>
          <Typography>
            Notice that there is no X button in the top-right corner of this
            modal. This pattern can be useful when you want to ensure users make
            a deliberate choice rather than dismissing the modal without taking
            action.
          </Typography>
        </ModalBody>
        <ModalFooter>
          <ModalClose asChild>
            <Button variant="secondary">Cancel</Button>
          </ModalClose>
          <ModalClose asChild>
            <Button variant="primary">Confirm</Button>
          </ModalClose>
        </ModalFooter>
      </ModalContent>
    </Modal>
  ),
  parameters: {
    docs: {
      description: {
        story:
          'Hide the close button when users must make an explicit choice through the modal actions.',
      },
    },
  },
}