import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { PaymentStep } from './PaymentStep';
import type { PaymentStepValues, PaymentStepErrors } from './PaymentStep';
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 defaultValues: PaymentStepValues = {
  paymentPlan: null,
  paymentMethod: null,
  termsAccepted: false,
};

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

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

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

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

/** Full interactive payment flow */
export const Default: Story = {
  render: () => {
    const [values, setValues] = useState<PaymentStepValues>({ ...defaultValues });
    const [errors, setErrors] = useState<PaymentStepErrors>({});

    const handleConfirm = () => {
      const newErrors: PaymentStepErrors = {};
      if (!values.paymentPlan) newErrors.paymentPlan = 'Please choose a payment option.';
      if (!values.paymentMethod) newErrors.paymentMethod = 'Please choose a payment method.';
      if (!values.termsAccepted)
        newErrors.termsAccepted = 'Please review and accept the service agreement to continue.';
      setErrors(newErrors);
      if (Object.keys(newErrors).length === 0) alert('Payment confirmed!');
    };

    return (
      <PaymentStep
        values={values}
        onChange={(v) => {
          setValues(v);
          setErrors({});
        }}
        onConfirmPayment={handleConfirm}
        onBack={() => alert('Back to summary')}
        errors={errors}
        totalPrice={9850}
        depositAmount={2000}
        navigation={nav}
      />
    );
  },
};

// ─── Card selected ──────────────────────────────────────────────────────────

/** Card payment selected — shows payment form placeholder */
export const CardPayment: Story = {
  render: () => {
    const [values, setValues] = useState<PaymentStepValues>({
      paymentPlan: 'full',
      paymentMethod: 'Card',
      termsAccepted: false,
    });
    return (
      <PaymentStep
        values={values}
        onChange={setValues}
        onConfirmPayment={() => alert('Confirm')}
        onBack={() => alert('Back')}
        totalPrice={9850}
        navigation={nav}
      />
    );
  },
};

// ─── Bank transfer selected ─────────────────────────────────────────────────

/** Bank transfer selected — shows account details */
export const BankTransfer: Story = {
  render: () => {
    const [values, setValues] = useState<PaymentStepValues>({
      paymentPlan: 'deposit',
      paymentMethod: 'Bank',
      termsAccepted: true,
    });
    return (
      <PaymentStep
        values={values}
        onChange={setValues}
        onConfirmPayment={() => alert('Confirm')}
        onBack={() => alert('Back')}
        totalPrice={9850}
        depositAmount={2000}
        navigation={nav}
      />
    );
  },
};

// ─── Validation errors ──────────────────────────────────────────────────────

/** All errors showing */
export const WithErrors: Story = {
  render: () => {
    const [values, setValues] = useState<PaymentStepValues>({ ...defaultValues });
    return (
      <PaymentStep
        values={values}
        onChange={setValues}
        onConfirmPayment={() => {}}
        errors={{
          paymentPlan: 'Please choose a payment option.',
          paymentMethod: 'Please choose a payment method.',
          termsAccepted: 'Please review and accept the service agreement to continue.',
        }}
        totalPrice={9850}
        navigation={nav}
      />
    );
  },
};

// ─── Processing ─────────────────────────────────────────────────────────────

/** Payment processing */
export const Processing: Story = {
  render: () => {
    const [values, setValues] = useState<PaymentStepValues>({
      paymentPlan: 'full',
      paymentMethod: 'Card',
      termsAccepted: true,
    });
    return (
      <PaymentStep
        values={values}
        onChange={setValues}
        onConfirmPayment={() => {}}
        loading
        totalPrice={9850}
        navigation={nav}
      />
    );
  },
};
