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

const meta: Meta<typeof MapPin> = {
  title: 'Atoms/MapPin',
  component: MapPin,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    backgrounds: {
      default: 'map',
      values: [{ name: 'map', value: '#E5E3DF' }],
    },
  },
  argTypes: {
    onClick: { action: 'clicked' },
  },
};

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

/** Verified provider with name and price — warm brand label */
export const VerifiedWithPrice: Story = {
  args: {
    name: 'H.Parsons Funeral Directors',
    price: 900,
    verified: true,
  },
};

/** Unverified provider — neutral grey label */
export const UnverifiedWithPrice: Story = {
  args: {
    name: 'Smith & Sons Funerals',
    price: 1200,
    verified: false,
  },
};

/** Active/selected state — inverted colours, slight scale-up */
export const Active: Story = {
  args: {
    name: 'H.Parsons Funeral Directors',
    price: 900,
    verified: true,
    active: true,
  },
};

/** Active unverified */
export const ActiveUnverified: Story = {
  args: {
    name: 'Smith & Sons Funerals',
    price: 1200,
    verified: false,
    active: true,
  },
};

/** Name only — no price line */
export const NameOnly: Story = {
  args: {
    name: 'Lady Anne Funerals',
    verified: true,
  },
};

/** Name only, unverified */
export const NameOnlyUnverified: Story = {
  args: {
    name: 'Local Funeral Services',
  },
};

/** Price-only pill — no name, verified */
export const PriceOnly: Story = {
  args: {
    price: 900,
    verified: true,
  },
};

/** Price-only pill — unverified */
export const PriceOnlyUnverified: Story = {
  args: {
    price: 1200,
  },
};

/** Price-only pill — active */
export const PriceOnlyActive: Story = {
  args: {
    price: 900,
    verified: true,
    active: true,
  },
};

/** Custom price label */
export const CustomPriceLabel: Story = {
  args: {
    name: 'Premium Services',
    priceLabel: 'POA',
    verified: true,
  },
};

/** Long name — truncated with ellipsis at 180px max */
export const LongName: Story = {
  args: {
    name: 'Botanical Funerals by Ian Allison',
    price: 1200,
    verified: true,
  },
};

/** Map simulation — multiple pins on a mock map background */
export const MapSimulation: Story = {
  decorators: [
    (Story) => (
      <Box
        sx={{
          position: 'relative',
          width: 700,
          height: 450,
          bgcolor: '#E5E3DF',
          borderRadius: 2,
          overflow: 'hidden',
        }}
      >
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <>
      {/* Verified providers */}
      <Box sx={{ position: 'absolute', top: 60, left: 80 }}>
        <MapPin name="H.Parsons" price={900} verified onClick={() => {}} />
      </Box>
      <Box sx={{ position: 'absolute', top: 150, left: 280 }}>
        <MapPin name="Lady Anne Funerals" price={1450} verified active onClick={() => {}} />
      </Box>
      <Box sx={{ position: 'absolute', top: 260, left: 140 }}>
        <MapPin name="Mackay Family" price={2200} verified onClick={() => {}} />
      </Box>

      {/* Unverified providers */}
      <Box sx={{ position: 'absolute', top: 100, left: 450 }}>
        <MapPin name="Smith & Sons" price={1100} onClick={() => {}} />
      </Box>
      <Box sx={{ position: 'absolute', top: 300, left: 400 }}>
        <MapPin name="Local Provider" onClick={() => {}} />
      </Box>

      {/* Name only verified */}
      <Box sx={{ position: 'absolute', top: 40, left: 500 }}>
        <MapPin name="Kenneallys" verified onClick={() => {}} />
      </Box>
    </>
  ),
};