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

// Placeholder images
const IMG_PROVIDER =
  'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=200&fit=crop&auto=format';
const IMG_VENUE =
  'https://images.unsplash.com/photo-1548625149-fc4a29cf7092?w=400&h=200&fit=crop&auto=format';

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

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

/** Verified provider with image, price, location, and rating */
export const VerifiedProvider: Story = {
  args: {
    name: 'H.Parsons Funeral Directors',
    imageUrl: IMG_PROVIDER,
    price: 900,
    location: 'Wollongong',
    rating: 4.8,
    verified: true,
  },
};

/** Unverified provider — no image, no badge */
export const UnverifiedProvider: Story = {
  args: {
    name: 'Smith & Sons Funeral Services',
    price: 1200,
    location: 'Sutherland',
  },
};

/** Venue popup — capacity instead of rating */
export const Venue: Story = {
  args: {
    name: 'Albany Creek Memorial Park — Garden Chapel',
    imageUrl: IMG_VENUE,
    price: 450,
    location: 'Albany Creek',
    capacity: 120,
  },
};

/** Long name — truncated at 1 line, tooltip on hover */
export const LongName: Story = {
  args: {
    name: 'Botanical Funerals by Ian Allison — Sustainable & Eco-Friendly Services',
    imageUrl: IMG_PROVIDER,
    price: 1200,
    location: 'Northern Beaches',
    verified: true,
  },
};

/** Minimal — just name */
export const Minimal: Story = {
  args: {
    name: 'Local Funeral Provider',
  },
};

/** Verified without image — inline verified indicator */
export const VerifiedNoImage: Story = {
  args: {
    name: 'H.Parsons Funeral Directors',
    price: 900,
    location: 'Wollongong',
    verified: true,
  },
};

/** Custom price label */
export const CustomPriceLabel: Story = {
  args: {
    name: 'Premium Funeral Services',
    imageUrl: IMG_PROVIDER,
    priceLabel: 'Price on application',
    location: 'Sydney CBD',
    verified: true,
  },
};

/** Pin + Popup composition — shows how they work together on a map */
export const WithPin: Story = {
  decorators: [
    (Story) => (
      <Box
        sx={{
          position: 'relative',
          width: 400,
          height: 380,
          bgcolor: '#E5E3DF',
          borderRadius: 2,
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 0.5,
        }}
      >
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <>
      <MapPopup
        name="H.Parsons Funeral Directors"
        imageUrl={IMG_PROVIDER}
        price={900}
        location="Wollongong"
        rating={4.8}
        verified
        onClick={() => {}}
      />
      <MapPin name="H.Parsons" price={900} verified active />
    </>
  ),
};