import type { Meta, StoryObj } from '@storybook/react';
import { ProviderCard } from './ProviderCard';
import Box from '@mui/material/Box';

// Placeholder images for stories
const HERO_PLACEHOLDER =
  'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=600&h=300&fit=crop&auto=format';
const HERO_PLACEHOLDER_2 =
  'https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&h=300&fit=crop&auto=format';
const HERO_PLACEHOLDER_3 =
  'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=600&h=300&fit=crop&auto=format';
// Rounded-rect logo placeholder (matches new logo shape)
const LOGO_PLACEHOLDER =
  'data:image/svg+xml,' +
  encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><rect width="96" height="96" rx="12" fill="%23E8E8E8"/><text x="48" y="54" text-anchor="middle" font-family="sans-serif" font-size="14" fill="%23737373">Logo</text></svg>',
  );

const meta: Meta<typeof ProviderCard> = {
  title: 'Molecules/ProviderCard',
  component: ProviderCard,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/XUDUrw4yMkEexBCCYHXUvT/Parsons?node-id=5369-140263',
    },
  },
  argTypes: {
    name: { control: 'text' },
    location: { control: 'text' },
    verified: { control: 'boolean' },
    rating: { control: { type: 'number', min: 0, max: 5, step: 0.1 } },
    reviewCount: { control: 'number' },
    capabilityLabel: { control: 'text' },
    capabilityColor: {
      control: 'select',
      options: ['default', 'success', 'warning', 'error', 'info'],
    },
    capabilityDescription: { control: 'text' },
    startingPrice: { control: 'number' },
    onClick: { action: 'clicked' },
  },
  decorators: [
    (Story) => (
      <Box sx={{ width: 380 }}>
        <Story />
      </Box>
    ),
  ],
};

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

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

/** Default — verified provider with all fields */
export const Default: Story = {
  args: {
    name: 'H.Parsons Funeral Directors',
    location: 'Wollongong',
    verified: true,
    imageUrl: HERO_PLACEHOLDER,
    logoUrl: LOGO_PLACEHOLDER,
    rating: 4.8,
    reviewCount: 127,
    capabilityLabel: 'Online Arrangement',
    capabilityColor: 'success',
    capabilityDescription:
      'Complete your arrangement entirely online — no in-person visit required.',
    startingPrice: 900,
  },
};

// ─── Verified Provider ──────────────────────────────────────────────────────

/** Full verified provider card with all elements */
export const VerifiedProvider: Story = {
  name: 'Verified Provider',
  render: () => (
    <ProviderCard
      name="Parsons Ladies Funeral Directors"
      location="Wollongong"
      verified
      imageUrl={HERO_PLACEHOLDER}
      logoUrl={LOGO_PLACEHOLDER}
      rating={4.8}
      reviewCount={127}
      capabilityLabel="Online Arrangement"
      capabilityColor="success"
      capabilityDescription="Complete your arrangement entirely online — no in-person visit required."
      startingPrice={900}
      onClick={() => {}}
    />
  ),
};

// ─── Unverified Provider ────────────────────────────────────────────────────

/** Unverified provider — text only with top accent bar, no image/logo/trusted badge */
export const UnverifiedProvider: Story = {
  name: 'Unverified Provider',
  render: () => (
    <ProviderCard
      name="Rankins Funeral's Heathcote"
      location="Heathcote"
      rating={4.2}
      reviewCount={43}
      capabilityLabel="Outsourced"
      capabilityColor="default"
      capabilityDescription="This provider uses a third-party service to manage arrangements."
      startingPrice={1200}
      onClick={() => {}}
    />
  ),
};

// ─── List Layout ────────────────────────────────────────────────────────────

/**
 * Mixed verified and unverified providers in a scrollable list on
 * neutral.50 background. This is the primary use case — text alignment
 * should be consistent across both card types for scan readability.
 * Unverified cards have a top accent bar for visibility.
 */
