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

const meta: Meta<typeof ServiceOption> = {
  title: 'Molecules/ServiceOption',
  component: ServiceOption,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=2349-39505',
    },
  },
  argTypes: {
    name: { control: 'text' },
    description: { control: 'text' },
    price: { control: 'number' },
    selected: { control: 'boolean' },
    disabled: { control: 'boolean' },
    onClick: { action: 'clicked' },
  },
  decorators: [
    (Story) => (
      <Box sx={{ width: 500 }}>
        <Story />
      </Box>
    ),
  ],
};

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

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

export const Default: Story = {
  args: {
    name: 'Traditional Burial',
    description:
      'Full service with chapel ceremony and graveside committal. Includes hearse, pallbearers, and flowers.',
    price: 4200,
  },
};

// ─── Selected ───────────────────────────────────────────────────────────────

export const Selected: Story = {
  args: {
    name: 'Traditional Burial',
    description:
      'Full service with chapel ceremony and graveside committal. Includes hearse, pallbearers, and flowers.',
    price: 4200,
    selected: true,
  },
};

// ─── Service Type Selection ─────────────────────────────────────────────────

/**
 * Interactive single-select group — click to choose a service type.
 * Only one option is active at a time (radio semantics).
 */
export const ServiceTypeSelection: Story = {
  name: 'Service Type Selection',
  render: () => {
    const [selected, setSelected] = useState('burial');

    return (
      <Box
        role="radiogroup"
        aria-label="Service type"
        sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}
      >
        <ServiceOption
          name="Traditional Burial"
          description="Full service with chapel ceremony and graveside committal. Includes hearse, pallbearers, and flowers."
          price={4200}
          selected={selected === 'burial'}
          onClick={() => setSelected('burial')}
        />
        <ServiceOption
          name="Cremation"
          description="Chapel service followed by cremation. Ashes returned in selected urn within 5 business days."
          price={2800}
          selected={selected === 'cremation'}
          onClick={() => setSelected('cremation')}
        />
        <ServiceOption
          name="Direct Cremation"
          description="No service — cremation handled directly. Most affordable option for families who prefer a private farewell."
          price={1200}
          selected={selected === 'direct'}
          onClick={() => setSelected('direct')}
        />
      </Box>
    );
  },
};

// ─── Coffin Selection ───────────────────────────────────────────────────────

/** Coffin/casket options with varied pricing */
export const CoffinSelection: Story = {
  name: 'Coffin Selection',
  render: () => {
    const [selected, setSelected] = useState('');

    return (
      <Box
        role="radiogroup"
        aria-label="Coffin type"
        sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}
      >
        <ServiceOption
          name="Chipboard Coffin"
          description="Simple, dignified option. Suitable for cremation or burial."
          price={450}
          selected={selected === 'chipboard'}
          onClick={() => setSelected('chipboard')}
        />
        <ServiceOption
          name="Solid Timber Coffin"
          description="Handcrafted from sustainable Australian hardwood with brass handles."
          price={1800}
          selected={selected === 'timber'}
          onClick={() => setSelected('timber')}
        />
        <ServiceOption
          name="Premium Casket"
          description="Full-lined steel casket with satin interior and personalised nameplate."
          price={3500}
          selected={selected === 'premium'}
          onClick={() => setSelected('premium')}
        />
        <ServiceOption
          name="Eco-Friendly"
          description="Biodegradable wicker or cardboard. Ideal for natural burials."
          price={650}
          selected={selected === 'eco'}
          onClick={() => setSelected('eco')}
        />
      </Box>
    );
  },
};

// ─── Without Price ──────────────────────────────────────────────────────────

/** Options without prices — used when pricing varies or is bundled */
export const WithoutPrice: Story = {
  name: 'Without Price',
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
      <ServiceOption
        name="Morning Service"
        description="9:00 AM – 12:00 PM. Preferred for traditional ceremonies."
        onClick={() => {}}
      />
      <ServiceOption
        name="Afternoon Service"
        description="1:00 PM – 4:00 PM. Most popular time slot."
        selected
        onClick={() => {}}
      />
      <ServiceOption
        name="Evening Service"
        description="5:00 PM – 7:00 PM. Available at select venues."
        onClick={() => {}}
      />
    </Box>
  ),
};

// ─── Disabled ───────────────────────────────────────────────────────────────

/** Disabled option — unavailable service */
export const Disabled: Story = {
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
      <ServiceOption
        name="Chapel Service"
        description="Traditional chapel ceremony with seating for up to 100 guests."
        price={800}
        onClick={() => {}}
      />
      <ServiceOption
        name="Beach Ceremony"
        description="Currently unavailable due to council restrictions."
        price={600}
        disabled
      />
      <ServiceOption
        name="Garden Service"
        description="Outdoor ceremony in landscaped memorial gardens."
        price={900}
        onClick={() => {}}
      />
    </Box>
  ),
};

// ─── With Line Limit ────────────────────────────────────────────────────────

/** Clamped descriptions with "View more" toggle */
export const WithLineLimit: Story = {
  name: 'With Line Limit',
  render: () => {
    const [selected, setSelected] = useState('');

    return (
      <Box
        role="radiogroup"
        aria-label="Service type"
        sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}
      >
        <ServiceOption
          name="Complete Funeral Package"
          description="This comprehensive package covers everything from initial collection through to the memorial service. Includes hearse, funeral director coordination, venue hire, catering for up to 50 guests, memorial booklets, and a dedicated family liaison throughout the process."
          price={8500}
          maxDescriptionLines={2}
          selected={selected === 'complete'}
          onClick={() => setSelected('complete')}
        />
        <ServiceOption
          name="Cremation"
          description="Chapel service followed by cremation."
          price={2800}
          maxDescriptionLines={2}
          selected={selected === 'cremation'}
          onClick={() => setSelected('cremation')}
        />
      </Box>
    );
  },
};

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

/** Edge cases: long text, no description, high price */
export const EdgeCases: Story = {
  name: 'Edge Cases',
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
      {/* Long name + description */}
      <ServiceOption
        name="Complete Funeral Package Including Transport, Venue, Catering, and Memorial"
        description="This comprehensive package covers everything from initial collection through to the memorial service. Includes hearse, funeral director coordination, venue hire, catering for up to 50 guests, memorial booklets, and a dedicated family liaison throughout the process."
        price={8500}
        onClick={() => {}}
      />
      {/* No description */}
      <ServiceOption name="Flowers" price={250} selected onClick={() => {}} />
      {/* No price, no description */}
      <ServiceOption name="Contact us for pricing" onClick={() => {}} />
    </Box>
  ),
};
