import type { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';

import Button, { ButtonShape, ButtonVariant } from '@/components/button/Button';
import { FeatureKey, PlanKey } from '@/state/sessionStore';
import { FALLBACK_AURA_URL } from '@/utils/constants';
import { staticAssetUrl } from '@/utils/staticAssetUrl';

import UpsellCardModal from './UpsellCardModal';

const meta: Meta<typeof UpsellCardModal> = {
  title: 'Modal/UpsellCardModal',
  component: UpsellCardModal,
  parameters: {
    layout: 'centered',
  },
};

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

const mockPlans = [
  {
    id: '1',
    name: 'Pro',
    plan_key: PlanKey.Pro,
    level: 2,
    features: '[]',
    monthly_price_usd: 10,
    annual_price_usd: 96,
    prices: [
      {
        currency: 'USD',
        period_type: 'month',
        price: 10,
      },
      {
        currency: 'USD',
        period_type: 'year',
        price: 96,
      },
      {
        currency: 'EUR',
        period_type: 'month',
        price: 9,
      },
      {
        currency: 'EUR',
        period_type: 'year',
        price: 86,
      },
    ],
    usage_plan_features: [
      { name: 'get_stems' as const },
      { name: 'persona' as const },
      { name: 'v4' as const },
      { name: 'edit_mode' as const },
      { name: 'commercial_rights' as const },
      { name: 'generate_song_image' as const },
      { name: 'generate_song_video' as const },
      { name: 'negative_tags' as const },
      { name: 'variation_remaster' as const },
      { name: 'can_buy_credit_top_ups' as const },
      { name: 'cover' as const },
      { name: 'long_uploads' as const },
      { name: 'studio' as const },
    ],
  },
];

const mockCurrentSubscription = {
  plan: {
    id: '1',
    name: 'Free',
    plan_key: 'free',
    level: 0,
  },
};

const mockUsagePlanDescriptions = {
  pro: {
    feature_descriptions: [
      {
        text: 'Access to latest and most advanced v4.5 model',
        type: 'plus',
      },
      {
        text: '2,500 credits (up to 500 songs), refreshes monthly',
        type: 'plus',
      },
      {
        text: 'Commercial use rights for songs made while subscribed',
        type: 'plus',
      },
    ],
  },
};

const mockFeatures = {
  personas: {
    title: 'Personas',
    subtitle:
      "Personas let you reuse a song's voice and style. Available with Pro and Premier.",
    background_image: FALLBACK_AURA_URL,
    required_plans: ['pro', 'premier'],
    enabled: true,
    icon: 'personas',
  },
  stems: {
    title: 'Advanced Stems',
    subtitle:
      'The most advanced stem separation, get up to 12 stems. Available with Pro and Premier.',
    background_image: staticAssetUrl('images/placeholder-2.jpg'),
    required_plans: ['pro', 'premier'],
    enabled: true,
    icon: 'stems',
  },
  vocals: {
    title: 'Vocal Isolation',
    subtitle: 'Perfect vocal separation for remixes and karaoke tracks.',
    background_image: staticAssetUrl('images/placeholder-3.jpg'),
    required_plans: ['pro', 'premier'],
    enabled: true,
    icon: 'magic_descriptions',
  },
};

function UpsellCardModalDemo(
  props: React.ComponentProps<typeof UpsellCardModal> & {
    buttonText?: string;
    showCloseButton?: boolean;
  }
) {
  const { buttonText = 'Open Modal' } = props;
  const [open, setOpen] = useState(false);

  return (
    <div className='p-4'>
      <Button
        variant={ButtonVariant.Primary}
        shape={ButtonShape.Pill}
        onClick={() => setOpen(true)}
      >
        {buttonText}
      </Button>

      <UpsellCardModal {...props} isOpen={open} />
    </div>
  );
}

export const Default: Story = {
  args: {
    isOpen: true,
    onClose: () => {},
    features: mockFeatures,
    currentUpsellFeature: FeatureKey.PERSONAS,
    plans: mockPlans,
    currentSubscription: mockCurrentSubscription,
    usagePlanDescriptions: mockUsagePlanDescriptions,
  },
};

export const Stems: Story = {
  render: (args) => (
    <UpsellCardModalDemo
      {...args}
      buttonText='Open Stems Modal'
      features={mockFeatures}
      currentUpsellFeature={FeatureKey.STEMS}
      plans={mockPlans}
      currentSubscription={mockCurrentSubscription}
      usagePlanDescriptions={mockUsagePlanDescriptions}
    />
  ),
};

export const MultipleFeatures: Story = {
  render: (args) => (
    <UpsellCardModalDemo
      {...args}
      buttonText='Open Multiple Features Modal'
      features={mockFeatures}
      currentUpsellFeature={FeatureKey.VOCALS}
      plans={mockPlans}
      currentSubscription={mockCurrentSubscription}
      usagePlanDescriptions={mockUsagePlanDescriptions}
    />
  ),
};