import React from 'react';
import styled from 'styled-components';
import { HiArrowLeft } from 'react-icons/hi';
import { useNavigate, useParams } from 'react-router-dom';
import { Button } from '@/shared/components/ui';
import { PageSection } from '@/shared/components/layout/PageSection';
import { PanelLoadingState } from '@/shared/components/ui/PageState';
import { ProjectPageShell } from '@/features/projects/components/ProjectPageShell';
import { WorkItemDetailTabs } from '@/features/projects/components/WorkItemDetailTabs';
import { ManDayBadge } from '@/features/projects/components/ManDayBadge';
import { useLocale } from '@/app/providers/LocaleProvider';
import { useProjectPermissions } from '@/features/projects/hooks/useProjectPermissions';
import { ROUTES } from '@/shared/constants/routes';
import { useWorkItem } from '@/features/projects/hooks/useWorkItem';

const Hero = styled.header`
  margin-bottom: ${({ theme }) => theme.spacing[6]};
`;

const TicketKey = styled.span`
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  color: ${({ theme }) => theme.colors.text.tertiary};
  letter-spacing: 0.04em;
`;

const Title = styled.h1`
  margin: ${({ theme }) => `${theme.spacing[2]} 0 ${theme.spacing[3]}`};
  font-size: ${({ theme }) => theme.typography.fontSize['2xl']};
  font-family: ${({ theme }) => theme.typography.fontFamily.headline};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  color: ${({ theme }) => theme.colors.text.primary};
`;

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

interface WorkItemContentProps {
  projectId: string;
  ticketId: string;
  readOnly: boolean;
}

const WorkItemContent: React.FC<WorkItemContentProps> = ({ projectId, ticketId, readOnly }) => {
  const { t } = useLocale();
  const navigate = useNavigate();
  const { data: item, isLoading, error } = useWorkItem(projectId, ticketId);

  const tabLabels = {
    overview: t('projects:workItem.tabs.overview'),
    acceptance: t('projects:workItem.tabs.acceptance'),
    dependencies: t('projects:workItem.tabs.dependencies'),
    subtasks: t('projects:workItem.tabs.subtasks'),
    comments: t('projects:workItem.tabs.comments'),
    history: t('projects:workItem.tabs.history'),
    title: t('projects:workItem.fields.title'),
    description: t('projects:workItem.fields.description'),
    status: t('projects:workItem.fields.status'),
    priority: t('projects:workItem.fields.priority'),
    sprint: t('projects:workItem.fields.sprint'),
    estimate: t('projects:workItem.fields.estimate'),
    storyPoints: t('projects:workItem.fields.storyPoints'),
    dueDate: t('projects:workItem.fields.dueDate'),
    moreDetails: t('projects:workItem.moreDetails'),
    suggestAssignee: t('projects:workItem.suggestAssignee'),
    addCriterion: t('projects:workItem.acceptance.add'),
    acceptanceEmpty: t('projects:workItem.acceptance.empty'),
    delete: t('projects:workItem.acceptance.delete'),
    subtaskTitle: t('projects:workItem.subtasks.title'),
    addSubtask: t('projects:workItem.subtasks.add'),
    subtasksEmpty: t('projects:workItem.subtasksEmpty'),
    addComment: t('projects:workItem.comments.add'),
    postComment: t('projects:workItem.comments.post'),
    commentsEmpty: t('projects:workItem.comments.empty'),
    historyEmpty: t('projects:workItem.history.empty'),
    loading: t('projects:states.loading'),
    unknown: t('common:unknown'),
    system: t('projects:workItem.history.system'),
  };

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

  if (error || !item) {
    return <p>{t('projects:states.error')}</p>;
  }

  return (
    <>
      <Button
        type="button"
        variant="ghost"
        size="lg"
        icon={<HiArrowLeft />}
        onClick={() => navigate(ROUTES.PROJECT_BACKLOG(projectId))}
        style={{ marginBottom: '1.5rem' }}
      >
        {t('projects:workItem.back')}
      </Button>
      <PageSection>
        <Hero>
          <TicketKey>{item.ticket_number}</TicketKey>
          <Title>{item.subject}</Title>
          <BadgeRow>
            {item.estimate_md != null && <ManDayBadge value={item.estimate_md} />}
            {item.status && (
              <span style={{ fontSize: '0.875rem' }}>{item.status.name_en}</span>
            )}
          </BadgeRow>
        </Hero>
        <WorkItemDetailTabs
          projectId={projectId}
          ticketId={ticketId}
          item={item}
          readOnly={readOnly}
          labels={tabLabels}
        />
      </PageSection>
    </>
  );
};

const WorkItemDetailInner: React.FC<{
  projectId: string;
  ticketId: string;
  project: import('@/features/projects/types/project.types').ProjectSummary;
}> = ({ projectId, ticketId, project }) => {
  const { readOnly } = useProjectPermissions(project);
  return <WorkItemContent projectId={projectId} ticketId={ticketId} readOnly={readOnly} />;
};

const WorkItemDetailPage: React.FC = () => {
  const { id: projectId, ticketId } = useParams<{ id: string; ticketId: string }>();

  if (!projectId || !ticketId) {
    return null;
  }

  return (
    <ProjectPageShell projectId={projectId}>
      {({ project }) => (
        <WorkItemDetailInner projectId={projectId} ticketId={ticketId} project={project} />
      )}
    </ProjectPageShell>
  );
};

export default WorkItemDetailPage;