import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import { PackageDetail } from './PackageDetail';
import { ServiceOption } from '../../molecules/ServiceOption';
import { ProviderCardCompact } from '../../molecules/ProviderCardCompact';
import { Chip } from '../../atoms/Chip';
import { Typography } from '../../atoms/Typography';
import { Button } from '../../atoms/Button';
import { Navigation } from '../Navigation';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';

const DEMO_IMAGE =
  'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=400&h=300&fit=crop';

const essentials = [
  {
    name: 'Accommodation',
    price: 1500,
    info: 'Refrigerated holding of the deceased prior to the funeral service.',
  },
  {
    name: 'Death Registration Certificate',
    price: 1500,
    info: 'Lodgement of death registration with NSW Registry of Births, Deaths & Marriages.',
  },
  {
    name: 'Doctor Fee for Cremation',
    price: 1500,
    info: 'Statutory medical referee fee required for all cremations in NSW.',
  },
  {
    name: 'NSW Government Levy — Cremation',
    price: 1500,
    info: 'NSW Government cremation levy as set by the Department of Health.',
  },
  {
    name: 'Professional Mortuary Care',
    price: 1500,
    info: 'Preparation and care of the deceased.',
  },
  {
    name: 'Professional Service Fee',
    price: 1500,
    info: 'Coordination of all funeral arrangements and services.',
  },
  {
    name: 'Allowance for Coffin',
    price: 1500,
    isAllowance: true,
    info: 'Allowance amount — upgrade options available during arrangement.',
  },
  {
    name: 'Allowance for Crematorium',
    price: 1500,
    isAllowance: true,
    info: 'Allowance for crematorium fees — varies by location.',
  },
  {
    name: 'Allowance for Hearse',
    price: 1500,
    isAllowance: true,
    info: 'Allowance for hearse transfer — distance surcharges may apply.',
  },
];

const complimentary = [
  {
    name: 'Dressing Fee',
    info: 'Dressing and preparation of the deceased — included at no charge.',
  },
  { name: 'Viewing Fee', info: 'One private family viewing — included at no charge.' },
];

const extras = {
  heading: 'Extras',
  items: [
    {
      name: 'Allowance for Flowers',
      price: 1500,
      isAllowance: true,
      info: 'Seasonal floral arrangements for the service.',
    },
    {
      name: 'Allowance for Master of Ceremonies',
      price: 1500,
      isAllowance: true,
      info: 'Professional celebrant or MC for the funeral service.',
    },
    {
      name: 'After Business Hours Service Surcharge',
      price: 1500,
      info: 'Additional fee for services held outside standard business hours.',
    },
    {
      name: 'After Hours Prayers',
      price: 1500,
      info: 'Evening prayer service at the funeral home.',
    },
    {
      name: 'Coffin Bearing by Funeral Directors',
      price: 1500,
      info: 'Professional pallbearing by funeral directors.',
    },
    {
      name: 'Digital Recording',
      price: 1500,
      info: 'Professional video recording of the funeral service.',
    },
  ],
};

const termsText =
  '* This package includes a funeral service at a chapel or a church with a funeral procession following to the crematorium. It includes many of the most commonly selected funeral options preselected for you. Many people choose this package for the extended funeral rituals — of course, you can tailor the funeral service to meet your needs and budget as you go through the selections.';

const packages = [
  {
    id: 'everyday',
    name: 'Everyday Funeral Package',
    price: 900,
    description:
      'Our most popular package with all essential services included. Suitable for a traditional chapel or church service.',
  },
  {
    id: 'deluxe',
    name: 'Deluxe Funeral Package',
    price: 1200,
    description: 'An enhanced package with premium coffin and additional floral arrangements.',
  },
  {
    id: 'essential',
    name: 'Essential Funeral Package',
    price: 600,
    description: 'A simple, dignified service covering all necessary arrangements.',
  },
  {
    id: 'catholic',
    name: 'Catholic Service',
    price: 950,
    description:
      'A service tailored for Catholic traditions including prayers and church ceremony.',
  },
];

const funeralTypes = ['All', 'Cremation', 'Burial', 'Memorial', 'Catholic', 'Direct Cremation'];

const FALogoNav = () => (
  <Box component="img" src="/brandlogo/logo-full.svg" alt="Funeral Arranger" sx={{ height: 28 }} />
);

const meta: Meta<typeof PackageDetail> = {
  title: 'Organisms/PackageDetail',
  component: PackageDetail,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 600, width: '100%' }}>
        <Story />
      </Box>
    ),
  ],
};

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

// --- Default -----------------------------------------------------------------

