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

const meta: Meta<typeof ClusterPopup> = {
  title: 'Molecules/ClusterPopup',
  component: ClusterPopup,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    backgrounds: {
      default: 'map',
      values: [{ name: 'map', value: '#E5E3DF' }],
    },
  },
  decorators: [
    (Story) => (
      <Box sx={{ p: 4 }}>
        <Story />
      </Box>
    ),
  ],
};

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

// Fixture data — mirrors the shape used in the demo
const mixedCluster = [
  {
    id: 'parsons',
    name: 'H.Parsons Funeral Directors',
    location: 'Wentworth, NSW',
    verified: true,
    rating: 4.6,
    startingPrice: 1800,
  },
  {
    id: 'rankins',
    name: 'Rankins Funeral Services',
    location: 'Warrawong, NSW',
    verified: true,
    rating: 4.8,
    startingPrice: 2450,
  },
  {
    id: 'wollongong-city',
    name: 'Wollongong City Funerals',
    location: 'Wollongong, NSW',
    verified: false,
    rating: 4.2,
    startingPrice: 3400,
  },
  {
    id: 'botanical',
    name: 'Botanical Funerals',
    location: 'Newtown, NSW',
    verified: false,
    rating: 4.9,
    startingPrice: 5200,
  },
];

/** Mixed-tier cluster — verified providers sorted to top */
export const Mixed: Story = {
  args: {
    providers: mixedCluster,
    onSelectProvider: (id) => {
      alert(`Drill into ${id}`);
    },
    onClose: () => {
      alert('Close cluster');
    },
  },
};

/** Small pair — two providers at the same location */
export const Pair: Story = {
  args: {
    providers: mixedCluster.slice(0, 2),
    onSelectProvider: () => {},
    onClose: () => {},
  },
};

/** All verified — every provider in the cluster is a partner */
export const AllVerified: Story = {
  args: {
    providers: mixedCluster.filter((p) => p.verified),
    onSelectProvider: () => {},
    onClose: () => {},
  },
};

/** All unverified — no partners in this cluster */
export const AllUnverified: Story = {
  args: {
    providers: mixedCluster.filter((p) => !p.verified),
    onSelectProvider: () => {},
    onClose: () => {},
  },
};

/** Tall cluster — scrolls when providers exceed visible area */
export const TallCluster: Story = {
  args: {
    providers: [
      ...mixedCluster,
      ...mixedCluster.map((p) => ({ ...p, id: `${p.id}-2`, name: `${p.name} (Branch 2)` })),
    ],
    onSelectProvider: () => {},
    onClose: () => {},
  },
};
