'use client';

import { useMemo } from 'react';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
import { TodayDashboard } from '@/components/today/TodayDashboard';
import { TodayLoadErrorBanner } from '@/components/today/TodayLoadErrorBanner';
import { TodaySectionErrorFallback } from '@/components/today/TodaySectionErrorFallback';
import { TodayWidgetErrorBoundary } from '@/components/today/TodayWidgetErrorBoundary';
import { useTodaySummary } from '@/lib/hooks/useTodaySummary';

export default function TodayPage() {
  const t = useTranslations('today');
  const { currentOrganization } = useAuth();
  const orgId = currentOrganization?.id;
  const { data, loading, isInitialLoad, error, reload } = useTodaySummary(orgId);

  const showNoSubscriptionNotice = useMemo(
    () => Boolean(currentOrganization?.isOwner) && !currentOrganization?.plan,
    [currentOrganization],
  );

  const sectionErrorMessage = t('sectionLoadError');

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
        <h1 className="text-2xl font-semibold">{t('welcomeBack')}</h1>
        {data?.generatedAt && !isInitialLoad ? (
          <p className="text-xs text-text-muted">
            {t('lastUpdated', {
              time: new Intl.DateTimeFormat(undefined, {
                hour: 'numeric',
                minute: '2-digit',
              }).format(new Date(data.generatedAt)),
            })}
          </p>
        ) : null}
      </div>

      {showNoSubscriptionNotice && (
        <div className="rounded-[var(--radius-md)] border border-amber-500/30 bg-amber-500/10 p-4">
          <p className="text-sm text-amber-200">
            {t('noSubscriptionNotice')}{' '}
            <Link href="/settings/subscriptions" className="font-medium underline underline-offset-2">
              {t('choosePlanLink')}
            </Link>{' '}
            {t('noSubscriptionCta')}
          </p>
        </div>
      )}

      {error ? (
        <TodayLoadErrorBanner
          message={formatApiErrorMessage(error, t('loadError'))}
          retryLabel={t('retryLoad')}
          onRetry={() => void reload()}
          isRetrying={loading && Boolean(data)}
        />
      ) : null}

      <TodayWidgetErrorBoundary
        fallback={<TodaySectionErrorFallback message={sectionErrorMessage} />}
      >
        <TodayDashboard
          widgets={data?.widgets ?? {}}
          charts={data?.charts ?? {}}
          actions={data?.actions ?? {}}
          subscription={data?.subscription}
          loading={loading}
          isInitialLoad={isInitialLoad}
          hasError={Boolean(error)}
        />
      </TodayWidgetErrorBoundary>
    </div>
  );
}