import { useCallback } from 'react'
import { DailyActivityChart } from './DailyActivityChart'
import { ProductActivityChart } from './ProductActivityChart'
import {
  getCustomersDailyActivity,
  getOrdersDailyActivity,
} from '../services/dailyActivityService'
import type { HomeChartId } from '../utils/businessModules'
import { useT } from '../i18n/useT'
import styles from './DailyActivityChart.module.css'

interface HomeChartSlotProps {
  chartId: HomeChartId
}

function HomeChartPlaceholder({ chartId }: { chartId: HomeChartId }) {
  const t = useT()
  const titleKey =
    chartId === 'blog_views_30d'
      ? 'home.chart.blogViews.title'
      : 'home.chart.placeholder.title'
  const subtitleKey =
    chartId === 'blog_views_30d'
      ? 'home.chart.blogViews.subtitle'
      : 'home.chart.placeholder.subtitle'

  return (
    <section className={styles.card} aria-label={t(titleKey)}>
      <div className={styles.header}>
        <div>
          <h3 className={styles.title}>{t(titleKey)}</h3>
          <p className={styles.subtitle}>{t(subtitleKey)}</p>
        </div>
      </div>
      <p className={styles.status}>{t('home.chart.placeholder.comingSoon')}</p>
    </section>
  )
}

export function HomeChartSlot({ chartId }: HomeChartSlotProps) {
  const loadOrders = useCallback(
    (signal: AbortSignal) => getOrdersDailyActivity(30, signal),
    [],
  )
  const loadCustomersYear = useCallback(
    (signal: AbortSignal) => getCustomersDailyActivity(365, signal),
    [],
  )

  switch (chartId) {
    case 'none':
      return null
    case 'orders_30d':
      return (
        <DailyActivityChart
          titleKey="home.chart.orders.title"
          subtitleKey="home.chart.orders.subtitle"
          primaryLegendKey="home.chart.orders.legend"
          secondaryLegendKey="home.chart.orders.cartLegend"
          loadingKey="home.chart.orders.loading"
          errorKey="home.chart.orders.error"
          primaryBarTitleKey="home.chart.orders.bar"
          secondaryBarTitleKey="home.chart.orders.cartBar"
          load={loadOrders}
        />
      )
    case 'customers_joined_1y':
      return (
        <DailyActivityChart
          titleKey="home.chart.customersJoined.title"
          subtitleKey="home.chart.customersJoined.subtitle"
          primaryLegendKey="home.chart.customersJoined.legend"
          secondaryLegendKey="home.chart.customersJoined.activeLegend"
          loadingKey="home.chart.customersJoined.loading"
          errorKey="home.chart.customersJoined.error"
          primaryBarTitleKey="home.chart.customersJoined.bar"
          secondaryBarTitleKey="home.chart.customersJoined.activeBar"
          load={loadCustomersYear}
          granularity="month"
        />
      )
    case 'products_added_1y':
      return <ProductActivityChart />
    case 'blog_views_30d':
      return <HomeChartPlaceholder chartId={chartId} />
    default:
      return null
  }
}
