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

const meta: Meta<typeof MapProviderDrawer> = {
  title: 'Molecules/MapProviderDrawer',
  component: MapProviderDrawer,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
    viewport: { defaultViewport: 'mobile1' },
  },
  decorators: [
    // Simulate the mobile map-view container: fixed-size, relatively-positioned,
    // with a faux map background behind the drawer.
    (Story) => (
      <Box
        sx={{
          position: 'relative',
          width: 390,
          height: 700,
          mx: 'auto',
          overflow: 'hidden',
          // Very rough map-tile fill so the drawer has contrast behind it.
          background: 'linear-gradient(135deg, #C9DFC4 0%, #B5D4F0 50%, #C9DFC4 100%)',
        }}
      >
        <Story />
      </Box>
    ),
  ],
};

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

// ─── Fixtures ───────────────────────────────────────────────────────────────

const parsons = {
  id: 'parsons',
  name: 'H.Parsons Funeral Directors',
  location: 'Wentworth, NSW',
  verified: true,
  imageUrl: '/images/funeral-homes/parsons-chapel.jpg',
  logoUrl: '/images/providers/parsons-logo.png',
  rating: 4.6,
  reviewCount: 7,
  startingPrice: 1800,
};

const clusterProviders = [
  parsons,
  {
    id: 'rankins',
    name: 'Rankins Funeral Services',
    location: 'Warrawong, NSW',
    verified: true,
    rating: 4.8,
    startingPrice: 2450,
  },
  {
    id: 'killick',
    name: 'Killick Family Funerals',
    location: 'Kingaroy, QLD',
    verified: true,
    rating: 4.9,
    startingPrice: 3100,
  },
  {
    id: 'wollongong-city',
    name: 'Wollongong City Funerals',
    location: 'Wollongong, NSW',
    verified: false,
    rating: 4.2,
    startingPrice: 3400,
  },
];

const log =
  (label: string) =>
  (arg?: string): void => {
    console.log(label, arg ?? '');
  };

// ─── Stories ────────────────────────────────────────────────────────────────

/** Single-provider drawer — the whole ProviderCard is clickable and fires
 *  `onSelectProvider` (in production, this navigates to the packages page). */
export const SingleProvider: Story = {
  args: {
    active: {
      provider: parsons,
      cluster: null,
      exiting: false,
    },
    onClose: log('close'),
    onSelectProvider: log('select'),
    onDrillIntoProvider: log('drillInto'),
  },
};

/** Cluster drawer — verified-first list of rows. Tapping a row fires
 *  `onDrillIntoProvider`; in production this pans + zooms the map and
 *  swaps the drawer's `active` to a single-provider state. */
export const Cluster: Story = {
  args: {
    active: {
      provider: null,
      cluster: {
        providers: clusterProviders,
        position: { lat: -34.42, lng: 150.89 },
      },
      exiting: false,
    },
    onClose: log('close'),
    onSelectProvider: log('select'),
    onDrillIntoProvider: log('drillInto'),
  },
};

/** Closed state — the drawer is in the DOM but translated off-screen. */
export const Closed: Story = {
  args: {
    active: null,
    onClose: log('close'),
    onSelectProvider: log('select'),
    onDrillIntoProvider: log('drillInto'),
  },
};

/** Small cluster of two — verified pair. */
export const ClusterPair: Story = {
  args: {
    active: {
      provider: null,
      cluster: {
        providers: clusterProviders.slice(0, 2),
        position: { lat: -34.42, lng: 150.89 },
      },
      exiting: false,
    },
    onClose: log('close'),
    onSelectProvider: log('select'),
    onDrillIntoProvider: log('drillInto'),
  },
};