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

// Unsplash images used as stand-ins for coffin product photos
const sampleCoffins: Coffin[] = [
  {
    id: 'cedar-classic',
    name: 'Cedar Classic',
    imageUrl: 'https://images.unsplash.com/photo-1618220179428-22790b461013?w=400&h=300&fit=crop',
    thumbnails: [
      'https://images.unsplash.com/photo-1555041469-a586c1029ad9?w=80&h=60&fit=crop',
      'https://images.unsplash.com/photo-1449247709967-d4461a6a6103?w=80&h=60&fit=crop',
    ],
    price: 2800,
    category: 'Solid Timber',
    isPopular: true,
    colourCount: 3,
  },
  {
    id: 'oak-heritage',
    name: 'Oak Heritage',
    imageUrl: 'https://images.unsplash.com/photo-1555041469-a586c1029ad9?w=400&h=300&fit=crop',
    thumbnails: ['https://images.unsplash.com/photo-1618220179428-22790b461013?w=80&h=60&fit=crop'],
    price: 3500,
    category: 'Solid Timber',
    colourCount: 2,
  },
  {
    id: 'eco-willow',
    name: 'Eco Willow Basket',
    imageUrl: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop',
    price: 1200,
    category: 'Environmental',
    isPopular: true,
  },
  {
    id: 'maple-serenity',
    name: 'Maple Serenity',
    imageUrl: 'https://images.unsplash.com/photo-1449247709967-d4461a6a6103?w=400&h=300&fit=crop',
    thumbnails: [
      'https://images.unsplash.com/photo-1490750967868-88aa4f44baee?w=80&h=60&fit=crop',
      'https://images.unsplash.com/photo-1432462770865-65b70566d673?w=80&h=60&fit=crop',
      'https://images.unsplash.com/photo-1618220179428-22790b461013?w=80&h=60&fit=crop',
    ],
    price: 4200,
    category: 'Solid Timber',
    colourCount: 4,
  },
  {
    id: 'custom-rose',
    name: 'Custom Rose Garden',
    imageUrl: 'https://images.unsplash.com/photo-1490750967868-88aa4f44baee?w=400&h=300&fit=crop',
    thumbnails: ['https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=80&h=60&fit=crop'],
    price: 1800,
    category: 'Custom Board',
    colourCount: 2,
  },
  {
    id: 'bronze-eternal',
    name: 'Bronze Eternal',
    imageUrl: 'https://images.unsplash.com/photo-1432462770865-65b70566d673?w=400&h=300&fit=crop',
    price: 6500,
    category: 'Protective Metal',
  },
];

const defaultValues: CoffinsStepValues = {
  categoryFilter: 'all',
  priceRange: [0, 15000],
  sortBy: 'popularity',
  page: 1,
};

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

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

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

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

/** Grid-sidebar layout with filters, subcategories, price slider, and thumbnails */
export const Default: Story = {
  render: () => {
    const [values, setValues] = useState<CoffinsStepValues>({ ...defaultValues });

    return (
      <CoffinsStep
        values={values}
        onChange={setValues}
        onSelectCoffin={(id) => alert(`Navigate to details: ${id}`)}
        onBack={() => alert('Back')}
        onSaveAndExit={() => alert('Save')}
        coffins={sampleCoffins}
        totalCount={19}
        totalPages={2}
        allowanceAmount={500}
        navigation={nav}
      />
    );
  },
};

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

/** Pre-planning variant (no allowance — browsing only) */
export const PrePlanning: Story = {
  render: () => {
    const [values, setValues] = useState<CoffinsStepValues>({ ...defaultValues });
    return (
      <CoffinsStep
        values={values}
        onChange={setValues}
        onSelectCoffin={(id) => alert(`Navigate to details: ${id}`)}
        onBack={() => alert('Back')}
        coffins={sampleCoffins}
        isPrePlanning
        navigation={nav}
      />
    );
  },
};

// ─── With subcategory selected ──────────────────────────────────────────────

/** Subcategory selected — parent expanded, child highlighted */
export const SubcategorySelected: Story = {
  render: () => {
    const [values, setValues] = useState<CoffinsStepValues>({
      ...defaultValues,
      categoryFilter: 'cedar',
      priceRange: [2000, 5000],
    });
    return (
      <CoffinsStep
        values={values}
        onChange={setValues}
        onSelectCoffin={(id) => alert(`Navigate to details: ${id}`)}
        onBack={() => alert('Back')}
        coffins={sampleCoffins.filter((c) => c.category === 'Solid Timber')}
        totalCount={3}
        allowanceAmount={500}
        navigation={nav}
      />
    );
  },
};

// ─── Empty results ──────────────────────────────────────────────────────────

/** No coffins match filters */
export const EmptyResults: Story = {
  render: () => {
    const [values, setValues] = useState<CoffinsStepValues>({
      ...defaultValues,
      categoryFilter: 'protective_metal',
      priceRange: [0, 1000],
    });
    return (
      <CoffinsStep
        values={values}
        onChange={setValues}
        onSelectCoffin={(id) => alert(`Navigate to details: ${id}`)}
        onBack={() => alert('Back')}
        coffins={[]}
        totalCount={0}
        allowanceAmount={500}
        navigation={nav}
      />
    );
  },
};
