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 — promoted brand palette (dark copper bg, white text) */
export const Verified: Story = {
  args: {
    name: 'H.Parsons Funeral Directors',
    price: 900,
    verified: true,
  },
};

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

/** Custom price label (e.g. "POA" for providers without a fixed starting price) */
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 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" price={1600} onClick={() => {}} />
      </Box>
    </>
  ),
};
