import type { Meta, StoryObj } from '@storybook/react';
import { SummaryStep } from './SummaryStep';
import type { SummarySection, ArrangementDetails } from './SummaryStep';
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 sampleDetails: ArrangementDetails = {
  arrangerName: 'Sarah Mitchell',
  deceasedName: 'Robert Mitchell',
  serviceTradition: 'Non-denominational',
  preferredDates: ['Tuesday 15 April', 'Wednesday 16 April'],
  preferredTime: 'Morning',
  editStepId: 'date_time',
};

const sampleSections: SummarySection[] = [
  {
    id: 'provider',
    title: 'Funeral Provider',
    editStepId: 'providers',
    imageUrl: 'https://placehold.co/320x200/F5F5F0/8B8B7E?text=H.+Parsons',
    name: 'H. Parsons Funeral Directors',
    subtitle: 'Essential Service Package',
    location: 'Mackay, QLD',
    price: 4950,
  },
  {
    id: 'venue',
    title: 'Service Venue',
    editStepId: 'venue',
    imageUrl: 'https://placehold.co/320x200/F5F5F0/8B8B7E?text=West+Chapel',
    name: 'West Chapel',
    location: 'Strathfield, NSW',
    price: 900,
    items: [
      { label: 'Photo presentation', price: 150 },
      { label: 'Livestream', price: 200 },
    ],
  },
  {
    id: 'crematorium',
    title: 'Crematorium',
    editStepId: 'crematorium',
    imageUrl: 'https://placehold.co/320x200/F5F5F0/8B8B7E?text=Warrill+Park',
    name: 'Warrill Park Crematorium',
    location: 'Ipswich, QLD',
    price: 850,
  },
  {
    id: 'coffin',
    title: 'Coffin',
    editStepId: 'coffins',
    imageUrl: 'https://images.unsplash.com/photo-1618220179428-22790b461013?w=320&h=200&fit=crop',
    name: 'Richmond Rosewood Coffin',
    colourName: 'Natural Oak',
    colourHex: '#D4A76A',
    price: 1750,
    allowanceAmount: 500,
  },
  {
    id: 'included',
    title: 'Included Services',
    editStepId: 'included_services',
    items: [
      { label: 'Dressing and preparation' },
      { label: 'Viewing', value: 'Same venue' },
      { label: 'Funeral announcement' },
    ],
  },
  {
    id: 'extras',
    title: 'Optional Extras',
    editStepId: 'extras',
    items: [
      { label: 'Catering', priceLabel: 'Price on application' },
      { label: 'Live musician', value: 'Vocalist', price: 450 },
      { label: 'Coffin bearing', value: 'Family and friends' },
      { label: 'Newspaper notice', price: 250 },
    ],
  },
];

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

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

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

// ─── At-need (default) ──────────────────────────────────────────────────────

/** Full summary for at-need flow with allowances */
export const Default: Story = {
  render: () => (
    <SummaryStep
      arrangementDetails={sampleDetails}
      sections={sampleSections}
      totalPrice={9050}
      totalAllowances={500}
      onConfirm={() => alert('Confirmed — proceed to payment')}
      onBack={() => alert('Back')}
      onSaveAndExit={() => alert('Save')}
      onEdit={(stepId) => alert(`Edit: ${stepId}`)}
      onShareByEmail={(emails) => alert(`Share to: ${emails.join(', ')}`)}
      navigation={nav}
    />
  ),
};

// ─── Coffin fully covered ───────────────────────────────────────────────────

/** Coffin fully covered by allowance */
export const FullyCovered: Story = {
  render: () => {
    const sections = sampleSections.map((s) =>
      s.id === 'coffin' ? { ...s, price: 900, allowanceAmount: 1000 } : s,
    );
    return (
      <SummaryStep
        arrangementDetails={sampleDetails}
        sections={sections}
        totalPrice={7500}
        onConfirm={() => alert('Confirmed')}
        onBack={() => alert('Back')}
        onEdit={(stepId) => alert(`Edit: ${stepId}`)}
        onShareByEmail={(emails) => alert(`Share to: ${emails.join(', ')}`)}
        navigation={nav}
      />
    );
  },
};

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

/** Pre-planning variant — "Save your plan" CTA */
export const PrePlanning: Story = {
  render: () => (
    <SummaryStep
      arrangementDetails={sampleDetails}
      sections={sampleSections}
      totalPrice={9050}
      totalAllowances={500}
      onConfirm={() => alert('Plan saved')}
      onBack={() => alert('Back')}
      onEdit={(stepId) => alert(`Edit: ${stepId}`)}
      onShareByEmail={(emails) => alert(`Share to: ${emails.join(', ')}`)}
      isPrePlanning
      navigation={nav}
    />
  ),
};

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

/** Confirm button loading */
export const Loading: Story = {
  render: () => (
    <SummaryStep
      arrangementDetails={sampleDetails}
      sections={sampleSections}
      totalPrice={9050}
      onConfirm={() => {}}
      loading
      navigation={nav}
    />
  ),
};