import type { Meta, StoryObj } from '@storybook/react';
import { ConfirmationStep } from './ConfirmationStep';
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' },
    ]}
  />
);

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

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

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

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

/** At-need confirmation — arranger will call */
export const Default: Story = {
  render: () => (
    <ConfirmationStep
      email="jane.smith@example.com"
      phone="0412 345 678"
      callbackTimeframe="within 2 hours"
      onViewPlan={() => alert('View plan')}
      nextSteps={[
        { label: 'Start detailed arrangement', onClick: () => alert('Arrangement') },
        { label: 'Go to dashboard', onClick: () => alert('Dashboard') },
      ]}
      navigation={nav}
    />
  ),
};

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

/** Pre-planning confirmation — plan saved, return anytime */
export const PrePlanning: Story = {
  render: () => (
    <ConfirmationStep
      isPrePlanning
      email="jane.smith@example.com"
      onViewPlan={() => alert('View plan')}
      nextSteps={[{ label: 'Go to dashboard', onClick: () => alert('Dashboard') }]}
      navigation={nav}
    />
  ),
};

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

/** Minimal — no next steps, no view plan */
export const Minimal: Story = {
  render: () => <ConfirmationStep email="jane.smith@example.com" navigation={nav} />,
};