import React from 'react'

import Button from '../Button/Button'
import isClient from '../../services/isClient'
import Popover from '../Popover/Popover'

// Action button component for metrics
const ActionButton = () => {
  return (
    <Popover
      popoverContent={
        <div
          className='flex items-center justify-center'
          style={{
            width: '300px',
            height: '300px',
          }}
        >
          Hello There
        </div>
      }
      maxWidth='none'
      position='top'
      noPadding
      {...(isClient ? { appendTo: document.body } : {})}
    >
      {({ visible, setVisible }) => (
        <div>
          <Button
            className='mr-8'
            as='unstyled'
            onClick={() => setVisible(!visible)}
          >
            View
          </Button>
        </div>
      )}
    </Popover>
  )
}

// Base metric template
const createMetric = (overrides = {}) => ({
  formatType: 'number',
  decimalScale: 0,
  roundNumber: true,
  routerComponent: 'Link',
  routerProp: 'to',
  beta: false,
  reverse: false,
  truncateValues: false,
  showLessThanZeroPercentageChange: true,
  noPctConversion: false,
  showChangeBelowMainMetric: false,
  ...overrides,
})

// Helper function to generate metrics
const generateMetrics = (count: number, type: 'number' | 'text' = 'number') => {
  return Array.from({ length: count }, (_, i) =>
    createMetric({
      title: `Metric ${i + 1}`,
      tooltip: `Tooltip for Metric ${i + 1}`,
      value: type === 'number' ? Math.floor(Math.random() * 1000000) : 0,
      change: type === 'number' ? Math.floor(Math.random() * 100000) : 0,
      pctChange: type === 'number' ? (Math.random() * 20 - 10).toFixed(1) : 0,
      formatType: type,
      linkTo: `/metric-${i + 1}`,
      beta: i % 3 === 0,
      reverse: i % 2 === 0,
      ...(type === 'text' && { textValue: `Status ${i + 1}` }),
      ...(type === 'number' &&
        i % 2 === 0 && {
          currency: { currencyCode: 'USD', currencySymbol: '$' },
        }),
    }),
  )
}

// Basic metrics with numeric values
export const headerMetricData = [
  createMetric({
    title: 'Total Revenue',
    tooltip: 'Total revenue for the period',
    value: 1500000,
    change: 150000,
    pctChange: 11.1,
    linkTo: '/revenue',
    currency: { currencyCode: 'USD', currencySymbol: '$' },
  }),
  createMetric({
    title: 'Active Users',
    tooltip: 'Number of active users',
    value: 25000,
    change: 2500,
    pctChange: 11.1,
    linkTo: '/users',
  }),
  createMetric({
    title: 'Conversion Rate',
    tooltip: 'User conversion rate',
    value: 5.2,
    change: 0.8,
    pctChange: 18.2,
    formatType: 'percentage',
    decimalScale: 1,
    linkTo: '/conversion',
    beta: true,
    noPctConversion: true,
  }),
  createMetric({
    title: 'Bounce Rate',
    tooltip: 'Page bounce rate',
    value: 42.5,
    change: -2.3,
    pctChange: -5.1,
    formatType: 'percentage',
    decimalScale: 1,
    linkTo: '/bounce',
    reverse: true,
    noPctConversion: true,
  }),
]

// Text-based metrics
export const headerMetricTextData = [
  createMetric({
    title: 'Status',
    tooltip: 'Current status',
    formatType: 'text',
    roundNumber: false,
    linkTo: '/status',
    textValue: 'Active',
  }),
  createMetric({
    title: 'Last Updated',
    tooltip: 'Last update timestamp',
    formatType: 'text',
    roundNumber: false,
    linkTo: '/updates',
    textValue: '2 hours ago',
  }),
  createMetric({
    title: 'Environment',
    tooltip: 'Current environment',
    formatType: 'text',
    roundNumber: false,
    linkTo: '/environment',
    textValue: 'Production',
  }),
]

