import React from 'react';
import { useParams } from 'react-router-dom';
import { PageSection } from '@/shared/components/layout/PageSection';
import { PanelLoadingState } from '@/shared/components/ui/PageState';
import { useLocale } from '@/app/providers/LocaleProvider';
import { ProjectPageShell } from '@/features/projects/components/ProjectPageShell';
import { BurndownChart } from '@/features/projects/components/BurndownChart';
import { useSprintBurndown } from '@/features/projects/hooks/useProjectAnalytics';
import { useProjectSprints } from '@/features/projects/hooks/useProjectSprints';

const SprintBurndownPage: React.FC = () => {
  const { id, sprintId } = useParams<{ id: string; sprintId: string }>();
  const { t } = useLocale();
  const { data: sprints } = useProjectSprints(id);
  const { data, isLoading } = useSprintBurndown(id, sprintId);
  const sprint = sprints?.find((s) => s.id === sprintId);

  if (!sprintId) {
    return null;
  }

  return (
    <ProjectPageShell projectId={id}>
      {() => (
        <PageSection title={sprint?.name ?? t('projects:sprint.burndown')}>
          {isLoading ? (
            <PanelLoadingState label={t('projects:states.loading')} />
          ) : (
            <BurndownChart
              title={t('projects:burndown.sprintTitle')}
              data={data}
              emptyLabel={t('projects:burndown.empty')}
              seriesLabels={{
                ideal: t('projects:burndown.ideal'),
                actual: t('projects:burndown.actual'),
                remaining: t('projects:burndown.remaining'),
              }}
            />
          )}
        </PageSection>
      )}
    </ProjectPageShell>
  );
};

export default SprintBurndownPage;