export const ListLayout: Story = {
  name: 'List Layout — Mixed',
  decorators: [
    (Story) => (
      <Box
        sx={{
          width: 400,
          maxHeight: 700,
          overflow: 'auto',
          backgroundColor: 'var(--fa-color-surface-subtle)',
          p: 2,
          borderRadius: 1,
        }}
      >
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <ProviderCard
        name="Parsons Ladies Funeral Directors"
        location="Wollongong"
        verified
        imageUrl={HERO_PLACEHOLDER}
        logoUrl={LOGO_PLACEHOLDER}
        rating={4.8}
        reviewCount={127}
        capabilityLabel="Online Arrangement"
        capabilityColor="success"
        capabilityDescription="Complete your arrangement entirely online — no in-person visit required."
        startingPrice={900}
        onClick={() => {}}
      />
      <ProviderCard
        name="H.Parsons Wollongong"
        location="Wollongong"
        verified
        imageUrl={HERO_PLACEHOLDER_2}
        logoUrl={LOGO_PLACEHOLDER}
        rating={4.6}
        reviewCount={89}
        capabilityLabel="Online Arrangement"
        capabilityColor="success"
        capabilityDescription="Complete your arrangement entirely online — no in-person visit required."
        startingPrice={1100}
        onClick={() => {}}
      />
      <ProviderCard
        name="Rankins Funeral's Heathcote"
        location="Heathcote"
        rating={4.2}
        reviewCount={43}
        capabilityLabel="Outsourced"
        capabilityColor="default"
        capabilityDescription="This provider uses a third-party service to manage arrangements."
        startingPrice={1200}
        onClick={() => {}}
      />
      <ProviderCard
        name="Stella Armois Funerals"
        location="Corrimal"
        rating={3.9}
        reviewCount={18}
        capabilityLabel="Partial Arrangement"
        capabilityColor="warning"
        capabilityDescription="Some steps can be completed online, but an in-person visit is required to finalise."
        startingPrice={950}
        onClick={() => {}}
      />
      <ProviderCard
        name="St. Angelo of God Funeral Directors"
        location="Fairy Meadow"
        verified
        imageUrl={HERO_PLACEHOLDER_3}
        logoUrl={LOGO_PLACEHOLDER}
        rating={4.9}
        reviewCount={203}
        capabilityLabel="Online Arrangement"
        capabilityColor="success"
        capabilityDescription="Complete your arrangement entirely online — no in-person visit required."
        startingPrice={1500}
        onClick={() => {}}
      />
    </Box>
  ),
};

// ─── Capability Variants ────────────────────────────────────────────────────

/** Three capability badge colours with hover tooltips */
export const CapabilityVariants: Story = {
  name: 'Capability Variants',
  decorators: [
    (Story) => (
      <Box sx={{ width: 380 }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <ProviderCard
        name="Online Provider"
        location="Sydney"
        capabilityLabel="Online Arrangement"
        capabilityColor="success"
        capabilityDescription="Complete your arrangement entirely online — no in-person visit required."
        startingPrice={900}
        onClick={() => {}}
      />
      <ProviderCard
        name="Partial Provider"
        location="Melbourne"
        capabilityLabel="Partial Arrangement"
        capabilityColor="warning"
        capabilityDescription="Some steps can be completed online, but an in-person visit is required to finalise."
        startingPrice={1100}
        onClick={() => {}}
      />
      <ProviderCard
        name="Outsourced Provider"
        location="Brisbane"
        capabilityLabel="Outsourced"
        capabilityColor="default"
        capabilityDescription="This provider uses a third-party service to manage arrangements."
        startingPrice={800}
        onClick={() => {}}
      />
    </Box>
  ),
};

// ─── Edge Cases ─────────────────────────────────────────────────────────────

/** Edge cases: long name, missing fields, extremes */
export const EdgeCases: Story = {
  name: 'Edge Cases',
  decorators: [
    (Story) => (
      <Box sx={{ width: 380 }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      {/* Long name — tests maxLines truncation */}
      <ProviderCard
        name="The Most Honourable and Distinguished Funeral Directors of the Greater Wollongong Metropolitan Area"
        location="Wollongong"
        rating={4.5}
        reviewCount={67}
        capabilityLabel="Online Arrangement"
        capabilityColor="success"
        startingPrice={2500}
        onClick={() => {}}
      />
      {/* No reviews */}
      <ProviderCard
        name="New Provider"
        location="Perth"
        capabilityLabel="Partial Arrangement"
        capabilityColor="warning"
        startingPrice={750}
        onClick={() => {}}
      />
      {/* No capability badge */}
      <ProviderCard
        name="Basic Listing"
        location="Adelaide"
        rating={3.2}
        reviewCount={5}
        startingPrice={600}
        onClick={() => {}}
      />
      {/* No price */}
      <ProviderCard
        name="Price Unavailable"
        location="Darwin"
        rating={4.0}
        reviewCount={12}
        capabilityLabel="Outsourced"
        capabilityColor="default"
        onClick={() => {}}
      />
      {/* Minimal — just name and location */}
      <ProviderCard name="Minimal Card" location="Hobart" onClick={() => {}} />
    </Box>
  ),
};

// ─── Responsive ─────────────────────────────────────────────────────────────

/** Cards at different viewport widths */
export const Responsive: Story = {
  decorators: [
    (Story) => (
      <Box sx={{ width: 'auto' }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', gap: 3, alignItems: 'start', flexWrap: 'wrap' }}>
      {[280, 340, 420].map((width) => (
        <Box key={width} sx={{ width }}>
          <Box sx={{ mb: 1, fontSize: 12, color: 'text.secondary' }}>{width}px</Box>
          <ProviderCard
            name="H.Parsons Funeral Directors"
            location="Wollongong"
            verified
            imageUrl={HERO_PLACEHOLDER}
            logoUrl={LOGO_PLACEHOLDER}
            rating={4.8}
            reviewCount={127}
            capabilityLabel="Online Arrangement"
            capabilityColor="success"
            startingPrice={900}
            onClick={() => {}}
          />
        </Box>
      ))}
    </Box>
  ),
};

// ─── On Different Backgrounds ───────────────────────────────────────────────

/** Cards on white vs grey surfaces — unverified on grey is the expected usage */
export const OnDifferentBackgrounds: Story = {
  name: 'On Different Backgrounds',
  decorators: [
    (Story) => (
      <Box sx={{ width: 'auto' }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', gap: 3 }}>
      <Box sx={{ width: 360, p: 3, backgroundColor: 'background.default' }}>
        <Box sx={{ mb: 1, fontSize: 12, color: 'text.secondary' }}>White surface</Box>
        <ProviderCard
          name="H.Parsons"
          location="Wollongong"
          verified
          imageUrl={HERO_PLACEHOLDER}
          logoUrl={LOGO_PLACEHOLDER}
          rating={4.8}
          reviewCount={127}
          startingPrice={900}
          onClick={() => {}}
        />
      </Box>
      <Box sx={{ width: 360, p: 3, backgroundColor: 'var(--fa-color-surface-subtle)' }}>
        <Box sx={{ mb: 1, fontSize: 12, color: 'text.secondary' }}>Grey surface (neutral.50)</Box>
        <ProviderCard
          name="Rankins Funerals"
          location="Heathcote"
          rating={4.2}
          reviewCount={43}
          capabilityLabel="Outsourced"
          capabilityColor="default"
          startingPrice={1200}
          onClick={() => {}}
        />
      </Box>
    </Box>
  ),
};

// ─── Interactive Demo ───────────────────────────────────────────────────────

/** Click any card — fires onClick in Storybook actions panel */
export const InteractiveDemo: Story = {
  name: 'Interactive — Click to Navigate',
  decorators: [
    (Story) => (
      <Box sx={{ width: 380 }}>
        <Story />
      </Box>
    ),
  ],
  render: () => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <ProviderCard
        name="Parsons Ladies Funeral Directors"
        location="Wollongong"
        verified
        imageUrl={HERO_PLACEHOLDER}
        logoUrl={LOGO_PLACEHOLDER}
        rating={4.8}
        reviewCount={127}
        capabilityLabel="Online Arrangement"
        capabilityColor="success"
        startingPrice={900}
        onClick={() => alert('Navigate to Parsons Ladies packages')}
      />
      <ProviderCard
        name="Rankins Funeral's Heathcote"
        location="Heathcote"
        rating={4.2}
        reviewCount={43}
        capabilityLabel="Outsourced"
        capabilityColor="default"
        startingPrice={1200}
        onClick={() => alert('Navigate to Rankins packages')}
      />
    </Box>
  ),
};
