import React from 'react';
import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Card, StatusBadge } 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 { WorkItemsList } from '@/features/projects/components/projectsLayout';
import { useProjectWorkload } from '@/features/projects/hooks/useProjectAnalytics';
import { workloadStatusTone } from '@/features/projects/utils/projectDisplay';

const Metrics = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.spacing[3]} ${({ theme }) => theme.spacing[4]};
  margin-top: ${({ theme }) => theme.spacing[3]};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.secondary};
`;

const UserName = styled.strong`
  font-size: ${({ theme }) => theme.typography.fontSize.base};
  color: ${({ theme }) => theme.colors.text.primary};
`;

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

  return (
    <ProjectPageShell projectId={id}>
      {() => (
        <PageSection title={t('projects:nav.workload')}>
          {isLoading ? (
            <PanelLoadingState label={t('projects:states.loading')} />
          ) : (data?.users ?? []).length === 0 ? (
            <PanelEmpty title={t('projects:workload.empty')} />
          ) : (
            <WorkItemsList>
              {(data?.users ?? []).map((user) => (
                <Card key={user.user_id} variant="elevated" padding="md">
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
                    <UserName>{user.name ?? user.user_id}</UserName>
                    <StatusBadge tone={workloadStatusTone(user.status)} size="sm">
                      {user.status}
                    </StatusBadge>
                  </div>
                  <Metrics>
                    <span>
                      {t('projects:workload.tickets')}: {user.assigned_tickets}
                    </span>
                    <span>
                      {t('projects:manDay.assigned')}: {user.assigned_md} {t('projects:manDay.unit')}
                    </span>
                    <span>
                      {t('projects:workload.overdue')}: {user.overdue_count}
                    </span>
                    <span>
                      {t('projects:workload.load')}: {user.load_percent}%
                    </span>
                  </Metrics>
                </Card>
              ))}
            </WorkItemsList>
          )}
        </PageSection>
      )}
    </ProjectPageShell>
  );
};

export default ProjectWorkloadPage;