import type { Meta, StoryObj } from '@storybook/react';
import Box from '@mui/material/Box';
import { ComparisonTabCard } from './ComparisonTabCard';
import type { ComparisonPackage } from '../../organisms/ComparisonTable';

// ─── Mock data ──────────────────────────────────────────────────────────────

const verifiedPkg: ComparisonPackage = {
  id: 'wollongong-everyday',
  name: 'Everyday Funeral Package',
  price: 6966,
  provider: {
    name: 'Wollongong City Funerals',
    location: 'Wollongong',
    rating: 4.8,
    reviewCount: 122,
    verified: true,
  },
  sections: [],
};

const recommendedPkg: ComparisonPackage = {
  id: 'recommended-premium',
  name: 'Premium Cremation Service',
  price: 8450,
  provider: {
    name: 'H. Parsons Funeral Directors',
    location: 'Wentworth',
    rating: 4.9,
    reviewCount: 203,
    verified: true,
  },
  sections: [],
  isRecommended: true,
};

const unverifiedPkg: ComparisonPackage = {
  id: 'inglewood-everyday',
  name: 'Everyday Funeral Package',
  price: 7200,
  provider: {
    name: 'Inglewood Chapel',
    location: 'Inglewood',
    rating: 4.2,
    reviewCount: 45,
    verified: false,
  },
  sections: [],
};

const longNamePkg: ComparisonPackage = {
  id: 'long-name',
  name: 'Comprehensive Premium Memorial & Cremation Service',
  price: 12500,
  provider: {
    name: 'The Very Long Name Funeral Services Pty Ltd',
    location: 'Wollongong',
    rating: 4.6,
    reviewCount: 87,
    verified: true,
  },
  sections: [],
};

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

const meta: Meta<typeof ComparisonTabCard> = {
  title: 'Molecules/ComparisonTabCard',
  component: ComparisonTabCard,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  args: {
    isActive: false,
    hasRecommended: false,
    tabId: 'tab-0',
    tabPanelId: 'panel-0',
    onClick: () => alert('Tab clicked'),
  },
};

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

/** Default inactive tab card */
export const Default: Story = {
  args: { pkg: verifiedPkg },
};

/** Active/selected state — elevated shadow */
export const Active: Story = {
  args: { pkg: verifiedPkg, isActive: true },
};

/** Recommended — badge + brand glow */
export const Recommended: Story = {
  args: { pkg: recommendedPkg, hasRecommended: true },
};

/** Recommended + active */
export const RecommendedActive: Story = {
  args: { pkg: recommendedPkg, isActive: true, hasRecommended: true },
};

/** Long name — truncated with ellipsis */
export const LongName: Story = {
  args: { pkg: longNamePkg },
};

/** Rail simulation — multiple cards as they appear in the mobile tab rail */
export const Rail: Story = {
  decorators: [
    () => (
      <Box
        sx={{
          display: 'flex',
          gap: 1.5,
          overflowX: 'auto',
          py: 2,
          px: 2,
        }}
      >
        <ComparisonTabCard
          pkg={recommendedPkg}
          isActive={false}
          hasRecommended
          tabId="tab-0"
          tabPanelId="panel-0"
          onClick={() => alert('Recommended')}
        />
        <ComparisonTabCard
          pkg={verifiedPkg}
          isActive
          hasRecommended
          tabId="tab-1"
          tabPanelId="panel-1"
          onClick={() => alert('Wollongong')}
        />
        <ComparisonTabCard
          pkg={unverifiedPkg}
          isActive={false}
          hasRecommended
          tabId="tab-2"
          tabPanelId="panel-2"
          onClick={() => alert('Inglewood')}
        />
      </Box>
    ),
  ],
};
