'use client';

import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { TodayKpiGrid } from '@/components/today/TodayKpiGrid';
import { TodayChartsSection } from '@/components/today/TodayChartsSection';
import { useTodaySummary } from '@/lib/hooks/useTodaySummary';
import { formatApiErrorMessage } from '@/components/shared/formatApiError';

export default function TodayPage() {
  const t = useTranslations('today');
  const { currentOrganization } = useAuth();
  const { data, loading, error } = useTodaySummary(Boolean(currentOrganization?.id));
  const showNoSubscriptionNotice =
    Boolean(currentOrganization?.isOwner) && !currentOrganization?.plan;

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-semibold">{t('welcomeBack')}</h1>

      {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 ? (
        <div className="rounded-[var(--radius-md)] border border-badge-danger-border bg-badge-danger-bg/40 p-4">
          <p className="text-sm text-badge-danger-fg">
            {formatApiErrorMessage(error, t('loadError'))}
          </p>
        </div>
      ) : null}

      <TodayKpiGrid widgets={data?.widgets ?? {}} loading={loading} />

      <TodayChartsSection charts={data?.charts ?? {}} loading={loading} />
    </div>
  );
}