import { cva } from 'class-variance-authority';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { SupportTicketPriority, SupportTicketStatus } from '@/gql/graphql';
import { cn } from '@/lib/utils';

const statusVariants = cva('inline-flex items-center text-sm font-semibold', {
  variants: {
    variant: {
      [SupportTicketStatus.Open]: 'text-yellow-400',
      [SupportTicketStatus.Solved]: 'text-neutral-10',
    },
  },
  defaultVariants: {
    variant: SupportTicketStatus.Open,
  },
});

export const statusDescription: Record<SupportTicketStatus, string> = {
  [SupportTicketStatus.Open]: 'Staff is working on the ticket	',
  [SupportTicketStatus.Solved]: 'The ticket has been solved',
};

export function Status({ className, status }: { status: SupportTicketStatus; className?: string }) {
  return (
    <Tooltip>
      <TooltipTrigger>
        <div className={cn(statusVariants({ variant: status }), className)}>
          <div>{status}</div>
        </div>
      </TooltipTrigger>
      <TooltipContent>{statusDescription[status]}</TooltipContent>
    </Tooltip>
  );
}

const priorityVariants = cva(
  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold',
  {
    variants: {
      variant: {
        [SupportTicketPriority.Normal]: 'border-transparent bg-red-400 text-neutral-12',
        [SupportTicketPriority.High]: 'border-transparent bg-red-600 text-neutral-12',
        [SupportTicketPriority.Urgent]: 'border-transparent bg-red-800 text-neutral-12',
      },
    },
    defaultVariants: {
      variant: SupportTicketPriority.Normal,
    },
  },
);

export const priorityDescription: Record<SupportTicketPriority, string> = {
  [SupportTicketPriority.Normal]:
    'Minor problems or general questions with little to no impact on functionality, often involving small nuisances or easily bypassed errors.',
  [SupportTicketPriority.High]:
    'Problems that significantly hinder functionality, resulting in severe performance degradation while the platform remains operational.',
  [SupportTicketPriority.Urgent]:
    'Problems that halt essential functionality, preventing critical business operations with no workarounds available.',
};

export function Priority({
  className,
  level,
}: {
  level: SupportTicketPriority;
  className?: string;
}) {
  return (
    <Tooltip>
      <TooltipTrigger>
        <div className={cn(priorityVariants({ variant: level }), className)}>{level}</div>
      </TooltipTrigger>
      <TooltipContent>{priorityDescription[level]}</TooltipContent>
    </Tooltip>
  );
}
