import React from 'react';
import styled from 'styled-components';
import { useNavigate } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { AppLayout } from '@/shared/components/layout/AppLayout';
import { ProjectsPageChrome } from '@/features/projects/components/ProjectsPageChrome';
import { PageStack } from '@/shared/components/layout/PageStack';
import { Button } from '@/shared/components/ui';
import { PanelEmpty, PanelLoadingState } from '@/shared/components/ui/PageState';
import { useLocale } from '@/app/providers/LocaleProvider';
import { ProjectsAreaSubnav } from '@/features/projects/components/ProjectsAreaSubnav';
import { fetchPortfolioCoordinationDashboard } from '@/features/projects/services/projectService';
import { ROUTES } from '@/shared/constants/routes';
import { CoordinationHealthSection } from '@/features/projects/components/coordination/CoordinationHealthSection';
import { AttentionRequiredSection } from '@/features/projects/components/coordination/AttentionRequiredSection';
import { CriticalChainsSection } from '@/features/projects/components/coordination/CriticalChainsSection';
import { ProjectExposureSection } from '@/features/projects/components/coordination/ProjectExposureSection';
import { DependencyAnalyticsSection } from '@/features/projects/components/coordination/DependencyAnalyticsSection';
import { UpcomingCommitmentsSection } from '@/features/projects/components/coordination/UpcomingCommitmentsSection';
import { DependencyRegistrySection } from '@/features/projects/components/coordination/DependencyRegistrySection';

const TwoCol = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: ${({ theme }) => theme.spacing[6]};

  @media (max-width: 1100px) {
    grid-template-columns: 1fr;
  }
`;

const CrossProjectDependenciesPage: React.FC = () => {
  const { t } = useLocale();
  const navigate = useNavigate();

  const { data, isLoading } = useQuery({
    queryKey: ['portfolio', 'coordination'],
    queryFn: fetchPortfolioCoordinationDashboard,
    staleTime: 60_000,
  });

  return (
    <AppLayout>
      <ProjectsPageChrome
        title={t('projects:portfolioNav.crossDependencies')}
        subtitle={t('projects:dependencies.crossSubtitle')}
        actions={
          <Button variant="secondary" type="button" onClick={() => navigate(ROUTES.PORTFOLIO_TIMELINE)}>
            {t('projects:portfolioDependencies.openTimeline')}
          </Button>
        }
        areaNav={<ProjectsAreaSubnav />}
      />

      {isLoading ? (
        <PanelLoadingState label={t('projects:states.loading')} />
      ) : !data || data.summary.total === 0 ? (
        <PanelEmpty
          title={t('projects:portfolioDependencies.healthyPortfolioTitle')}
          hint={t('projects:portfolioDependencies.healthyPortfolioHint')}
        />
      ) : (
        <PageStack>
          <CoordinationHealthSection summary={data.summary} />
          <AttentionRequiredSection items={data.attention_items} total={data.attention_total} />
          <TwoCol>
            <CriticalChainsSection chains={data.chains} />
            <ProjectExposureSection exposure={data.project_exposure} />
          </TwoCol>
          <DependencyAnalyticsSection analytics={data.analytics} />
          <UpcomingCommitmentsSection commitments={data.commitments} />
          <DependencyRegistrySection />
        </PageStack>
      )}
    </AppLayout>
  );
};

export default CrossProjectDependenciesPage;