import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Card } from '@/shared/components/ui';
import { ROUTES } from '@/shared/constants/routes';
import { localizedName } from '@/features/tickets/utils/ticketDisplay';
import type { TicketSummary } from '@/features/tickets/types/ticket.types';

const TicketCard = styled(Card)`
  text-align: start;
  transition: box-shadow ${({ theme }) => theme.transitions.fast};
`;

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

const SubjectLink = styled(Link)`
  font-size: ${({ theme }) => theme.typography.fontSize.lg};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  color: ${({ theme }) => theme.colors.text.primary};
  text-decoration: none;

  &:hover {
    color: ${({ theme }) => theme.colors.primary};
  }
`;

const StatusBadge = styled.span<{ $color: string }>`
  display: inline-block;
  padding: 2px 8px;
  border-radius: ${({ theme }) => theme.borderRadius.full};
  background: ${({ $color }) => $color}22;
  color: ${({ $color }) => $color};
  font-size: ${({ theme }) => theme.typography.fontSize.xs};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
`;

interface DepartmentPortalTicketCardProps {
  ticket: TicketSummary;
  showDepartment?: boolean;
}

export const DepartmentPortalTicketCard: React.FC<DepartmentPortalTicketCardProps> = ({
  ticket,
  showDepartment = false,
}) => {
  const { locale } = useLocale();
  const statusName = localizedName(ticket.status, locale);
  const priorityName = localizedName(ticket.priority, locale);

  return (
    <TicketCard variant="outlined" padding="md">
      <Meta>
        <span>{ticket.ticket_number}</span>
        <StatusBadge $color={ticket.status.color}>{statusName}</StatusBadge>
        <span>{priorityName}</span>
        {showDepartment ? <span>{ticket.department.name}</span> : null}
        <span>{new Date(ticket.created_at).toLocaleDateString(locale)}</span>
      </Meta>
      <SubjectLink to={ROUTES.TICKET_DETAIL(ticket.id)}>{ticket.subject}</SubjectLink>
    </TicketCard>
  );
};