import React, { ReactNode } from 'react'

import BaseButton from './BaseButton'

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

type ConnectedEntityNoticeProps = {
  title?: string
  description?: ReactNode
  actions?: ConnectedEntityAction[]
  contextLabel?: string
  contextHref?: string
  contextActionLabel?: string
  className?: string
  compact?: boolean
}

const ConnectedEntityNotice = ({
  title = 'Connected entities',
  description,
  actions = [],
  contextLabel,
  contextHref,
  contextActionLabel = 'Open',
  className = '',
  compact = false,
}: ConnectedEntityNoticeProps) => {
  if (compact) {
    if (!contextLabel) {
      return null
    }

    return (
      <div
        className={`mb-4 inline-flex max-w-full flex-wrap items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-100 ${className}`.trim()}
      >
        <span className="font-semibold uppercase tracking-[0.18em]">Opened from</span>
        <span className="max-w-full break-words font-medium">{contextLabel}</span>
        {contextHref ? (
          <BaseButton
            href={contextHref}
            color="white"
            outline
            small
            label={contextActionLabel}
            className="!px-2.5 !py-0.5"
          />
        ) : null}
      </div>
    )
  }

  return (
    <div
      className={`mb-6 rounded-xl border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-900 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-100 ${className}`.trim()}
    >
      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div className="min-w-0">
          <p className="font-semibold">{title}</p>
          {contextLabel ? (
            <div className="mt-2 inline-flex max-w-full flex-wrap items-center gap-2 rounded-full border border-blue-200/80 bg-white/70 px-3 py-1 text-xs font-medium text-blue-900 dark:border-blue-800 dark:bg-blue-900/40 dark:text-blue-100">
              <span className="font-semibold uppercase tracking-[0.18em]">Opened from</span>
              <span className="break-words">{contextLabel}</span>
              {contextHref ? (
                <BaseButton
                  href={contextHref}
                  color="white"
                  outline
                  small
                  label={contextActionLabel}
                  className="!px-2.5 !py-0.5"
                />
              ) : null}
            </div>
          ) : null}
          {description ? <div className="mt-2 leading-6">{description}</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'}
              />
            ))}
          </div>
        ) : null}
      </div>
    </div>
  )
}

export type { ConnectedEntityAction }
export default ConnectedEntityNotice
