import * as stylex from '@stylexjs/stylex';

import { useApi } from '~/src/hooks/useApi';
import {
  getAnalyticsContentLinksMetrics,
  getAnalyticsContentLinksTimeseries,
} from '~/src/lib/songwhipApi/analytics/contentLinks';
import { Alert } from '~/src/ui/components/alert';
import { Container } from '~/src/ui/layouts/container';
import { Layout } from '~/src/ui/layouts/layout';
import { getEndDate, getStartDate } from '../utils';
import { ContentLinkTimelineChart } from './ContentLinkTimelineChart';
import { LocationBreakdown } from './LocationBreakdown';
import { NoContentLinkAnalytics } from './NoContentLinkAnalytics';
import { SourceBreakdown } from './SourceBreakdown';

const styles = stylex.create({
  metricsSection: {
    zIndex: 1,
    background:
      'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1.00) 20%)',
  },
});

export const ContentLinkAnalytics = ({
  contentLinkId,
  period,
}: {
  contentLinkId: number;
  period: '28days' | 'allTime';
}) => {
  const dateFrom = getStartDate(period);
  const dateTo = getEndDate();

  const query = { contentLinkId, dateFrom, dateTo };

  const {
    data: metrics,
    error,
    isLoading: isMetricsLoading,
  } = useApi(getAnalyticsContentLinksMetrics, [query], {
    revalidateOnFocus: false,
  });

  const { data: timeseries, isLoading: isTimeseriesLoading } = useApi(
    getAnalyticsContentLinksTimeseries,
    [query],
    { revalidateOnFocus: false }
  );

  if (!isMetricsLoading && metrics?.byContentLink.length === 0) {
    return <NoContentLinkAnalytics />;
  }

  return (
    <Layout column gap="8">
      <Container gap="8">
        {error && <Alert variant="error" message={error.message} />}

        <ContentLinkTimelineChart
          timeseries={timeseries}
          isLoading={isTimeseriesLoading}
          metrics={metrics}
          period={period}
        />
      </Container>

      <div {...stylex.props(styles.metricsSection)}>
        {metrics && (
          <Container gap="8">
            <SourceBreakdown metrics={metrics} />
            <LocationBreakdown metrics={metrics} />
          </Container>
        )}
      </div>
    </Layout>
  );
};