import { Tag } from 'antd';
import { ClockCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';

dayjs.extend(relativeTime);

interface ScheduleBadgeProps {
  scheduledPublishAt?: string | null;
  scheduledUnpublishAt?: string | null;
  isPublished?: boolean;
  style?: React.CSSProperties;
}

export default function ScheduleBadge({
  scheduledPublishAt,
  scheduledUnpublishAt,
  isPublished,
  style,
}: ScheduleBadgeProps) {
  // Determine which schedule to show (prioritize publish if not yet published)
  const showPublish = !isPublished && scheduledPublishAt;
  const showUnpublish = isPublished && scheduledUnpublishAt;

  if (!showPublish && !showUnpublish) {
    return null;
  }

  const date = showPublish ? scheduledPublishAt : scheduledUnpublishAt;
  const action = showPublish ? 'Publish' : 'Unpublish';
  const color = showPublish ? 'blue' : 'orange';
  const icon = showPublish ? <ClockCircleOutlined /> : <CheckCircleOutlined />;

  const relativeTime = dayjs(date).fromNow();
  const absoluteTime = dayjs(date).format('MMM D, YYYY HH:mm');

  return (
    <Tag
      color={color}
      icon={icon}
      style={{
        position: 'absolute',
        top: 8,
        right: 8,
        zIndex: 10,
        fontSize: 11,
        ...style,
      }}
      title={`${action} scheduled for ${absoluteTime}`}
    >
      {action} {relativeTime}
    </Tag>
  );
}
