import type { Meta, StoryObj } from '@storybook/react';
import { VenueDetailStep } from './VenueDetailStep';
import type { VenueDetail, VenueService } from './VenueDetailStep';
import { Navigation } from '../../organisms/Navigation';
import Box from '@mui/material/Box';

// ─── Helpers ─────────────────────────────────────────────────────────────────

const FALogo = () => (
  <Box sx={{ display: 'flex', alignItems: 'center' }}>
    <Box
      component="img"
      src="/brandlogo/logo-full.svg"
      alt="Funeral Arranger"
      sx={{ height: 28, display: { xs: 'none', md: 'block' } }}
    />
    <Box
      component="img"
      src="/brandlogo/logo-short.svg"
      alt="Funeral Arranger"
      sx={{ height: 28, display: { xs: 'block', md: 'none' } }}
    />
  </Box>
);

const nav = (
  <Navigation
    logo={<FALogo />}
    items={[
      { label: 'FAQ', href: '/faq' },
      { label: 'Contact Us', href: '/contact' },
    ]}
  />
);

const sampleVenue: VenueDetail = {
  id: 'west-chapel',
  name: 'West Chapel',
  imageUrl: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&h=600&fit=crop',
  images: [
    {
      src: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&h=600&fit=crop',
      alt: 'Chapel interior',
    },
    {
      src: 'https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=800&h=600&fit=crop',
      alt: 'Garden area',
    },
    {
      src: 'https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800&h=600&fit=crop',
      alt: 'Reception hall',
    },
    {
      src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=600&fit=crop',
      alt: 'Lakeside pavilion',
    },
  ],
  location: 'Strathfield',
  venueType: 'Indoor Chapel',
  capacity: 120,
  price: 900,
  priceNote: 'Selecting this venue increases your plan total by $900.00',
  description:
    'A modern chapel with natural light and flexible seating arrangements. Surrounded by established gardens with ample parking for guests. The venue features a covered portico entrance, audio-visual equipment, and climate control for year-round comfort.',
  features: [
    'Air conditioning',
    'Wheelchair accessible',
    'On-site parking',
    'Audio system',
    'Garden access',
  ],
  religions: ['No Religion', 'Civil Celebrant', 'Anglican', 'Catholic', 'Uniting Church'],
  address: '42 The Boulevarde, Strathfield NSW 2135',
};

const sampleServices: VenueService[] = [
  {
    id: 'photo',
    name: 'Photo presentation',
    description: 'Display a photo slideshow during the service',
    price: 150,
  },
  {
    id: 'streaming',
    name: 'Livestream',
    description: 'Allow family and friends to watch the service remotely',
    price: 200,
  },
  {
    id: 'recording',
    name: 'Recording',
    description: 'Receive a recording of the service to keep',
    price: 100,
  },
];

// ─── Meta ────────────────────────────────────────────────────────────────────

const meta: Meta<typeof VenueDetailStep> = {
  title: 'Pages/VenueDetailStep',
  component: VenueDetailStep,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
};

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

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

/** Full venue detail with available services */
export const Default: Story = {
  args: {
    venue: sampleVenue,
    onAddVenue: () => alert('Venue added!'),
    onBack: () => alert('Back'),
    onSaveAndExit: () => alert('Save and exit'),
    services: sampleServices,
    navigation: nav,
  },
};

// ─── Pre-planning ───────────────────────────────────────────────────────────

/** Pre-planning variant */
export const PrePlanning: Story = {
  args: {
    venue: sampleVenue,
    onAddVenue: () => alert('Venue selected!'),
    onBack: () => alert('Back'),
    services: sampleServices,
    isPrePlanning: true,
    navigation: nav,
  },
};

// ─── Minimal venue ─────────────────────────────────────────────────────────

/** Venue with minimal data (no features, religions, services) */
export const Minimal: Story = {
  args: {
    venue: {
      id: 'basic',
      name: 'Community Hall',
      imageUrl: 'https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800&h=600&fit=crop',
      location: 'Parramatta',
      price: 500,
      address: '10 Church Street, Parramatta NSW 2150',
    },
    onAddVenue: () => alert('Venue added!'),
    onBack: () => alert('Back'),
    navigation: nav,
  },
};
