import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { CoffinDetailsStep } from './CoffinDetailsStep';
import type { CoffinProfile } from './CoffinDetailsStep';
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 sampleCoffin: CoffinProfile = {
  name: 'Richmond Rosewood Coffin',
  imageUrl: 'https://images.unsplash.com/photo-1618220179428-22790b461013?w=600&h=400&fit=crop',
  images: [
    {
      src: 'https://images.unsplash.com/photo-1618220179428-22790b461013?w=600&h=400&fit=crop',
      alt: 'Richmond Rosewood Coffin — front view',
    },
    {
      src: 'https://placehold.co/600x400/F5F5F0/8B8B7E?text=Interior+Lining',
      alt: 'Richmond Rosewood Coffin — interior',
    },
    {
      src: 'https://placehold.co/600x400/F5F5F0/8B8B7E?text=Handle+Detail',
      alt: 'Richmond Rosewood Coffin — handle detail',
    },
    {
      src: 'https://placehold.co/600x400/F5F5F0/8B8B7E?text=Side+View',
      alt: 'Richmond Rosewood Coffin — side view',
    },
  ],
  description:
    'Flat lid MDF coffin with wide mould on sides and lid, fitted with 6 silver handles with a satin trim, paper veneered wood grain finish with a gloss finish.',
  specs: [
    { label: 'Range', value: 'Custom Board' },
    { label: 'Shape', value: 'Coffin' },
    { label: 'Colour', value: 'Rosewood' },
    { label: 'Finish', value: 'Gloss' },
    { label: 'Hardware', value: 'Silver' },
  ],
  price: 1750,
  colours: [
    { id: 'natural', name: 'Natural Oak', hex: '#D4A76A' },
    { id: 'walnut', name: 'Walnut', hex: '#6B4226' },
    { id: 'ebony', name: 'Ebony', hex: '#2C2C2C' },
    { id: 'mahogany', name: 'Mahogany', hex: '#4E2728' },
    { id: 'white', name: 'White Wash', hex: '#E8E4DC' },
  ],
};

// ─── Wrapper for controlled colour state ────────────────────────────────────

const ColourWrapper: React.FC<React.ComponentProps<typeof CoffinDetailsStep>> = (props) => {
  const [selectedColourId, setSelectedColourId] = React.useState(
    props.selectedColourId ?? props.coffin.colours?.[0]?.id,
  );

  return (
    <CoffinDetailsStep
      {...props}
      selectedColourId={selectedColourId}
      onColourChange={setSelectedColourId}
    />
  );
};

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

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

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

// ─── Fully covered (allowance >= price) ─────────────────────────────────────

/** Allowance fully covers this coffin — no additional cost */
export const FullyCovered: Story = {
  render: (args) => <ColourWrapper {...args} />,
  args: {
    coffin: { ...sampleCoffin, price: 900 },
    onAddCoffin: () => alert('Add coffin'),
    onBack: () => alert('Back to coffin selection'),
    onSaveAndExit: () => alert('Save'),
    allowanceAmount: 1000,
    navigation: nav,
  },
};

// ─── Partially covered (allowance < price) ──────────────────────────────────

/** Allowance partially covers this coffin — shows additional cost */
export const PartiallyCovered: Story = {
  render: (args) => <ColourWrapper {...args} />,
  args: {
    coffin: sampleCoffin,
    onAddCoffin: () => alert('Add coffin'),
    onBack: () => alert('Back to coffin selection'),
    onSaveAndExit: () => alert('Save'),
    allowanceAmount: 500,
    navigation: nav,
  },
};

// ─── No allowance ───────────────────────────────────────────────────────────

/** No package allowance — price shown without context */
export const NoAllowance: Story = {
  render: (args) => <ColourWrapper {...args} />,
  args: {
    coffin: sampleCoffin,
    onAddCoffin: () => alert('Add coffin'),
    onBack: () => alert('Back'),
    onSaveAndExit: () => alert('Save'),
    navigation: nav,
  },
};

// ─── No colours ─────────────────────────────────────────────────────────────

/** Coffin with no colour options */
export const NoColours: Story = {
  args: {
    coffin: {
      ...sampleCoffin,
      colours: undefined,
    },
    onAddCoffin: () => alert('Add coffin'),
    onBack: () => alert('Back'),
    onSaveAndExit: () => alert('Save'),
    allowanceAmount: 500,
    navigation: nav,
  },
};

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

/** Coffin with no specs, colours, or description */
export const Minimal: Story = {
  args: {
    coffin: {
      name: 'Standard White',
      imageUrl: 'https://placehold.co/600x400/F5F5F0/8B8B7E?text=Standard+White',
      price: 1200,
    },
    onAddCoffin: () => alert('Add coffin'),
    onBack: () => alert('Back'),
    navigation: nav,
  },
};

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

/** Pre-planning variant — softer copy */
export const PrePlanning: Story = {
  render: (args) => <ColourWrapper {...args} />,
  args: {
    coffin: sampleCoffin,
    onAddCoffin: () => alert('Select coffin'),
    onBack: () => alert('Back'),
    isPrePlanning: true,
    allowanceAmount: 500,
    navigation: nav,
  },
};

// ─── Loading ────────────────────────────────────────────────────────────────

/** CTA button in loading state */
export const Loading: Story = {
  args: {
    coffin: sampleCoffin,
    onAddCoffin: () => {},
    onBack: () => alert('Back'),
    loading: true,
    allowanceAmount: 500,
    navigation: nav,
  },
};
