---
import { Icon } from 'astro-icon/components'
import { differenceInDays, isPast } from 'date-fns'

import { verificationStatusesByValue } from '../constants/verificationStatus'
import { cn } from '../lib/cn'

import TimeFormatted from './TimeFormatted.astro'

import type { Prisma } from '@prisma/client'

const RECENTLY_ADDED_DAYS = 7

type Props = {
  service: Prisma.ServiceGetPayload<{
    select: {
      verificationStatus: true
      verificationProofMd: true
      verificationSummary: true
      listedAt: true
      createdAt: true
      verificationSteps: {
        select: {
          status: true
        }
      }
    }
  }>
}

const { service } = Astro.props

const listedDate = service.listedAt ?? service.createdAt
const wasRecentlyAdded = isPast(listedDate) && differenceInDays(new Date(), listedDate) < RECENTLY_ADDED_DAYS
---

{
  service.verificationStatus === 'VERIFICATION_FAILED' ? (
    <div class="mb-4 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
      <p class="flex items-center gap-2">
        <Icon
          name={verificationStatusesByValue.VERIFICATION_FAILED.icon}
          class={cn('size-5', verificationStatusesByValue.VERIFICATION_FAILED.classNames.icon)}
        />
        <span class="font-bold">This service is a SCAM!</span>
        {!!service.verificationProofMd && (
          <a href="#verification" class="cursor-pointer text-red-100 underline">
            Proof
          </a>
        )}
      </p>
      {!!service.verificationSummary && (
        <div class="mt-2 wrap-anywhere whitespace-pre-wrap" set:text={service.verificationSummary} />
      )}
    </div>
  ) : service.verificationStatus === 'COMMUNITY_CONTRIBUTED' ? (
    <div class="mb-3 flex items-center gap-2 rounded-md bg-yellow-600/30 p-2 text-sm text-yellow-200">
      <Icon name="ri:alert-line" class="size-5 text-yellow-400" />
      <span>Community-contributed. Information not reviewed.</span>
    </div>
  ) : wasRecentlyAdded ? (
    <div class="mb-3 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
      This service was {service.listedAt === null ? 'added ' : 'listed '}{' '}
      <TimeFormatted date={listedDate} daysUntilDate={RECENTLY_ADDED_DAYS} />
      {service.verificationStatus !== 'VERIFICATION_SUCCESS' && ' and it is not verified'}. Proceed with
      caution.
    </div>
  ) : service.verificationStatus !== 'VERIFICATION_SUCCESS' ? (
    <div class="mb-3 flex items-center gap-2 rounded-md bg-blue-600/30 p-2 text-sm text-blue-200">
      <Icon name="ri:information-line" class="size-5 text-blue-400" />
      <span>Basic checks passed, but not fully verified.</span>
    </div>
  ) : null
}

{
  service.verificationStatus !== 'VERIFICATION_FAILED' &&
    service.verificationSteps.some((step) => step.status === 'FAILED') && (
      <div class="mb-3 flex items-center gap-2 rounded-md bg-red-900/50 p-2 text-sm text-red-400">
        <Icon
          name={verificationStatusesByValue.VERIFICATION_FAILED.icon}
          class={cn('size-5', verificationStatusesByValue.VERIFICATION_FAILED.classNames.icon)}
        />
        <span>
          This service has failed one or more verification steps. Review the verification details carefully.
        </span>
      </div>
    )
}