import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { UnverifiedPackageT2 } from './UnverifiedPackageT2';
import type {
  UnverifiedPackageT2Data,
  UnverifiedPackageT2Provider,
  NearbyVerifiedPackage,
} from './UnverifiedPackageT2';
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' },
      { label: 'Log in', href: '/login' },
    ]}
  />
);

const mockProvider: UnverifiedPackageT2Provider = {
  name: 'H.Parsons Funeral Directors',
  location: 'Wentworth, NSW',
  rating: 4.6,
  reviewCount: 7,
};

const mockPackages: UnverifiedPackageT2Data[] = [
  {
    id: 'everyday',
    name: 'Everyday Funeral Package',
    price: 2700,
    description:
      'A funeral service at a chapel or church with a funeral procession, including commonly selected options.',
  },
  {
    id: 'deluxe',
    name: 'Deluxe Funeral Package',
    price: 4900,
    description: 'A comprehensive package with premium inclusions and expanded service options.',
  },
  {
    id: 'catholic',
    name: 'Catholic Service',
    price: 3200,
    description:
      'Tailored for Catholic funeral traditions including a Requiem Mass and graveside prayers.',
  },
];

const nearbyVerifiedPackages: NearbyVerifiedPackage[] = [
  {
    id: 'rankins-standard',
    packageName: 'Standard Cremation Package',
    price: 2450,
    providerName: 'Rankins Funerals',
    location: 'Warrawong, NSW',
    rating: 4.8,
    reviewCount: 23,
  },
  {
    id: 'easy-essential',
    packageName: 'Essential Funeral Service',
    price: 1950,
    providerName: 'Easy Funerals',
    location: 'Sydney, NSW',
    rating: 4.5,
    reviewCount: 42,
  },
  {
    id: 'killick-classic',
    packageName: 'Classic Farewell Package',
    price: 3100,
    providerName: 'Killick Family Funerals',
    location: 'Shellharbour, NSW',
    rating: 4.9,
    reviewCount: 15,
  },
];

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

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

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

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

/** Select a package to see the "Itemised Pricing Unavailable" detail panel */
export const Default: Story = {
  render: () => {
    const [selectedId, setSelectedId] = useState<string | null>(null);

    return (
      <UnverifiedPackageT2
        provider={mockProvider}
        packages={mockPackages}
        nearbyPackages={nearbyVerifiedPackages}
        selectedPackageId={selectedId}
        onSelectPackage={setSelectedId}
        onArrange={() => alert('Make an enquiry')}
        onNearbyPackageClick={(id) => alert(`View nearby package: ${id}`)}
        onProviderClick={() => alert('Open provider profile')}
        onBack={() => alert('Back')}
        navigation={nav}
      />
    );
  },
};

// ─── With selection ─────────────────────────────────────────────────────────

/** Package selected — detail panel shows price + unavailable notice */
export const WithSelection: Story = {
  render: () => {
    const [selectedId, setSelectedId] = useState<string | null>('everyday');

    return (
      <UnverifiedPackageT2
        provider={mockProvider}
        packages={mockPackages}
        nearbyPackages={nearbyVerifiedPackages}
        selectedPackageId={selectedId}
        onSelectPackage={setSelectedId}
        onArrange={() => alert('Make an enquiry')}
        onNearbyPackageClick={(id) => alert(`View nearby package: ${id}`)}
        onProviderClick={() => alert('Open provider profile')}
        onBack={() => alert('Back')}
        navigation={nav}
      />
    );
  },
};

// ─── No nearby packages ────────────────────────────────────────────────────

/** Only this provider's packages — no nearby verified section */
export const NoNearbyPackages: Story = {
  render: () => {
    const [selectedId, setSelectedId] = useState<string | null>(null);

    return (
      <UnverifiedPackageT2
        provider={mockProvider}
        packages={mockPackages}
        selectedPackageId={selectedId}
        onSelectPackage={setSelectedId}
        onArrange={() => alert('Make an enquiry')}
        onProviderClick={() => alert('Open provider profile')}
        onBack={() => alert('Back')}
        navigation={nav}
      />
    );
  },
};

// ─── Validation error ───────────────────────────────────────────────────────

/** Error shown when no package selected */
export const WithError: Story = {
  render: () => {
    const [selectedId, setSelectedId] = useState<string | null>(null);

    return (
      <UnverifiedPackageT2
        provider={mockProvider}
        packages={mockPackages}
        selectedPackageId={selectedId}
        onSelectPackage={setSelectedId}
        onArrange={() => {}}
        onBack={() => alert('Back')}
        error="Please choose a package to continue."
        navigation={nav}
      />
    );
  },
};
