import { useState } from 'react';

import type { MappedUser } from '~/src/lib/songwhipApi/users/types';

import { useApi } from '~/src/hooks/useApi';
import {
  getAnalyticsContentLinksMetrics,
  getAnalyticsContentLinksTimeseries,
} from '~/src/lib/songwhipApi/analytics/contentLinks';
import { getUserContentLinksApi } from '~/src/lib/songwhipApi/contentLinks/get';
import { Container } from '~/src/ui/layouts/container';
import { Layout } from '~/src/ui/layouts/layout';
import { ContentLinkItem } from './components/ContentLinkItem';
import { ContentLinkSearchInput } from './components/ContentLinkSearchInput';
import { ContentLinkTimelineChart } from './components/ContentLinkTimelineChart';
import { NoContentLinks } from './components/NoContentLinks';
import { NoSearchResults } from './components/NoSearchResults';
import { getEndDate, getStartDate } from './utils';

export const DashboardContentLinks = ({ user }: { user: MappedUser }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const { isLoading: contentLinksLoading, data } = useApi(
    getUserContentLinksApi,
    [user.id, { search: searchTerm }]
  );

  const query = {
    dateFrom: getStartDate('28days'),
    dateTo: getEndDate(),
  };

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

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

  const contentLinks = data?.items ?? [];

  const isLoading = contentLinksLoading;
  const isSearching = isLoading && searchTerm.length > 0;
  const noMatches = searchTerm && !isLoading && contentLinks.length === 0;
  const noContent = !isLoading && !searchTerm && contentLinks.length === 0;

  return (
    <Layout column gap="8" paddingY="8">
      <Container size="large">
        <ContentLinkTimelineChart
          timeseries={timeseries}
          isLoading={isAnalyticsLoading}
          metrics={metrics}
          period="28days"
        />
      </Container>

      <Container size="small" gap="8">
        <ContentLinkSearchInput
          isLoading={isSearching}
          onChange={setSearchTerm}
          onClear={() => setSearchTerm('')}
        />

        <Layout column>
          {contentLinks.map((item) => (
            <ContentLinkItem
              key={item.id}
              item={item}
              pageViews={
                metrics?.byContentLink.find((m) => m.contentLinkId === item.id)
                  ?.total ?? 0
              }
            />
          ))}
        </Layout>

        {noMatches && <NoSearchResults searchTerm={searchTerm} />}
        {noContent && <NoContentLinks />}
      </Container>
    </Layout>
  );
};