/** Full package detail panel — Essentials, Complimentary, Total, then Extras */
export const Default: Story = {
  args: {
    name: 'Everyday Funeral Package',
    price: 900,
    sections: [
      { heading: 'Essentials', items: essentials },
      { heading: 'Complimentary Items', items: complimentary },
    ],
    total: 2700,
    extras,
    terms: termsText,
    onArrange: () => alert('Make Arrangement clicked'),
    onCompare: () => alert('Compare clicked'),
  },
};

// --- Compare Loading ---------------------------------------------------------

/** Compare button in loading state — adding to comparison cart */
export const CompareLoading: Story = {
  args: {
    name: 'Everyday Funeral Package',
    price: 900,
    sections: [{ heading: 'Essentials', items: essentials.slice(0, 4) }],
    total: 6000,
    onArrange: () => alert('Make Arrangement'),
    onCompare: () => {},
    compareLoading: true,
  },
};

// --- Without Extras ----------------------------------------------------------

/** Simpler package with essentials and complimentary only */
export const WithoutExtras: Story = {
  args: {
    name: 'Essential Funeral Package',
    price: 600,
    sections: [
      { heading: 'Essentials', items: essentials.slice(0, 6) },
      { heading: 'Complimentary Items', items: complimentary },
    ],
    total: 9000,
    terms: termsText,
    onArrange: () => alert('Make Arrangement'),
    onCompare: () => alert('Compare'),
  },
};

// --- Package Select Page Layout ----------------------------------------------

/** Full page layout — left: package list, right: detail panel */
export const PackageSelectPage: Story = {
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 'none', width: '100%' }}>
        <Story />
      </Box>
    ),
  ],
  render: () => {
    const [selectedPkg, setSelectedPkg] = useState('everyday');
    const [activeFilter, setActiveFilter] = useState('Cremation');
    const [comparing, setComparing] = useState(false);

    const handleCompare = () => {
      setComparing(true);
      setTimeout(() => setComparing(false), 1500);
    };

    return (
      <Box>
        <Navigation
          logo={<FALogoNav />}
          items={[
            { label: 'Provider Portal', href: '/provider-portal' },
            { label: 'FAQ', href: '/faq' },
            { label: 'Contact Us', href: '/contact' },
            { label: 'Log in', href: '/login' },
          ]}
        />

        <Box
          sx={{
            display: 'grid',
            gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
            gap: { xs: 3, md: 4 },
            maxWidth: 'lg',
            mx: 'auto',
            px: { xs: 2, md: 4 },
            py: { xs: 2, md: 4 },
            alignItems: 'start',
          }}
        >
          {/* Left column */}
          <Box>
            <Button
              variant="text"
              color="secondary"
              startIcon={<ArrowBackIcon />}
              sx={{ mb: 2, ml: -1 }}
            >
              Back
            </Button>

            <Typography variant="h2" sx={{ mb: 3 }}>
              Select a package
            </Typography>

            <ProviderCardCompact
              name="H.Parsons"
              location="Wentworth"
              imageUrl={DEMO_IMAGE}
              rating={4.5}
              reviewCount={11}
              sx={{ mb: 3 }}
            />

            {/* Funeral type filter */}
            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, mb: 3 }}>
              {funeralTypes.map((type) => (
                <Chip
                  key={type}
                  label={type}
                  variant={activeFilter === type ? 'filled' : 'outlined'}
                  selected={activeFilter === type}
                  onClick={() => setActiveFilter(type)}
                  size="small"
                />
              ))}
            </Box>

            <Typography variant="h4" sx={{ mb: 2 }}>
              Packages
            </Typography>

            <Box
              role="radiogroup"
              aria-label="Available packages"
              sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}
            >
              {packages.map((pkg) => (
                <ServiceOption
                  key={pkg.id}
                  name={pkg.name}
                  price={pkg.price}
                  description={pkg.description}
                  selected={selectedPkg === pkg.id}
                  onClick={() => setSelectedPkg(pkg.id)}
                  maxDescriptionLines={2}
                />
              ))}
            </Box>
          </Box>

          {/* Right column: package detail */}
          <Box sx={{ position: { md: 'sticky' }, top: { md: 96 } }}>
            <PackageDetail
              name={packages.find((p) => p.id === selectedPkg)?.name ?? ''}
              price={packages.find((p) => p.id === selectedPkg)?.price ?? 0}
              sections={[
                { heading: 'Essentials', items: essentials },
                { heading: 'Complimentary Items', items: complimentary },
              ]}
              total={2700}
              extras={extras}
              terms={termsText}
              onArrange={() => alert(`Making arrangement for: ${selectedPkg}`)}
              onCompare={handleCompare}
              compareLoading={comparing}
            />
          </Box>
        </Box>
      </Box>
    );
  },
};
