import type { Meta, StoryObj } from '@storybook/react-vite'
import React from 'react'

import { DocsTemplate } from '../../../.storybook'
import { type SparklineProps } from '../Charts/SparkLine/SparkLineWithTooltip'
import ScoreCard from './ScoreCard'
import { sparklineGraphData } from './mockData'
import {
  type ContextualMetricsProps,
  type MetricsSummaryProps,
  type ScoreCardProps,
} from './ScoreCardType'

const meta: Meta<typeof ScoreCard> = {
  title: 'Components/ScoreCard',
  component: ScoreCard,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=10235-1416&p=f&t=PGLlLpHAiKfTY97W-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=10235-1416&p=f&t=PGLlLpHAiKfTY97W-0'
          description={
            <span>
              The <code>ScoreCard</code> component is a versatile container
              designed to display key metrics, trends, and contextual data in a
              structured format. It provides an intuitive way to present
              performance insights with a combination of change metrics,
              sparklines, and summaries.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              The <code>ScoreCard</code> supports customizable headers,
              including a title and subtitle for contextual clarity.
            </span>,
            <span key='second-bullet'>
              Includes a <code>ChangeMetric</code> to highlight variations in
              key performance indicators (KPIs) over time.
            </span>,
            <span key='third-bullet'>
              Optionally integrates a <code>Sparkline</code> graph for
              visualizing trends alongside numerical data.
            </span>,
            <span key='fourth-bullet'>
              Supports multiple contextual metrics to provide additional
              insights into related data points.
            </span>,
            <span key='fifth-bullet'>
              The <code>MetricsSummary</code> component allows for an additional
              descriptive text and actionable button, making it easier to
              interpret key data changes.
            </span>,
          ]}
        />
      ),
    },
    layout: 'centered',
  },
  tags: ['autodocs'],
}

export default meta

type Story = StoryObj<typeof meta>

const basicArgs: ScoreCardProps = {
  header: {
    title: 'Net PPM vs. Target PPM',
    subtitle: 'Pure Product Margin',
  },
  changeMetric: {
    formatType: 'percentage',
    valueColor: 'dark-red',
    value: 0.5,
    roundNumber: true,
    decimalScale: 2,
    change: -0.38,
    changeType: 'percentage',
  },
}

const basicArgsWithCurrency: ScoreCardProps = {
  header: {
    title: 'Net PPM vs. Target PPM',
    subtitle: 'Pure Product Margin',
  },
  changeMetric: {
    formatType: 'number',
    value: 0.5,
    roundNumber: true,
    decimalScale: 2,
    change: -0.38,
    changeType: 'number',
    currency: {
      currencyCode: 'USD',
      currencySymbol: '$',
    },
  },
}

const contextualMetrics: ContextualMetricsProps = {
  metrics: [
    {
      title: 'Received Fill Rate',
      formatType: 'percentage',
      value: 20.97,
      roundNumber: true,
      decimalScale: 2,
    },
    {
      title: 'Sell Through Rate',
      formatType: 'percentage',
      value: 6.9,
      roundNumber: true,
      decimalScale: 2,
    },
    {
      title: 'Net PPM',
      formatType: 'number',
      value: 2,
      roundNumber: true,
      additionalValueSuffix: ' days',
    },
  ],
}

const metricsSummary: MetricsSummaryProps = {
  description: 'Net PPM has fallen below target by 87.27%.',
  buttonProps: {
    children: 'Details',
    onClick: () => null,
  },
}

const sparklineGraph: SparklineProps = {
  headerMetricProps: {
    title: 'Net PPM',
    value: 0.5,
    loading: false,
    change: 10.2,
    pctChange: 10.4,
    formatType: 'percentage',
  },
  graphColor: 'green',
  graphData: sparklineGraphData,
  dataKey: 'data_point',
  thresholdKey: 'threshold',
  thresholdColor: 'blue',
}

export const Basic: Story = {
  args: basicArgs,
}

export const WithCurrency: Story = {
  args: basicArgsWithCurrency,
}

export const WithSparkline: Story = {
  args: {
    ...basicArgs,
    sparklineGraph,
  },
}

export const WithLoadingState: Story = {
  args: {
    ...basicArgs,
    contextualMetrics,
    metricsSummary,
    loading: true,
  },
}

export const WithContextualMetric: Story = {
  args: {
    ...basicArgs,
    contextualMetrics,
  },
}

export const WithMetricsSummary: Story = {
  args: {
    ...basicArgs,
    sparklineGraph,
    contextualMetrics,
    metricsSummary,
  },
}

export const WithBackgroundColor: Story = {
  args: {
    ...basicArgs,
    sparklineGraph,
    backgroundColor: 'light-purple',
  },
}

export const WithoutBorder: Story = {
  args: {
    ...basicArgs,
    sparklineGraph,
    backgroundColor: 'light-purple',
    noBorder: true,
  },
}

export const HideChangeValue: Story = {
  args: {
    ...basicArgs,
    changeMetric: {
      ...basicArgs.changeMetric,
      hideChangeValue: true,
      valueColor: 'dark-green',
    },
  },
}

export const WithComparisonMetricSummary: Story = {
  args: {
    ...basicArgs,
    changeMetric: {
      ...basicArgs.changeMetric,
      comparisonMetricSummary: {
        summary: 'Total Competitors Sales: 57M',
      },
    },
  },
}

export const WithBadge: Story = {
  args: {
    ...basicArgs,
    header: {
      title: 'Net PPM vs.Live Target PPM',
      subtitle: 'Pure Product Margin',
      badgeProps: {
        children: 'Live',
        color: 'dark-green',
      },
    },
  },
}