import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { PageSection } from '@/shared/components/layout/PageSection';
import { ContentPanel } from '@/shared/components/layout/ContentPanel';
import { Button, StatusBadge } from '@/shared/components/ui';
import { PanelLoadingState, PanelEmpty } from '@/shared/components/ui/PageState';
import { StatCard } from '@/features/dashboard/components/StatCard';
import {
  HiBan,
  HiClock,
  HiCollection,
  HiExclamation,
  HiPlus,
  HiTrendingUp,
  HiUserAdd,
  HiViewBoards,
} from 'react-icons/hi';
import { ProjectPageShell } from '@/features/projects/components/ProjectPageShell';
import { ActiveSprintOverviewCard } from '@/features/projects/components/ActiveSprintOverviewCard';
import { healthStatusTone } from '@/features/projects/utils/projectDisplay';
import { ProjectsStatsGrid } from '@/features/projects/components/projectsLayout';
import { useProjectCommandCenter } from '@/features/projects/hooks/useProjectCommandCenter';
import { useProjectMembers } from '@/features/projects/hooks/useProjectMembers';
import { ROUTES } from '@/shared/constants/routes';
import type { ProjectSummary } from '@/features/projects/types/project.types';

const Row = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing[8]};
`;

const SprintActions = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[3]};
  margin-top: ${({ theme }) => theme.spacing[4]};
`;

const AttentionList = styled.ul`
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing[3]};
`;

const AttentionItem = styled.li`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: ${({ theme }) => theme.spacing[4]};
  padding: ${({ theme }) => theme.spacing[3]} ${({ theme }) => theme.spacing[4]};
  border-radius: ${({ theme }) => theme.borderRadius.sm};
  border: 1px solid ${({ theme }) => theme.colors.borderSoft};
  background: ${({ theme }) => theme.colors.surface};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
`;

const QuickActions = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[3]};
`;

const TeamMeta = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: ${({ theme }) => theme.spacing[4]};
`;

const TeamStat = styled.div`
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.secondary};

  strong {
    display: block;
    margin-top: ${({ theme }) => theme.spacing[1]};
    font-size: ${({ theme }) => theme.typography.fontSize.xl};
    font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
    color: ${({ theme }) => theme.colors.text.primary};
  }
`;

