import type { Meta, StoryObj } from '@storybook/react';
import { Badge } from './Badge';
import { Card } from '../Card';
import { Typography } from '../Typography';
import { Button } from '../Button';
import Box from '@mui/material/Box';
import StarIcon from '@mui/icons-material/Star';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import LocalOfferIcon from '@mui/icons-material/LocalOffer';
import NewReleasesIcon from '@mui/icons-material/NewReleases';
import VerifiedIcon from '@mui/icons-material/Verified';

const meta: Meta<typeof Badge> = {
  title: 'Atoms/Badge',
  component: Badge,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    color: {
      control: 'select',
      options: ['default', 'brand', 'success', 'warning', 'error', 'info'],
      description: 'Colour intent',
      table: { defaultValue: { summary: 'default' } },
    },
    variant: {
      control: 'select',
      options: ['soft', 'filled'],
      description: 'Visual style variant',
      table: { defaultValue: { summary: 'soft' } },
    },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
      description: 'Size preset',
      table: { defaultValue: { summary: 'medium' } },
    },
  },
};

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

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

/** Default badge — soft variant, default colour */
export const Default: Story = {
  args: {
    children: 'Status',
  },
};

// ─── All Colours — Soft ─────────────────────────────────────────────────────

/** Soft variant across all colour options */
export const AllColoursSoft: Story = {
  name: 'All Colours — Soft',
  render: () => (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Badge color="default">Default</Badge>
      <Badge color="brand">Brand</Badge>
      <Badge color="success">Success</Badge>
      <Badge color="warning">Warning</Badge>
      <Badge color="error">Error</Badge>
      <Badge color="info">Info</Badge>
    </div>
  ),
};

// ─── All Colours — Filled ───────────────────────────────────────────────────

/** Filled variant across all colour options */
export const AllColoursFilled: Story = {
  name: 'All Colours — Filled',
  render: () => (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Badge variant="filled" color="default">
        Default
      </Badge>
      <Badge variant="filled" color="brand">
        Brand
      </Badge>
      <Badge variant="filled" color="success">
        Success
      </Badge>
      <Badge variant="filled" color="warning">
        Warning
      </Badge>
      <Badge variant="filled" color="error">
        Error
      </Badge>
      <Badge variant="filled" color="info">
        Info
      </Badge>
    </div>
  ),
};

// ─── With Icons ─────────────────────────────────────────────────────────────

/** Badges with leading icons */
export const WithIcons: Story = {
  name: 'With Icons',
  render: () => (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Badge color="brand" icon={<StarIcon />}>
        Popular
      </Badge>
      <Badge color="success" icon={<CheckCircleIcon />}>
        Verified
      </Badge>
      <Badge color="warning" icon={<WarningAmberIcon />}>
        Limited
      </Badge>
      <Badge color="error" icon={<ErrorOutlineIcon />}>
        Sold out
      </Badge>
      <Badge color="info" icon={<InfoOutlinedIcon />}>
        New
      </Badge>
    </div>
  ),
};

/** Filled badges with icons */
export const WithIconsFilled: Story = {
  name: 'With Icons — Filled',
  render: () => (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Badge variant="filled" color="brand" icon={<StarIcon />}>
        Popular
      </Badge>
      <Badge variant="filled" color="success" icon={<CheckCircleIcon />}>
        Included
      </Badge>
      <Badge variant="filled" color="warning" icon={<WarningAmberIcon />}>
        Attention
      </Badge>
      <Badge variant="filled" color="error" icon={<ErrorOutlineIcon />}>
        Unavailable
      </Badge>
      <Badge variant="filled" color="info" icon={<InfoOutlinedIcon />}>
        Updated
      </Badge>
    </div>
  ),
};

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

/** All three sizes side by side */
export const Sizes: Story = {
  render: () => (
    <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <Badge size="small" color="brand" icon={<StarIcon />}>
        Small
      </Badge>
      <Badge size="medium" color="brand" icon={<StarIcon />}>
        Medium
      </Badge>
      <Badge size="large" color="brand" icon={<StarIcon />}>
        Large
      </Badge>
    </div>
  ),
};

