import React from 'react';
import { useParams } from 'react-router-dom';
import { HiChartBar, HiTrendingDown, HiTrendingUp } from 'react-icons/hi';
import { useLocale } from '@/app/providers/LocaleProvider';
import { PageSection } from '@/shared/components/layout/PageSection';
import { PanelLoadingState } from '@/shared/components/ui/PageState';
import { StatCard } from '@/features/dashboard/components/StatCard';
import { ProjectPageShell } from '@/features/projects/components/ProjectPageShell';
import { VelocityChart } from '@/features/projects/components/VelocityChart';
import { ProjectsStatsGrid } from '@/features/projects/components/projectsLayout';
import { useProjectVelocity } from '@/features/projects/hooks/useProjectAnalytics';

const ProjectVelocityPage: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const { t } = useLocale();
  const { data, isLoading } = useProjectVelocity(id);

  return (
    <ProjectPageShell projectId={id}>
      {() => (
        <>
          <PageSection title={t('projects:velocity.chart')}>
            {isLoading ? (
              <PanelLoadingState label={t('projects:states.loading')} />
            ) : (
              <>
                {data && (
                  <ProjectsStatsGrid>
                    <StatCard
                      label={t('projects:velocity.avg')}
                      value={`${data.average_velocity_md} ${t('projects:manDay.unit')}`}
                      icon={HiChartBar}
                    />
                    <StatCard
                      label={t('projects:velocity.best')}
                      value={`${data.best_sprint_md} ${t('projects:manDay.unit')}`}
                      icon={HiTrendingUp}
                      accent="success"
                    />
                    <StatCard
                      label={t('projects:velocity.worst')}
                      value={`${data.worst_sprint_md} ${t('projects:manDay.unit')}`}
                      icon={HiTrendingDown}
                      accent="warning"
                    />
                    <StatCard label={t('projects:velocity.trend')} value={data.trend} />
                  </ProjectsStatsGrid>
                )}
                <VelocityChart
                  title={t('projects:velocity.chart')}
                  data={data}
                  emptyLabel={t('projects:velocity.empty')}
                />
              </>
            )}
          </PageSection>
        </>
      )}
    </ProjectPageShell>
  );
};

export default ProjectVelocityPage;