const ProjectDetailContent: React.FC<{ project: ProjectSummary }> = ({ project }) => {
  const { t } = useLocale();
  const navigate = useNavigate();
  const { data: cc, isLoading } = useProjectCommandCenter(project.id);
  const { data: members } = useProjectMembers(project.id);

  if (isLoading || !cc) {
    return <PanelLoadingState label={t('projects:states.loading')} />;
  }

  const sprint = cc.active_sprint?.sprint;
  const teamCapacity = cc.team_capacity?.metrics;
  const attentionItems = [
    {
      key: 'blocked',
      label: t('projects:backlog.metrics.blocked'),
      value: cc.blocked_work_count,
      icon: HiBan,
      to: ROUTES.PROJECT_BOARD(project.id),
      show: cc.blocked_work_count > 0,
    },
    {
      key: 'overdue',
      label: t('projects:team.col.overdue'),
      value: cc.overdue_work_count,
      icon: HiClock,
      to: ROUTES.PROJECT_BACKLOG(project.id),
      show: cc.overdue_work_count > 0,
    },
    {
      key: 'risks',
      label: t('projects:overview.criticalRisks'),
      value: cc.risks_open,
      icon: HiExclamation,
      to: ROUTES.PROJECT_RISKS(project.id),
      show: cc.risks_open > 0,
    },
  ].filter((item) => item.show);

  return (
    <Row>
      <PageSection title={t('projects:overview.snapshot')}>
        <ProjectsStatsGrid>
          <StatCard
            kpi
            label={t('projects:overview.progress')}
            value={`${cc.progress_percent}%`}
            icon={HiTrendingUp}
          />
          <StatCard
            kpi
            label={t('projects:overview.openWork')}
            value={cc.open_work_count}
            icon={HiCollection}
          />
          <StatCard
            kpi
            label={t('projects:backlog.metrics.blocked')}
            value={cc.blocked_work_count}
            icon={HiBan}
          />
          <StatCard
            kpi
            label={t('projects:stats.health')}
            value={
              <span style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                {cc.project_health?.score ?? '—'}
                {cc.project_health && (
                  <StatusBadge tone={healthStatusTone(cc.project_health.level)} size="sm">
                    {cc.project_health.level}
                  </StatusBadge>
                )}
              </span>
            }
          />
        </ProjectsStatsGrid>
      </PageSection>

      <PageSection title={t('projects:overview.currentSprint')}>
        {sprint && cc.active_sprint ? (
          <>
            <ActiveSprintOverviewCard project={project} variant="simple" />
            <SprintActions>
              <Button
                type="button"
                variant="primary"
                icon={<HiViewBoards aria-hidden />}
                onClick={() => navigate(ROUTES.PROJECT_BOARD(project.id))}
              >
                {t('projects:overview.openBoard')}
              </Button>
              <Button
                type="button"
                variant="secondary"
                onClick={() => navigate(ROUTES.PROJECT_SPRINT(project.id, sprint.id))}
              >
                {t('projects:overview.openSprint')}
              </Button>
            </SprintActions>
          </>
        ) : (
          <ContentPanel variant="inset" padding="lg">
            <PanelEmpty
              title={t('projects:overview.noActiveSprint')}
              hint={t('projects:board.noActiveSprintHint')}
            />
            <SprintActions>
              <Button
                type="button"
                variant="primary"
                onClick={() => navigate(ROUTES.PROJECT_SPRINTS(project.id))}
              >
                {t('projects:sprints.createAction')}
              </Button>
              <Button
                type="button"
                variant="secondary"
                onClick={() => navigate(ROUTES.PROJECT_BACKLOG(project.id))}
              >
                {t('projects:board.goToBacklog')}
              </Button>
            </SprintActions>
          </ContentPanel>
        )}
      </PageSection>

      <PageSection title={t('projects:overview.teamSnapshot')}>
        <ContentPanel variant="elevated" padding="lg">
          <TeamMeta>
            <TeamStat>
              {t('projects:team.totalMembers')}
              <strong>{members?.length ?? 0}</strong>
            </TeamStat>
            <TeamStat>
              {t('projects:overview.teamCapacity')}
              <strong>{teamCapacity?.total_capacity_md ?? '—'}</strong>
            </TeamStat>
            <TeamStat>
              {t('projects:overview.teamUtilization')}
              <strong>
                {teamCapacity?.total_capacity_md
                  ? `${Math.round(
                      ((teamCapacity.assigned_md ?? 0) / Math.max(1, teamCapacity.total_capacity_md)) *
                        100,
                    )}%`
                  : '—'}
              </strong>
            </TeamStat>
          </TeamMeta>
          <SprintActions>
            <Button
              type="button"
              variant="secondary"
              onClick={() => navigate(ROUTES.PROJECT_TEAM(project.id))}
            >
              {t('projects:overview.viewTeam')}
            </Button>
          </SprintActions>
        </ContentPanel>
      </PageSection>

      {attentionItems.length > 0 && (
        <PageSection title={t('projects:overview.attentionRequired')}>
          <AttentionList>
            {attentionItems.map((item) => (
              <AttentionItem key={item.key}>
                <span>
                  <item.icon aria-hidden style={{ marginInlineEnd: 8, verticalAlign: 'middle' }} />
                  {item.label}
                </span>
                <Button type="button" variant="ghost" size="sm" onClick={() => navigate(item.to)}>
                  {item.value} →
                </Button>
              </AttentionItem>
            ))}
          </AttentionList>
        </PageSection>
      )}

      <PageSection title={t('projects:overview.quickActions')}>
        <QuickActions>
          <Button
            type="button"
            variant="primary"
            icon={<HiPlus aria-hidden />}
            onClick={() => navigate(ROUTES.PROJECT_BACKLOG(project.id))}
          >
            {t('projects:overview.addWorkItem')}
          </Button>
          <Button
            type="button"
            variant="secondary"
            onClick={() => navigate(ROUTES.PROJECT_SPRINTS(project.id))}
          >
            {t('projects:sprints.createAction')}
          </Button>
          <Button
            type="button"
            variant="secondary"
            icon={<HiUserAdd aria-hidden />}
            onClick={() => navigate(ROUTES.PROJECT_TEAM(project.id))}
          >
            {t('projects:overview.addMember')}
          </Button>
          <Button
            type="button"
            variant="outline"
            icon={<HiViewBoards aria-hidden />}
            onClick={() => navigate(ROUTES.PROJECT_BOARD(project.id))}
          >
            {t('projects:overview.openBoard')}
          </Button>
        </QuickActions>
      </PageSection>
    </Row>
  );
};

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

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

export default ProjectDetailPage;