import React from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Card, StatusBadge } from '@/shared/components/ui';
import type { TicketSummary } from '@/features/tickets/types/ticket.types';
import {
  deriveSlaIndicator,
  formatDateTime,
  localizedName,
  priorityTone,
  statusTone,
} from '@/features/tickets/utils/ticketDisplay';

const TicketCard = styled(Card)`
  transition:
    box-shadow ${({ theme }) => theme.transitions.fast},
    border-color ${({ theme }) => theme.transitions.fast},
    transform ${({ theme }) => theme.transitions.fast};
`;

const TicketHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: ${({ theme }) => theme.spacing[4]};
  margin-bottom: ${({ theme }) => theme.spacing[3]};
`;

const TicketTitle = styled.h3`
  font-size: ${({ theme }) => theme.typography.fontSize.lg};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  margin: 0 0 ${({ theme }) => theme.spacing[2]};
  text-align: start;
  color: ${({ theme }) => theme.colors.text.primary};
`;

const TicketNumber = styled.span`
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
  color: ${({ theme }) => theme.colors.text.tertiary};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.wide};
`;

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

const BadgeRow = styled.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${({ theme }) => theme.layout.inlineGap};
  justify-content: flex-end;
`;

interface TicketListCardProps {
  ticket: TicketSummary;
  onClick: () => void;
}

export const TicketListCard: React.FC<TicketListCardProps> = ({ ticket, onClick }) => {
  const { t, locale } = useLocale();
  const sla = deriveSlaIndicator(ticket);

  return (
    <TicketCard variant="elevated" padding="md" interactive onClick={onClick}>
      <TicketHeader>
        <div>
          <TicketNumber>#{ticket.ticket_number}</TicketNumber>
          <TicketTitle>{ticket.subject}</TicketTitle>
          <TicketMeta>
            <span>
              {t('tickets:fields.requester')}: {ticket.requester.name}
            </span>
            <span>•</span>
            <span>
              {t('tickets:fields.assignee')}:{' '}
              {ticket.assignee?.name ?? t('tickets:unassigned')}
            </span>
            <span>•</span>
            <span>
              {t('tickets:fields.updatedAt')}: {formatDateTime(ticket.updated_at, locale)}
            </span>
          </TicketMeta>
        </div>
        <BadgeRow>
          <StatusBadge tone={statusTone(ticket.status)} size="sm" dot>
            {localizedName(ticket.status, locale)}
          </StatusBadge>
          <StatusBadge tone={priorityTone(ticket.priority)} size="sm">
            {localizedName(ticket.priority, locale)}
          </StatusBadge>
          <StatusBadge tone={sla.tone} size="sm">
            {t(`tickets:sla.${sla.labelKey}`)}
          </StatusBadge>
        </BadgeRow>
      </TicketHeader>
    </TicketCard>
  );
};