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

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

const verifiedPackage: 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 unverifiedPackage: 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 recommendedPackage: 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 longNamePackage: ComparisonPackage = {
  id: 'long-name',
  name: 'Comprehensive Premium Memorial & Cremation Service Package',
  price: 12500,
  provider: {
    name: 'The Very Long Name Funeral Services & Memorial Chapel Pty Ltd',
    location: 'Wollongong',
    rating: 4.6,
    reviewCount: 87,
    verified: true,
  },
  sections: [],
};

const noRatingPackage: ComparisonPackage = {
  id: 'no-rating',
  name: 'Basic Funeral Package',
  price: 4200,
  provider: {
    name: 'New Provider',
    location: 'Sydney',
    verified: true,
  },
  sections: [],
};

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

const meta: Meta<typeof ComparisonColumnCard> = {
  title: 'Molecules/ComparisonColumnCard',
  component: ComparisonColumnCard,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 280, mx: 'auto', pt: 3 }}>
        <Story />
      </Box>
    ),
  ],
  args: {
    onArrange: (id) => alert(`Arrange: ${id}`),
    onRemove: (id) => alert(`Remove: ${id}`),
  },
};

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

/** Verified provider — floating "Verified" badge above card */
export const Verified: Story = {
  args: {
    pkg: verifiedPackage,
  },
};

/** Unverified provider — "Make Enquiry" CTA + soft button variant, no verified badge */
export const Unverified: Story = {
  args: {
    pkg: unverifiedPackage,
  },
};

/** Recommended package — copper banner, warm selected state, no Remove link */
export const Recommended: Story = {
  args: {
    pkg: recommendedPackage,
  },
};

/** Long provider name — truncated with tooltip on hover */
export const LongName: Story = {
  args: {
    pkg: longNamePackage,
  },
};

/** No rating — provider without rating/review data */
export const NoRating: Story = {
  args: {
    pkg: noRatingPackage,
  },
};

/** Side-by-side — multiple cards in a row (as used in ComparisonTable) */
export const SideBySide: Story = {
  decorators: [
    () => (
      <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, pt: 3 }}>
        <ComparisonColumnCard
          pkg={recommendedPackage}
          onArrange={(id) => alert(`Arrange: ${id}`)}
        />
        <ComparisonColumnCard
          pkg={verifiedPackage}
          onArrange={(id) => alert(`Arrange: ${id}`)}
          onRemove={(id) => alert(`Remove: ${id}`)}
        />
        <ComparisonColumnCard
          pkg={unverifiedPackage}
          onArrange={(id) => alert(`Arrange: ${id}`)}
          onRemove={(id) => alert(`Remove: ${id}`)}
        />
      </Box>
    ),
  ],
};