import PageLoading from '~/src/components/PageLoading';
import PagePlaceholder from '~/src/components/PagePlaceholder';
import { useApi } from '~/src/hooks/useApi';
import { useI18n } from '~/src/lib/i18n';
import { getContentLinkApi } from '~/src/lib/songwhipApi/contentLinks/get';
import { Page } from '~/src/ui/components/page';
import { Tab, Tabs } from '~/src/ui/components/tabs';
import { Layout } from '~/src/ui/layouts/layout';
import { ContentLinkAnalytics } from './components/ContentLinkAnalytics';
import { ContentLinkHeader } from './components/ContentLinkHeader';
import { ContentLinkShareButton } from './components/ContentLinkShareButton';

export const DashboardContentLinkPage = ({
  contentLinkId,
}: {
  contentLinkId: number;
}) => {
  const { t } = useI18n();
  const { data: item, isLoading } = useApi(getContentLinkApi, [contentLinkId]);

  if (isLoading) {
    return <PageLoading />;
  }

  if (!item) {
    return <PagePlaceholder error={new Error(t('app.errors.notFound'))} />;
  }

  return (
    <Page
      title={t('dashboard.labels.contentLink')}
      rightContent={<ContentLinkShareButton contentLink={item} />}
      backgroundImage={item.image}
    >
      <Layout column gap="8">
        <ContentLinkHeader contentLink={item} />
        <Tabs testId="contentLinkAnalyticsTabs">
          <Tab id="28days" label={t('dashboard.days', { days: 28 })}>
            <ContentLinkAnalytics
              contentLinkId={contentLinkId}
              period="28days"
            />
          </Tab>
          <Tab id="allTime" label={t('dashboard.allTime')}>
            <ContentLinkAnalytics
              contentLinkId={contentLinkId}
              period="allTime"
            />
          </Tab>
        </Tabs>
      </Layout>
    </Page>
  );
};