import type { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';
import { VenueServicesStep } from './VenueServicesStep';
import type {
  VenueServicesVenue,
  VenueServiceOption,
  VenueServiceNotice,
  VenueServicesStepValues,
} from './VenueServicesStep';
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: VenueServicesVenue = {
  name: 'Palmdale Memorial Park Hillside Chapel',
  imageUrl: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&h=600&fit=crop',
  location: 'Palmdale Road, Palmdale, NSW, 2258',
  venueType: 'Chapel',
};

const sampleServices: VenueServiceOption[] = [
  {
    id: 'life-story-family',
    name: 'Life Story Created By Family',
    description:
      'Some families have the capability and would feel more comfortable to prepare the Life Story Presentation themselves. To achieve a seamless funeral experience, we ask that you create the video with the following specifications:\n\n\u2022 Create the video in MP4 format.\n\u2022 Have a Title Page with text such as \u2018In Loving Memory Of...\u2019. Place the Title Page at the front and the back of the video so we can pause the video on this after the video has played in the funeral service.\n\u2022 Please synchronise your choice of music to the length of the video presentation.\n\u2022 Send the video to us via Dropbox at least 24 hours prior to the video service so we can test it on our equipment.',
  },
  {
    id: 'essential-life-story',
    name: 'Essential Life Story',
    description:
      'Photos evoke fond memories. Set them to music to create a moving tribute for your loved one that you and your family can cherish forever. Our team will work with you to select the perfect photos and music to celebrate their life.',
    price: 290,
  },
  {
    id: 'premium-life-story',
    name: 'Premium Life Story Presentation',
    description:
      'An enhanced presentation with video clips, custom transitions, and professional narration. Includes up to 100 photos and 3 video clips, with a dedicated editor who will work closely with you to create something truly special.',
    price: 590,
  },
  {
    id: 'streaming',
    name: 'Livestream of Funeral Service',
    description:
      'For family and friends unable to attend in person, we offer a secure livestream of the service. A private link will be shared with your guest list. The stream is available for 48 hours after the service.',
    price: 200,
  },
  {
    id: 'recording',
    name: 'Recording of Funeral Service',
    description:
      'A professionally recorded copy of the funeral service, delivered digitally within 5 business days. Includes the full service from start to finish.',
    price: 150,
  },
];

const noStreamingNotice: VenueServiceNotice = {
  title: 'No livestreaming or recording available.',
  detail:
    'The package you have selected does not offer live streaming or video recordings for your planned funeral. Please select another package or contact Mackay Family Funerals and they will try their best to accommodate your wishes.',
};

// ─── Stateful wrapper ───────────────────────────────────────────────────────

const StatefulVenueServices = (
  props: React.ComponentProps<typeof VenueServicesStep> & {
    initialValues?: VenueServicesStepValues;
  },
) => {
  const { initialValues = {}, ...rest } = props;
  const [values, setValues] = useState<VenueServicesStepValues>(initialValues);
  return <VenueServicesStep {...rest} values={values} onChange={setValues} />;
};

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

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

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

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

/** Full services list with venue context */
export const Default: Story = {
  render: () => (
    <StatefulVenueServices
      venue={sampleVenue}
      services={sampleServices}
      values={{}}
      onChange={() => {}}
      onContinue={() => alert('Continue')}
      onBack={() => alert('Back')}
      onSaveAndExit={() => alert('Save and exit')}
      navigation={nav}
    />
  ),
};

// ─── With Notice ─────────────────────────────────────────────────────────────

/** Shows an unavailability notice for livestreaming/recording */
export const WithNotice: Story = {
  render: () => (
    <StatefulVenueServices
      venue={sampleVenue}
      services={sampleServices.filter((s) => s.id !== 'streaming' && s.id !== 'recording')}
      notices={[noStreamingNotice]}
      values={{}}
      onChange={() => {}}
      onContinue={() => alert('Continue')}
      onBack={() => alert('Back')}
      navigation={nav}
    />
  ),
};

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

/** Pre-planning variant with softer copy */
export const PrePlanning: Story = {
  render: () => (
    <StatefulVenueServices
      venue={sampleVenue}
      services={sampleServices}
      isPrePlanning
      values={{}}
      onChange={() => {}}
      onContinue={() => alert('Continue')}
      onBack={() => alert('Back')}
      navigation={nav}
    />
  ),
};

// ─── With Selections ─────────────────────────────────────────────────────────

/** Shows pre-selected services */
export const WithSelections: Story = {
  render: () => (
    <StatefulVenueServices
      venue={sampleVenue}
      services={sampleServices}
      initialValues={{
        'essential-life-story': true,
        streaming: true,
      }}
      values={{}}
      onChange={() => {}}
      onContinue={() => alert('Continue')}
      onBack={() => alert('Back')}
      onSaveAndExit={() => alert('Save and exit')}
      navigation={nav}
    />
  ),
};

// ─── Minimal ─────────────────────────────────────────────────────────────────

/** Venue with no image and few services */
export const Minimal: Story = {
  render: () => (
    <StatefulVenueServices
      venue={{
        name: 'Community Hall',
        location: 'Parramatta, NSW',
      }}
      services={[
        {
          id: 'photo',
          name: 'Photo Presentation',
          description: 'Display a photo slideshow during the service.',
          price: 150,
        },
      ]}
      values={{}}
      onChange={() => {}}
      onContinue={() => alert('Continue')}
      onBack={() => alert('Back')}
      navigation={nav}
    />
  ),
};
