import React, { ReactNode } from 'react'

import BaseButton from './BaseButton'

type ConnectedEntityCardDetail = {
  label: string
  value?: ReactNode
}

type ConnectedEntityCardAction = {
  href: string
  label: string
  color?: string
  outline?: boolean
  small?: boolean
  className?: string
}

type ConnectedEntityCardProps = {
  entityLabel: string
  title?: ReactNode
  titleFallback?: string
  badges?: ReactNode[]
  details?: ConnectedEntityCardDetail[]
  actions?: ConnectedEntityCardAction[]
  helperText?: ReactNode
  className?: string
}

const ConnectedEntityCard = ({
  entityLabel,
  title,
  titleFallback = 'Unnamed record',
  badges = [],
  details = [],
  actions = [],
  helperText,
  className = '',
}: ConnectedEntityCardProps) => {
  const visibleDetails = details.filter((detail) => {
    const value = detail?.value

    return value !== undefined && value !== null && value !== ''
  })

  const visibleBadges = badges.filter(Boolean)

  return (
    <div
      className={`rounded-xl border border-blue-100 bg-white p-4 shadow-sm dark:border-blue-950/60 dark:bg-dark-900 ${className}`.trim()}
    >
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-2">
            <span className="rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-100">
              {entityLabel}
            </span>
            <span className="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 dark:bg-dark-700 dark:text-gray-100">
              Linked record
            </span>
          </div>

          <p className="mt-3 break-words text-base font-semibold text-gray-800 dark:text-gray-100">
            {title || titleFallback}
          </p>

          {visibleBadges.length ? <div className="mt-3 flex flex-wrap gap-2">{visibleBadges}</div> : null}

          {visibleDetails.length ? (
            <div className="mt-3 flex flex-wrap gap-2">
              {visibleDetails.map((detail) => (
                <span
                  key={`${detail.label}-${String(detail.value)}`}
                  className="rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 dark:bg-dark-700 dark:text-gray-100"
                >
                  <span className="font-semibold text-gray-900 dark:text-gray-100">{detail.label}:</span>{' '}
                  {detail.value}
                </span>
              ))}
            </div>
          ) : null}
        </div>

        {actions.length ? (
          <div className="flex flex-col gap-2 sm:items-end">
            {actions.map((action) => (
              <BaseButton
                key={`${action.href}-${action.label}`}
                href={action.href}
                color={action.color || 'info'}
                outline={action.outline}
                small={action.small ?? true}
                label={action.label}
                className={action.className || 'w-full sm:w-auto'}
              />
            ))}
            {helperText ? (
              <p className="text-xs font-medium text-blue-700 dark:text-blue-200 sm:max-w-[16rem] sm:text-right">
                {helperText}
              </p>
            ) : null}
          </div>
        ) : null}
      </div>
    </div>
  )
}

export type { ConnectedEntityCardAction, ConnectedEntityCardDetail }
export default ConnectedEntityCard
