import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import { CartButton } from './CartButton';
import { StepIndicator } from '../StepIndicator';
import type { CartItem } from './CartButton';

const sampleItems: CartItem[] = [
  { section: 'Funeral Provider', name: 'H. Parsons — Essential Package', price: 4950 },
  { section: 'Service Venue', name: 'West Chapel', price: 900 },
  { section: 'Service Venue', name: 'Photo presentation', price: 150 },
  { section: 'Crematorium', name: 'Warrill Park Crematorium', price: 850 },
  { section: 'Coffin', name: 'Richmond Rosewood', price: 1750 },
  { section: 'Optional Extras', name: 'Live musician — Vocalist', price: 450 },
  { section: 'Optional Extras', name: 'Catering', priceLabel: 'Price on application' },
];

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

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

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

/** Full cart with multiple sections */
export const Default: Story = {
  args: {
    total: 9050,
    items: sampleItems,
  },
};

// ─── Empty ──────────────────────────────────────────────────────────────────

/** Empty plan — no items selected yet */
export const Empty: Story = {
  args: {
    total: 0,
    items: [],
  },
};

// ─── Single item ────────────────────────────────────────────────────────────

/** Just the package selected */
export const SingleItem: Story = {
  args: {
    total: 4950,
    items: [{ section: 'Funeral Provider', name: 'H. Parsons — Essential Package', price: 4950 }],
  },
};

// ─── In progress bar context ────────────────────────────────────────────────

/** How it looks inside the wizard progress bar */
export const InProgressBar: Story = {
  render: () => (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        gap: 2,
        width: '100%',
        maxWidth: 900,
        borderBottom: '1px solid',
        borderColor: 'divider',
        bgcolor: 'background.paper',
        px: 4,
        py: 1.5,
      }}
    >
      <Box sx={{ flex: 1 }}>
        <StepIndicator
          steps={[
            { label: 'Details' },
            { label: 'Venues' },
            { label: 'Coffins' },
            { label: 'Extras' },
            { label: 'Review' },
          ]}
          currentStep={2}
        />
      </Box>
      <CartButton total={6700} items={sampleItems.slice(0, 4)} />
    </Box>
  ),
  parameters: {
    layout: 'padded',
  },
};
