import React, { useState } from 'react';
import { useParams } from 'react-router-dom';
import { Button } from '@/shared/components/ui';
import { PageSection } from '@/shared/components/layout/PageSection';
import { PanelLoadingState, PanelEmpty } from '@/shared/components/ui/PageState';
import { ProjectPageShell } from '@/features/projects/components/ProjectPageShell';
import { ClosureChecklistModal } from '@/features/projects/components/ClosureChecklistModal';
import { InlineActions, WorkItemsList } from '@/features/projects/components/projectsLayout';
import { WorkItemCard } from '@/features/projects/components/WorkItemCard';
import { useSprintTickets } from '@/features/projects/hooks/useSprintTickets';
import { useProjectSprints } from '@/features/projects/hooks/useProjectSprints';
import { useProjectMutations } from '@/features/projects/hooks/useProjectMutations';
import { useProjectPermissions } from '@/features/projects/hooks/useProjectPermissions';
import { fetchSprintClosureChecklist } from '@/features/projects/services/projectService';
import { useLocale } from '@/app/providers/LocaleProvider';
import { SprintLoadIndicator } from '@/features/projects/components/SprintLoadIndicator';
import { SprintHealthBreakdown } from '@/features/projects/components/SprintHealthBreakdown';
import { useSprintCapacity } from '@/features/projects/hooks/useProjectAnalytics';
import type { ProjectSummary } from '@/features/projects/types/project.types';

const ProjectSprintContent: React.FC<{ project: ProjectSummary; sprintId: string }> = ({
  project,
  sprintId,
}) => {
  const { t } = useLocale();
  const { data: tickets, isLoading } = useSprintTickets(project.id, sprintId);
  const { data: sprints } = useProjectSprints(project.id);
  const sprint = sprints?.find((s) => s.id === sprintId);
  const { data: capacity, isLoading: capacityLoading } = useSprintCapacity(project.id, sprintId);
  const { startSprintMutation, closeSprintMutation } = useProjectMutations();
  const { canManage } = useProjectPermissions(project);
  const [closeModalOpen, setCloseModalOpen] = useState(false);

  return (
    <>
            <SprintLoadIndicator summary={capacity} loading={capacityLoading} />
            {sprint?.executive_health_detail && (
              <div style={{ marginBottom: '1.5rem' }}>
                <SprintHealthBreakdown health={sprint.executive_health_detail} />
              </div>
            )}
            <PageSection
              title={t('projects:nav.board')}
              actions={
                canManage ? (
                  <InlineActions>
                    <Button
                      type="button"
                      variant="primary"
                      loading={startSprintMutation.isPending}
                      onClick={() =>
                        startSprintMutation.mutate({ projectId: project.id, sprintId })
                      }
                    >
                      {t('projects:sprint.start')}
                    </Button>
                    <Button
                      type="button"
                      variant="secondary"
                      loading={closeSprintMutation.isPending}
                      onClick={() => setCloseModalOpen(true)}
                    >
                      {t('projects:sprint.close')}
                    </Button>
                  </InlineActions>
                ) : undefined
              }
            >
              {isLoading ? (
                <PanelLoadingState label={t('projects:states.loading')} />
              ) : (tickets ?? []).length === 0 ? (
                <PanelEmpty title={t('projects:sprint.empty')} />
              ) : (
                <WorkItemsList>
                  {(tickets ?? []).map((item) => (
                    <WorkItemCard key={item.id} item={item} />
                  ))}
                </WorkItemsList>
              )}
            </PageSection>

            <ClosureChecklistModal
              open={closeModalOpen}
              title={t('projects:closure.sprintTitle')}
              loadChecklist={() => fetchSprintClosureChecklist(project.id, sprintId)}
              confirmLabel={t('projects:closure.sprintConfirm')}
              overrideLabel={t('projects:closure.sprintOverride')}
              emptyLabel={t('projects:closure.sprintEmpty')}
              onCancel={() => setCloseModalOpen(false)}
              onConfirm={(overrideReason) => {
                closeSprintMutation.mutate(
                  {
                    projectId: project.id,
                    sprintId,
                    closureOverrideReason: overrideReason,
                  },
                  { onSuccess: () => setCloseModalOpen(false) },
                );
              }}
            />
    </>
  );
};

const ProjectSprintPage: React.FC = () => {
  const { id, sprintId } = useParams<{ id: string; sprintId: string }>();

  if (!sprintId) {
    return null;
  }

  return (
    <ProjectPageShell projectId={id}>
      {({ project }) => <ProjectSprintContent project={project} sprintId={sprintId} />}
    </ProjectPageShell>
  );
};

export default ProjectSprintPage;