import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { AddOnOption } from './AddOnOption';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';

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

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

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

/** Default — unchecked add-on with description */
export const Default: Story = {
  args: {
    name: 'Memorial video',
    description:
      'Professional video tribute played during the service, compiled from family photos and footage.',
    price: 350,
  },
};

// ─── Checked ────────────────────────────────────────────────────────────────

/** Checked — add-on is enabled, card shows selected state */
export const Checked: Story = {
  args: {
    name: 'Memorial video',
    description:
      'Professional video tribute played during the service, compiled from family photos and footage.',
    price: 350,
    checked: true,
  },
};

// ─── Service Add-Ons ────────────────────────────────────────────────────────

/** Realistic — arrangement flow add-ons list */
export const ServiceAddOns: Story = {
  render: function Render() {
    const [addOns, setAddOns] = React.useState({
      catering: false,
      video: true,
      flowers: false,
      transport: false,
      webcast: false,
    });

    const toggle = (key: keyof typeof addOns) => (checked: boolean) =>
      setAddOns({ ...addOns, [key]: checked });

    const total = [
      addOns.catering ? 1200 : 0,
      addOns.video ? 350 : 0,
      addOns.flowers ? 280 : 0,
      addOns.transport ? 450 : 0,
      addOns.webcast ? 150 : 0,
    ].reduce((a, b) => a + b, 0);

    return (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <Typography variant="h5">Optional extras</Typography>
        <Typography variant="body2" color="text.secondary">
          Customise the service with additional options. All prices are GST inclusive.
        </Typography>

        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
          <AddOnOption
            name="Catering"
            description="Light refreshments for up to 50 guests after the service."
            price={1200}
            checked={addOns.catering}
            onChange={toggle('catering')}
          />
          <AddOnOption
            name="Memorial video"
            description="Professional video tribute compiled from family photos and footage."
            price={350}
            checked={addOns.video}
            onChange={toggle('video')}
          />
          <AddOnOption
            name="Floral arrangements"
            description="Casket spray and two standing arrangements for the chapel."
            price={280}
            checked={addOns.flowers}
            onChange={toggle('flowers')}
          />
          <AddOnOption
            name="Premium transport"
            description="Vintage hearse and one family limousine for the procession."
            price={450}
            checked={addOns.transport}
            onChange={toggle('transport')}
          />
          <AddOnOption
            name="Live webcast"
            description="Stream the service online for family and friends who cannot attend."
            price={150}
            checked={addOns.webcast}
            onChange={toggle('webcast')}
          />
        </Box>

        <Divider />

        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <Typography variant="label" color="text.secondary">
            Extras total
          </Typography>
          <Typography variant="h6" color="primary">
            ${total.toLocaleString('en-AU')}
          </Typography>
        </Box>
      </Box>
    );
  },
};

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

/** No price — some add-ons are complimentary */
export const WithoutPrice: Story = {
  args: {
    name: 'Order of service booklet',
    description:
      'Complimentary printed booklet with the service programme and a photo of your loved one.',
  },
};

// ─── Without Description ────────────────────────────────────────────────────

/** No description — compact variant for simple toggles */
export const WithoutDescription: Story = {
  render: function Render() {
    const [checked, setChecked] = React.useState(false);
    return <AddOnOption name="Include GST in pricing" checked={checked} onChange={setChecked} />;
  },
};

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

/** Disabled — add-on unavailable (e.g. venue restriction) */
export const Disabled: Story = {
  args: {
    name: 'Catering',
    description:
      'Not available at this venue. Please contact the venue directly for catering options.',
    price: 1200,
    disabled: true,
  },
};

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

/** Clamped descriptions with "View more" toggle */
export const WithLineLimit: Story = {
  render: function Render() {
    const [checks, setChecks] = React.useState({ a: false, b: true });

    return (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        <AddOnOption
          name="Premium memorial video"
          description="Our most comprehensive video tribute including on-site filmed interviews with family members, professional editing with music selection, up to 20 minutes of curated content, plus a USB copy and online streaming access for 12 months."
          price={2500}
          maxDescriptionLines={2}
          checked={checks.a}
          onChange={(v) => setChecks({ ...checks, a: v })}
        />
        <AddOnOption
          name="Floral arrangements"
          description="Casket spray and two standing arrangements."
          price={280}
          maxDescriptionLines={2}
          checked={checks.b}
          onChange={(v) => setChecks({ ...checks, b: v })}
        />
      </Box>
    );
  },
};

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

/** Edge cases — long text, high prices, missing fields */
export const EdgeCases: Story = {
  render: function Render() {
    const [checks, setChecks] = React.useState({ a: false, b: true, c: false });

    return (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
        <AddOnOption
          name="Premium memorial video with extended family interview package and professional editing"
          description="Our most comprehensive video tribute including on-site filmed interviews with family members, professional editing with music selection, up to 20 minutes of curated content, plus a USB copy and online streaming access for 12 months."
          price={2500}
          checked={checks.a}
          onChange={(v) => setChecks({ ...checks, a: v })}
        />
        <AddOnOption
          name="Flowers"
          checked={checks.b}
          onChange={(v) => setChecks({ ...checks, b: v })}
        />
        <AddOnOption
          name="Complimentary parking"
          description="Reserved parking for family vehicles at the venue."
          price={0}
          checked={checks.c}
          onChange={(v) => setChecks({ ...checks, c: v })}
        />
      </Box>
    );
  },
};