// ─── In Context: Price Card ─────────────────────────────────────────────────

/**
 * Badge used inside a PriceCard-style layout.
 * Shows how badges label card content in realistic compositions.
 */
export const InPriceCard: Story = {
  name: 'In Context — Price Card',
  render: () => (
    <div style={{ display: 'flex', gap: 24, maxWidth: 750 }}>
      <Card sx={{ flex: 1 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 2 }}>
          <Typography variant="overline" color="text.secondary">
            Essential
          </Typography>
          <Badge size="small" color="default">
            Standard
          </Badge>
        </Box>
        <Typography variant="display3" color="primary" sx={{ mb: 1 }}>
          $3,200
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
          A simple, respectful service with chapel ceremony.
        </Typography>
        <Button fullWidth>Select</Button>
      </Card>

      <Card sx={{ flex: 1 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 2 }}>
          <Typography variant="overline" color="text.secondary">
            Premium
          </Typography>
          <Badge color="brand" icon={<StarIcon />}>
            Most popular
          </Badge>
        </Box>
        <Typography variant="display3" color="primary" sx={{ mb: 1 }}>
          $5,800
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
          Comprehensive service with premium inclusions.
        </Typography>
        <Button fullWidth>Select</Button>
      </Card>

      <Card sx={{ flex: 1 }}>
        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 2 }}>
          <Typography variant="overline" color="text.secondary">
            Bespoke
          </Typography>
          <Badge color="info" icon={<LocalOfferIcon />}>
            Best value
          </Badge>
        </Box>
        <Typography variant="display3" color="primary" sx={{ mb: 1 }}>
          $8,500
        </Typography>
        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
          Fully customised farewell with dedicated coordinator.
        </Typography>
        <Button fullWidth>Select</Button>
      </Card>
    </div>
  ),
};

// ─── In Context: Service Status ─────────────────────────────────────────────

/**
 * Badges used as status indicators in a service listing.
 */
export const ServiceStatus: Story = {
  name: 'In Context — Service Status',
  render: () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 500 }}>
      {[
        {
          service: 'Chapel ceremony',
          badge: (
            <Badge color="success" icon={<CheckCircleIcon />}>
              Confirmed
            </Badge>
          ),
        },
        {
          service: 'Floral arrangements',
          badge: (
            <Badge color="warning" icon={<WarningAmberIcon />}>
              Pending
            </Badge>
          ),
        },
        {
          service: 'Catering',
          badge: (
            <Badge color="error" icon={<ErrorOutlineIcon />}>
              Unavailable
            </Badge>
          ),
        },
        {
          service: 'Memorial printing',
          badge: (
            <Badge color="info" icon={<NewReleasesIcon />}>
              New option
            </Badge>
          ),
        },
        {
          service: 'Premium casket',
          badge: (
            <Badge variant="filled" color="brand" icon={<VerifiedIcon />}>
              Included
            </Badge>
          ),
        },
      ].map((item) => (
        <Card key={item.service} variant="outlined" padding="compact">
          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Typography variant="labelLg">{item.service}</Typography>
            {item.badge}
          </Box>
        </Card>
      ))}
    </div>
  ),
};

// ─── Complete Matrix ────────────────────────────────────────────────────────

/** Full variant × colour × size matrix for visual QA */
export const CompleteMatrix: Story = {
  name: 'Complete Matrix',
  render: () => {
    const colors = ['default', 'brand', 'success', 'warning', 'error', 'info'] as const;

    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        {(['soft', 'filled'] as const).map((variant) => (
          <div key={variant}>
            <div
              style={{
                marginBottom: 8,
                fontWeight: 600,
                fontSize: 14,
                textTransform: 'capitalize',
              }}
            >
              {variant}
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {(['large', 'medium', 'small'] as const).map((size) => (
                <div key={size} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <span style={{ width: 60, fontSize: 12, color: '#737373' }}>{size}</span>
                  {colors.map((color) => (
                    <Badge
                      key={color}
                      variant={variant}
                      color={color}
                      size={size}
                      icon={<StarIcon />}
                    >
                      {color}
                    </Badge>
                  ))}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  },
};
