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

// Venue photo placeholders
const VENUE_CHAPEL =
  'https://images.unsplash.com/photo-1545128485-c400e7702796?w=600&h=300&fit=crop&auto=format';
const VENUE_GARDEN =
  'https://images.unsplash.com/photo-1510076857177-7470076d4098?w=600&h=300&fit=crop&auto=format';
const VENUE_HALL =
  'https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=600&h=300&fit=crop&auto=format';
const VENUE_CHURCH =
  'https://images.unsplash.com/photo-1438032005730-c779502df39b?w=600&h=300&fit=crop&auto=format';
const VENUE_BEACH =
  'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=600&h=300&fit=crop&auto=format';

const meta: Meta<typeof VenueCard> = {
  title: 'Molecules/VenueCard',
  component: VenueCard,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=2997-83018',
    },
  },
  argTypes: {
    name: { control: 'text' },
    location: { control: 'text' },
    imageUrl: { control: 'text' },
    capacity: { control: 'number' },
    price: { control: 'number' },
    onClick: { action: 'clicked' },
  },
  decorators: [
    (Story) => (
      <Box sx={{ width: 380 }}>
        <Story />
      </Box>
    ),
  ],
};

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

// ─── Default ────────────────────────────────────────────────────────────────

/** Default — venue with all fields */
export const Default: Story = {
  args: {
    name: 'West Chapel',
    imageUrl: VENUE_CHAPEL,
    location: 'Strathfield',
    capacity: 100,
    price: 900,
  },
};

// ─── List Layout ────────────────────────────────────────────────────────────

/**
 * Multiple venue cards in a scrollable list on neutral.50 background.
 * This is the primary use case — the venue select screen's left panel.
 */
export const ListLayout: Story = {
  name: 'List Layout',
  decorators: [
    (Story) => (
      <Box
        sx={{
          width: 400,
          maxHeight: 700,
          overflow: 'auto',
          backgroundColor: 'var(--fa-color-surface-subtle)',
          p: 2,
          borderRadius: 1,
        }}
      >
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <VenueCard
        name="West Chapel"
        imageUrl={VENUE_CHAPEL}
        location="Strathfield"
        capacity={100}
        price={900}
        onClick={() => {}}
      />
      <VenueCard
        name="Macquarie Park Memorial Gardens"
        imageUrl={VENUE_GARDEN}
        location="Macquarie Park"
        capacity={250}
        price={1200}
        onClick={() => {}}
      />
      <VenueCard
        name="Wollongong Community Hall"
        imageUrl={VENUE_HALL}
        location="Wollongong"
        capacity={300}
        price={750}
        onClick={() => {}}
      />
      <VenueCard
        name="St. Mary's Church"
        imageUrl={VENUE_CHURCH}
        location="Corrimal"
        capacity={150}
        price={600}
        onClick={() => {}}
      />
      <VenueCard
        name="Thirroul Beach Pavilion"
        imageUrl={VENUE_BEACH}
        location="Thirroul"
        capacity={80}
        price={1500}
        onClick={() => {}}
      />
    </Box>
  ),
};

// ─── Edge Cases ─────────────────────────────────────────────────────────────

/** Edge cases: long name, missing optional fields, extremes */
export const EdgeCases: Story = {
  name: 'Edge Cases',
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      {/* Long name — tests maxLines truncation */}
      <VenueCard
        name="The Most Honourable Memorial Gardens and Reception Centre of Greater Wollongong"
        imageUrl={VENUE_GARDEN}
        location="Wollongong"
        capacity={500}
        price={2500}
        onClick={() => {}}
      />
      {/* No capacity */}
      <VenueCard
        name="Private Residence"
        imageUrl={VENUE_CHAPEL}
        location="Austinmer"
        price={0}
        onClick={() => {}}
      />
      {/* No price */}
      <VenueCard
        name="Price On Application"
        imageUrl={VENUE_HALL}
        location="Sydney CBD"
        capacity={400}
        onClick={() => {}}
      />
      {/* Minimal — just name, image, location */}
      <VenueCard name="Minimal Venue" imageUrl={VENUE_BEACH} location="Kiama" onClick={() => {}} />
    </Box>
  ),
};

// ─── Responsive ─────────────────────────────────────────────────────────────

/** Cards at different viewport widths */
export const Responsive: Story = {
  decorators: [
    (Story) => (
      <Box sx={{ width: 'auto' }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', gap: 3, alignItems: 'start', flexWrap: 'wrap' }}>
      {[280, 340, 420].map((width) => (
        <Box key={width} sx={{ width }}>
          <Box sx={{ mb: 1, fontSize: 12, color: 'text.secondary' }}>{width}px</Box>
          <VenueCard
            name="West Chapel"
            imageUrl={VENUE_CHAPEL}
            location="Strathfield"
            capacity={100}
            price={900}
            onClick={() => {}}
          />
        </Box>
      ))}
    </Box>
  ),
};

// ─── On Different Backgrounds ───────────────────────────────────────────────

/** Cards on white vs grey surfaces */
export const OnDifferentBackgrounds: Story = {
  name: 'On Different Backgrounds',
  decorators: [
    (Story) => (
      <Box sx={{ width: 'auto' }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', gap: 3 }}>
      <Box sx={{ width: 360, p: 3, backgroundColor: 'background.default' }}>
        <Box sx={{ mb: 1, fontSize: 12, color: 'text.secondary' }}>White surface</Box>
        <VenueCard
          name="West Chapel"
          imageUrl={VENUE_CHAPEL}
          location="Strathfield"
          capacity={100}
          price={900}
          onClick={() => {}}
        />
      </Box>
      <Box
        sx={{
          width: 360,
          p: 3,
          backgroundColor: 'var(--fa-color-surface-subtle)',
        }}
      >
        <Box sx={{ mb: 1, fontSize: 12, color: 'text.secondary' }}>Grey surface (neutral.50)</Box>
        <VenueCard
          name="Macquarie Park Gardens"
          imageUrl={VENUE_GARDEN}
          location="Macquarie Park"
          capacity={250}
          price={1200}
          onClick={() => {}}
        />
      </Box>
    </Box>
  ),
};

// ─── Interactive Demo ───────────────────────────────────────────────────────

/** Click any card — fires onClick in Storybook actions panel */
export const InteractiveDemo: Story = {
  name: 'Interactive — Click to Select',
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <VenueCard
        name="West Chapel"
        imageUrl={VENUE_CHAPEL}
        location="Strathfield"
        capacity={100}
        price={900}
        onClick={() => alert('Selected: West Chapel')}
      />
      <VenueCard
        name="Macquarie Park Memorial Gardens"
        imageUrl={VENUE_GARDEN}
        location="Macquarie Park"
        capacity={250}
        price={1200}
        onClick={() => alert('Selected: Macquarie Park')}
      />
    </Box>
  ),
};