// Metrics with tooltips
export const headerMetricTooltipData = [
  createMetric({
    title: 'Revenue Growth',
    tooltip: 'Revenue growth rate',
    value: 1500000,
    change: 150000,
    pctChange: 11.1,
    linkTo: '/growth',
    currency: { currencyCode: 'USD', currencySymbol: '$' },
    comparisonTooltip: {
      comparison: 150000,
      timeframe: { start: '2023-01-01', end: '2023-12-31' },
      currentPeriodDates: { start: '2024-01-01', end: '2024-12-31' },
    },
  }),
  createMetric({
    title: 'User Growth',
    tooltip: 'User growth rate',
    value: 25000,
    change: 2500,
    pctChange: 11.1,
    linkTo: '/user-growth',
    comparisonTooltip: {
      comparison: 2500,
      timeframe: { start: '2023-01-01', end: '2023-12-31' },
      currentPeriodDates: { start: '2024-01-01', end: '2024-12-31' },
    },
  }),
]

// Metrics with action buttons
export const headerMetricActionData = [
  createMetric({
    title: 'Total Revenue',
    tooltip: 'Total revenue for the period',
    value: 1500000,
    change: 150000,
    pctChange: 11.1,
    linkTo: '/revenue',
    currency: { currencyCode: 'USD', currencySymbol: '$' },
    actionButton: <ActionButton />,
  }),
  createMetric({
    title: 'Active Users',
    tooltip: 'Number of active users',
    value: 25000,
    change: 2500,
    pctChange: 11.1,
    linkTo: '/users',
    actionButton: <ActionButton />,
  }),
]

// Metrics with change below main metric
export const headerMetricChangeBelowData = [
  createMetric({
    title: 'Total Revenue',
    tooltip: 'Total revenue for the period',
    value: 1500000,
    change: 150000,
    pctChange: 11.1,
    linkTo: '/revenue',
    currency: { currencyCode: 'USD', currencySymbol: '$' },
    showChangeBelowMainMetric: true,
  }),
  createMetric({
    title: 'Active Users',
    tooltip: 'Number of active users',
    value: 25000,
    change: 2500,
    pctChange: 11.1,
    linkTo: '/users',
    showChangeBelowMainMetric: true,
  }),
]

// Metrics with radio buttons
export const headerMetricRadioData = [
  createMetric({
    title: 'Total Revenue',
    tooltip: 'Total revenue for the period',
    value: 1500000,
    change: 150000,
    pctChange: 11.1,
    linkTo: '/revenue',
    currency: { currencyCode: 'USD', currencySymbol: '$' },
    key: 'revenue',
  }),
  createMetric({
    title: 'Active Users',
    tooltip: 'Number of active users',
    value: 25000,
    change: 2500,
    pctChange: 11.1,
    linkTo: '/users',
    key: 'users',
  }),
]

// Metrics with custom colors
export const headerMetricCustomColorsData = [
  createMetric({
    title: 'Total Revenue',
    tooltip: 'Total revenue for the period',
    value: 1500000,
    change: 150000,
    pctChange: 11.1,
    linkTo: '/revenue',
    currency: { currencyCode: 'USD', currencySymbol: '$' },
  }),
  createMetric({
    title: 'Active Users',
    tooltip: 'Number of active users',
    value: 25000,
    change: 2500,
    pctChange: 11.1,
    linkTo: '/users',
  }),
]

// Metrics with loading state
export const headerMetricLoadingData = [
  createMetric({
    title: 'Total Revenue',
    tooltip: 'Total revenue for the period',
    value: 1500000,
    change: 150000,
    pctChange: 11.1,
    linkTo: '/revenue',
    currency: { currencyCode: 'USD', currencySymbol: '$' },
  }),
  createMetric({
    title: 'Active Users',
    tooltip: 'Number of active users',
    value: 25000,
    change: 2500,
    pctChange: 11.1,
    linkTo: '/users',
  }),
]

// Metrics with many items
export const headerMetricManyData = [...headerMetricData, ...generateMetrics(6)]