import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { ArrangementDialog } from './ArrangementDialog';
import type { DialogStep, AuthValues } from './ArrangementDialog';
import { Button } from '../../atoms/Button';
import Box from '@mui/material/Box';

// ─── Mock data ──────────────────────────────────────────────────────────────

const mockProvider = {
  name: 'H.Parsons Funeral Directors',
  location: 'Wentworth, NSW',
  imageUrl: 'https://placehold.co/600x200/E8E0D6/8B6F47?text=H.Parsons',
  rating: 4.6,
  reviewCount: 7,
};

const mockPackage = {
  name: 'Classic Funeral Package',
  price: 4500,
  total: 4500,
  sections: [
    {
      heading: 'Professional services',
      items: [
        { name: 'Funeral director services' },
        { name: 'Care and preparation' },
        { name: 'Coordination with cemetery/crematorium' },
      ],
    },
    {
      heading: 'Venue & transport',
      items: [{ name: 'Chapel service (1 hour)' }, { name: 'Hearse transport' }],
    },
    {
      heading: 'Included items',
      items: [{ name: 'Standard coffin' }, { name: 'Memorial book' }],
    },
  ],
};

const defaultAuthValues: AuthValues = {
  subStep: 'email',
  email: '',
  firstName: '',
  lastName: '',
  phone: '',
  contactPreference: 'call_anytime',
  verificationCode: '',
};

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

const meta: Meta<typeof ArrangementDialog> = {
  title: 'Organisms/ArrangementDialog',
  component: ArrangementDialog,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
};

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

// ─── Interactive (default) ──────────────────────────────────────────────────

/** Full two-step flow: preview → auth */
export const Default: Story = {
  render: () => {
    const [open, setOpen] = useState(true);
    const [step, setStep] = useState<DialogStep>('preview');
    const [authValues, setAuthValues] = useState<AuthValues>({ ...defaultAuthValues });

    return (
      <Box>
        <Button variant="contained" onClick={() => setOpen(true)}>
          Open dialog
        </Button>
        <ArrangementDialog
          open={open}
          onClose={() => setOpen(false)}
          step={step}
          onStepChange={setStep}
          provider={mockProvider}
          selectedPackage={mockPackage}
          authValues={authValues}
          onAuthChange={setAuthValues}
          onGoogleSSO={() => alert('Google SSO')}
          onMicrosoftSSO={() => alert('Microsoft SSO')}
          onContinue={() => alert('Auth complete')}
        />
      </Box>
    );
  },
};

// ─── Auth step ──────────────────────────────────────────────────────────────

/** Starting directly on the auth step */
export const AuthStep: Story = {
  render: () => {
    const [open, setOpen] = useState(true);
    const [step, setStep] = useState<DialogStep>('auth');
    const [authValues, setAuthValues] = useState<AuthValues>({ ...defaultAuthValues });

    return (
      <Box>
        <Button variant="contained" onClick={() => setOpen(true)}>
          Open dialog
        </Button>
        <ArrangementDialog
          open={open}
          onClose={() => setOpen(false)}
          step={step}
          onStepChange={setStep}
          provider={mockProvider}
          selectedPackage={mockPackage}
          authValues={authValues}
          onAuthChange={setAuthValues}
          onContinue={() => alert('Auth complete')}
        />
      </Box>
    );
  },
};

// ─── Auth with details ──────────────────────────────────────────────────────

/** Auth step with details sub-step open */
export const AuthDetails: Story = {
  render: () => {
    const [open, setOpen] = useState(true);
    const [step, setStep] = useState<DialogStep>('auth');
    const [authValues, setAuthValues] = useState<AuthValues>({
      ...defaultAuthValues,
      subStep: 'details',
      email: 'john@example.com',
    });

    return (
      <Box>
        <Button variant="contained" onClick={() => setOpen(true)}>
          Open dialog
        </Button>
        <ArrangementDialog
          open={open}
          onClose={() => setOpen(false)}
          step={step}
          onStepChange={setStep}
          provider={mockProvider}
          selectedPackage={mockPackage}
          authValues={authValues}
          onAuthChange={setAuthValues}
          onContinue={() => alert('Auth complete')}
        />
      </Box>
    );
  },
};

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

/** Pre-planning variant with "Explore other options" CTA */
export const PrePlanning: Story = {
  render: () => {
    const [open, setOpen] = useState(true);
    const [step, setStep] = useState<DialogStep>('preview');
    const [authValues, setAuthValues] = useState<AuthValues>({ ...defaultAuthValues });

    return (
      <Box>
        <Button variant="contained" onClick={() => setOpen(true)}>
          Open dialog
        </Button>
        <ArrangementDialog
          open={open}
          onClose={() => setOpen(false)}
          step={step}
          onStepChange={setStep}
          provider={mockProvider}
          selectedPackage={mockPackage}
          authValues={authValues}
          onAuthChange={setAuthValues}
          onContinue={() => alert('Auth complete')}
          isPrePlanning
          onExplore={() => {
            setOpen(false);
            alert('Exploring other options');
          }}
        />
      </Box>
    );
  },
};
