import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
import { MiniCard } from './MiniCard';

// Placeholder images for stories
const IMG_PROVIDER =
  'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=240&fit=crop&auto=format';
const IMG_VENUE =
  'https://images.unsplash.com/photo-1497366216548-37526070297c?w=400&h=240&fit=crop&auto=format';
const IMG_CHAPEL =
  'https://images.unsplash.com/photo-1548625149-fc4a29cf7092?w=400&h=240&fit=crop&auto=format';
const IMG_GARDEN =
  'https://images.unsplash.com/photo-1585320806297-9794b3e4eeae?w=400&h=240&fit=crop&auto=format';

const meta: Meta<typeof MiniCard> = {
  title: 'Molecules/MiniCard',
  component: MiniCard,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  decorators: [
    (Story) => (
      <Box sx={{ width: 240 }}>
        <Story />
      </Box>
    ),
  ],
};

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

/** Default mini card with title, image, and price */
export const Default: Story = {
  args: {
    title: 'H.Parsons Funeral Directors',
    imageUrl: IMG_PROVIDER,
    price: 900,
    location: 'Wollongong',
  },
};

/** With all optional fields populated */
export const FullyLoaded: Story = {
  args: {
    title: 'H.Parsons Funeral Directors',
    imageUrl: IMG_PROVIDER,
    price: 900,
    location: 'Wollongong',
    rating: 4.8,
    badges: [
      { label: 'Verified', color: 'brand', variant: 'filled', icon: <VerifiedOutlinedIcon /> },
      { label: 'Online Arrangement', color: 'success' },
    ],
    chips: ['Burial', 'Cremation'],
  },
};

/** Venue card usage — capacity instead of rating */
export const Venue: Story = {
  args: {
    title: 'Albany Creek Memorial Park',
    imageUrl: IMG_CHAPEL,
    price: 450,
    location: 'Albany Creek',
    capacity: 120,
  },
};

/** Package card usage — custom price label */
export const Package: Story = {
  args: {
    title: 'Essential Cremation Package',
    imageUrl: IMG_GARDEN,
    priceLabel: 'From $2,800',
    badges: [{ label: 'Most Popular', color: 'brand' }],
  },
};

/** Minimal — just title and image */
export const Minimal: Story = {
  args: {
    title: 'Lady Anne Funerals',
    imageUrl: IMG_VENUE,
  },
};

/** Selected state — brand border + warm background */
export const Selected: Story = {
  args: {
    title: 'H.Parsons Funeral Directors',
    imageUrl: IMG_PROVIDER,
    price: 900,
    location: 'Wollongong',
    selected: true,
  },
};

/** Long title truncated at 2 lines */
export const LongTitle: Story = {
  args: {
    title: 'Botanical Funerals by Ian Allison — Sustainable & Eco-Friendly Services',
    imageUrl: IMG_GARDEN,
    price: 1200,
    location: 'Northern Beaches',
    rating: 4.9,
  },
};

/** Multiple cards in a responsive grid */
export const Grid: Story = {
  decorators: [
    (Story) => (
      <Box
        sx={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
          gap: 2,
          width: 680,
        }}
      >
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <>
      <MiniCard
        title="H.Parsons Funeral Directors"
        imageUrl={IMG_PROVIDER}
        price={900}
        location="Wollongong"
        rating={4.8}
        badges={[
          { label: 'Verified', color: 'brand', variant: 'filled', icon: <VerifiedOutlinedIcon /> },
        ]}
        onClick={() => {}}
      />
      <MiniCard
        title="Albany Creek Memorial Park"
        imageUrl={IMG_CHAPEL}
        price={450}
        location="Albany Creek"
        capacity={120}
        onClick={() => {}}
      />
      <MiniCard
        title="Lady Anne Funerals"
        imageUrl={IMG_VENUE}
        location="Sutherland Shire"
        onClick={() => {}}
      />
    </>
  ),
};