import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import { ProviderMap } from './ProviderMap';
import { providers as demoProviders } from '../../../demo/shared/fixtures/providers';
import type { ProviderData } from '../../pages/ProvidersStep';

const meta: Meta<typeof ProviderMap> = {
  title: 'Organisms/ProviderMap',
  component: ProviderMap,
  parameters: {
    layout: 'fullscreen',
    docs: {
      description: {
        component:
          'Google Map showing provider pins with click-to-open popup. Uses the MapPin atom for markers and the MapPopup molecule for the popup card. Auto-fits the viewport to all providers with coords. Clicking a popup triggers `onSelectProvider`.',
      },
    },
  },
  decorators: [
    (Story) => (
      <Box sx={{ width: '100vw', height: '100vh', display: 'flex' }}>
        <Story />
      </Box>
    ),
  ],
};

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

// Cast: DemoProvider adds `tier` over ProviderData, structural subset for the map
const providers = demoProviders as ProviderData[];

// ────────────────────────────────────────────────────────────────────────────

/** All 7 demo providers with real NSW/QLD coordinates. Map fits bounds across them. */
export const Default: Story = {
  args: {
    providers,
    onSelectProvider: (id) => {
      alert(`Navigate to provider ${id}`);
    },
  },
};

/** One provider pre-selected — its pin renders in the active (inverted) state. */
export const WithSelectedProvider: Story = {
  args: {
    providers,
    selectedProviderId: 'parsons',
    onSelectProvider: (id) => {
      alert(`Navigate to provider ${id}`);
    },
  },
};

/** Interactive demo — clicking a popup clears/re-selects as if navigating. */
export const InteractiveSelection: Story = {
  render: (args) => {
    const StoryWrapper = () => {
      const [selected, setSelected] = useState<string | null>(null);
      return (
        <ProviderMap
          {...args}
          selectedProviderId={selected}
          onSelectProvider={(id) => setSelected((prev) => (prev === id ? null : id))}
        />
      );
    };
    return <StoryWrapper />;
  },
  args: {
    providers,
    onSelectProvider: () => {},
  },
};

/** Providers without coords — falls back to the "Map unavailable" empty state. */
export const NoCoords: Story = {
  args: {
    providers: providers.map(({ coords: _omit, ...p }) => p),
    onSelectProvider: () => {},
  },
};

/** No API key supplied — renders the empty state without attempting to load Google Maps. */
export const NoApiKey: Story = {
  args: {
    providers,
    apiKey: '',
    onSelectProvider: () => {},
  },
};

/** Single provider — map centres on that coord with zoom 13. */
export const SingleProvider: Story = {
  args: {
    providers: [providers[0]],
    onSelectProvider: () => {},
  },
};

/** Mixed — some providers with coords, some without. Only those with coords render. */
export const PartialCoords: Story = {
  args: {
    providers: providers.map((p, i) => (i % 2 === 0 ? p : { ...p, coords: undefined })),
    onSelectProvider: () => {},
  },
};
