import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { VenueStep } from './VenueStep';
import type { Venue, VenueFilterValues, VenueSortBy, ListViewMode } from './VenueStep';
import { EMPTY_VENUE_FILTERS } from './VenueStep';
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 sampleVenues: Venue[] = [
  {
    id: 'west-chapel',
    name: 'West Chapel',
    imageUrl: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=400&h=300&fit=crop',
    location: 'Strathfield',
    capacity: 120,
    price: 900,
  },
  {
    id: 'rose-garden',
    name: 'Rose Garden Chapel',
    imageUrl: 'https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=400&h=300&fit=crop',
    location: 'Homebush',
    capacity: 80,
    price: 750,
  },
  {
    id: 'memorial-hall',
    name: 'Strathfield Memorial Hall',
    imageUrl: 'https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=400&h=300&fit=crop',
    location: 'Strathfield',
    capacity: 250,
    price: 1200,
  },
  {
    id: 'lakeside',
    name: 'Lakeside Pavilion',
    imageUrl: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop',
    location: 'Concord',
    capacity: 60,
    price: 650,
  },
];

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

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

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

// ─── Default ───────────────────────────────────────────────────────────────

/** Full filter panel — venue type, services, tradition */
export const Default: Story = {
  render: () => {
    const [search, setSearch] = useState('');
    const [filters, setFilters] = useState<VenueFilterValues>(EMPTY_VENUE_FILTERS);
    const [sort, setSort] = useState<VenueSortBy>('recommended');
    const [view, setView] = useState<ListViewMode>('list');

    return (
      <VenueStep
        venues={sampleVenues}
        onSelectVenue={(id) => alert(`Navigate to venue: ${id}`)}
        searchQuery={search}
        onSearchChange={setSearch}
        filterValues={filters}
        onFilterChange={setFilters}
        sortBy={sort}
        onSortChange={setSort}
        viewMode={view}
        onViewModeChange={setView}
        onBack={() => alert('Back')}
        locationName="Strathfield"
        navigation={nav}
      />
    );
  },
};

// ─── With active filters ────────────────────────────────────────────────────

/** Filters pre-applied — chapel + video streaming + Catholic, sorted nearest */
export const WithActiveFilters: Story = {
  render: () => {
    const [search, setSearch] = useState('Strathfield');
    const [filters, setFilters] = useState<VenueFilterValues>({
      venueTypes: ['chapel'],
      videoStreaming: true,
      photoDisplay: false,
      tradition: 'Catholic',
    });
    const [sort, setSort] = useState<VenueSortBy>('nearest');
    const [view, setView] = useState<ListViewMode>('list');

    const filtered = sampleVenues.filter((v) =>
      v.location.toLowerCase().includes(search.toLowerCase()),
    );

    return (
      <VenueStep
        venues={filtered}
        onSelectVenue={(id) => alert(`Navigate to venue: ${id}`)}
        searchQuery={search}
        onSearchChange={setSearch}
        filterValues={filters}
        onFilterChange={setFilters}
        sortBy={sort}
        onSortChange={setSort}
        viewMode={view}
        onViewModeChange={setView}
        onBack={() => alert('Back')}
        locationName="Strathfield"
        navigation={nav}
      />
    );
  },
};

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

/** Pre-planning variant copy */
export const PrePlanning: Story = {
  render: () => {
    const [search, setSearch] = useState('');
    const [filters, setFilters] = useState<VenueFilterValues>(EMPTY_VENUE_FILTERS);

    return (
      <VenueStep
        venues={sampleVenues}
        onSelectVenue={(id) => alert(`Navigate to venue: ${id}`)}
        searchQuery={search}
        onSearchChange={setSearch}
        filterValues={filters}
        onFilterChange={setFilters}
        onBack={() => alert('Back')}
        isPrePlanning
        navigation={nav}
      />
    );
  },
};

// ─── Empty state ────────────────────────────────────────────────────────────

/** No venues found */
export const NoVenues: Story = {
  render: () => {
    const [search, setSearch] = useState('Wollongong');
    const [filters, setFilters] = useState<VenueFilterValues>(EMPTY_VENUE_FILTERS);

    return (
      <VenueStep
        venues={[]}
        onSelectVenue={() => {}}
        searchQuery={search}
        onSearchChange={setSearch}
        filterValues={filters}
        onFilterChange={setFilters}
        onBack={() => alert('Back')}
        locationName="Wollongong"
        navigation={nav}
      />
    );
  },
};
