import type { Meta, StoryObj } from '@storybook/react';
import { IconButton } from './IconButton';
import Box from '@mui/material/Box';
import CloseIcon from '@mui/icons-material/Close';
import MenuIcon from '@mui/icons-material/Menu';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import SearchIcon from '@mui/icons-material/Search';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ShareOutlinedIcon from '@mui/icons-material/ShareOutlined';

const meta: Meta<typeof IconButton> = {
  title: 'Atoms/IconButton',
  component: IconButton,
  tags: ['autodocs'],
  argTypes: {
    size: { control: 'select', options: ['small', 'medium', 'large'] },
    color: { control: 'select', options: ['default', 'primary', 'secondary', 'error'] },
    disabled: { control: 'boolean' },
  },
};

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

// ─── Default ────────────────────────────────────────────────────────────────

export const Default: Story = {
  args: {
    'aria-label': 'Close',
    children: <CloseIcon />,
  },
};

// ─── Sizes ──────────────────────────────────────────────────────────────────

/** Three sizes matching Button height scale */
export const Sizes: Story = {
  render: () => (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
      <Box sx={{ textAlign: 'center' }}>
        <IconButton size="small" aria-label="Search">
          <SearchIcon />
        </IconButton>
        <Box sx={{ fontSize: 11, color: 'text.secondary', mt: 0.5 }}>small (32px)</Box>
      </Box>
      <Box sx={{ textAlign: 'center' }}>
        <IconButton size="medium" aria-label="Search">
          <SearchIcon />
        </IconButton>
        <Box sx={{ fontSize: 11, color: 'text.secondary', mt: 0.5 }}>medium (40px)</Box>
      </Box>
      <Box sx={{ textAlign: 'center' }}>
        <IconButton size="large" aria-label="Search">
          <SearchIcon />
        </IconButton>
        <Box sx={{ fontSize: 11, color: 'text.secondary', mt: 0.5 }}>large (48px)</Box>
      </Box>
    </Box>
  ),
};

// ─── Colours ────────────────────────────────────────────────────────────────

/** Colour options for different contexts */
export const Colours: Story = {
  name: 'Colours',
  render: () => (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
      <IconButton color="default" aria-label="Menu">
        <MenuIcon />
      </IconButton>
      <IconButton color="primary" aria-label="Edit">
        <EditOutlinedIcon />
      </IconButton>
      <IconButton color="secondary" aria-label="More options">
        <MoreVertIcon />
      </IconButton>
      <IconButton color="error" aria-label="Delete">
        <DeleteOutlineIcon />
      </IconButton>
    </Box>
  ),
};

// ─── States ─────────────────────────────────────────────────────────────────

/** Interactive states: default, hover (try it), disabled */
export const States: Story = {
  render: () => (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
      <Box sx={{ textAlign: 'center' }}>
        <IconButton aria-label="Default">
          <CloseIcon />
        </IconButton>
        <Box sx={{ fontSize: 11, color: 'text.secondary', mt: 0.5 }}>Default</Box>
      </Box>
      <Box sx={{ textAlign: 'center' }}>
        <IconButton disabled aria-label="Disabled">
          <CloseIcon />
        </IconButton>
        <Box sx={{ fontSize: 11, color: 'text.secondary', mt: 0.5 }}>Disabled</Box>
      </Box>
    </Box>
  ),
};

// ─── Common Use Cases ───────────────────────────────────────────────────────

/** Real-world icon button patterns */
export const CommonUseCases: Story = {
  name: 'Common Use Cases',
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
      {/* Card actions toolbar */}
      <Box>
        <Box sx={{ fontSize: 12, color: 'text.secondary', mb: 1 }}>Card action toolbar</Box>
        <Box
          sx={{
            display: 'flex',
            gap: 1,
            p: 1,
            border: '1px solid',
            borderColor: 'divider',
            borderRadius: 1,
            width: 'fit-content',
          }}
        >
          <IconButton size="small" color="primary" aria-label="Favourite">
            <FavoriteBorderIcon />
          </IconButton>
          <IconButton size="small" color="primary" aria-label="Share">
            <ShareOutlinedIcon />
          </IconButton>
          <IconButton size="small" aria-label="More options">
            <MoreVertIcon />
          </IconButton>
        </Box>
      </Box>

      {/* Dialog close */}
      <Box>
        <Box sx={{ fontSize: 12, color: 'text.secondary', mb: 1 }}>Dialog close button</Box>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            p: 2,
            border: '1px solid',
            borderColor: 'divider',
            borderRadius: 1,
            width: 300,
          }}
        >
          <Box sx={{ fontWeight: 600 }}>Confirm Selection</Box>
          <IconButton size="small" aria-label="Close dialog">
            <CloseIcon />
          </IconButton>
        </Box>
      </Box>

      {/* Navigation header */}
      <Box>
        <Box sx={{ fontSize: 12, color: 'text.secondary', mb: 1 }}>Mobile navigation toggle</Box>
        <Box
          sx={{
            display: 'flex',
            alignItems: 'center',
            gap: 1,
            p: 1,
            backgroundColor: 'var(--fa-color-brand-50)',
            borderRadius: 1,
            width: 'fit-content',
          }}
        >
          <IconButton size="large" aria-label="Open menu">
            <MenuIcon />
          </IconButton>
          <Box sx={{ fontWeight: 600 }}>Funeral Arranger</Box>
        </Box>
      </Box>
    </Box>
  ),
};
