import type { AttentionItem } from './AttentionPanel'
import { LinkButton } from './LinkButton'
import { safeHttpUrl } from './safe-url'

const STRIPE_COLOR: Record<AttentionItem['severity'], string> = {
  critical: 'bg-[var(--mod-color-run-severity-critical)]',
  action: 'bg-[var(--mod-color-run-severity-action)]',
  info: 'bg-[var(--mod-color-run-severity-info)]',
}

const secondaryActionClass =
  'inline-flex min-h-11 items-center rounded-md border border-border bg-transparent px-4 text-sm font-semibold text-fg no-underline hover:bg-surface-raised focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent'

export function AttentionRow({ item }: { item: AttentionItem }) {
  return (
    <div
      role="listitem"
      data-attention-row={item.id}
      className="col-span-full grid min-w-0 grid-cols-subgrid items-center border-t border-border py-3 first:border-t-0"
    >
      <span className={`row-span-3 min-h-11 w-1 rounded-sm lg:row-auto ${STRIPE_COLOR[item.severity]}`} />
      <div className="min-w-0 px-4">
        <strong className="block text-sm font-semibold text-fg">{item.title}</strong>
        {item.sub && <span className="mt-0.5 block text-xs text-fg-muted">{item.sub}</span>}
      </div>
      <div className="col-start-2 min-w-0 px-4 text-sm text-fg-muted lg:col-auto">{item.detail}</div>
      <div className="col-start-2 flex min-w-0 flex-wrap justify-end gap-2 px-4 lg:col-auto">
        {item.actions.map((action) => {
          if ('href' in action && action.href) {
            return action.kind === 'primary' ? (
              <LinkButton key={action.label} href={safeHttpUrl(action.href)}>
                {action.label}
              </LinkButton>
            ) : (
              <a key={action.label} href={safeHttpUrl(action.href)} className={secondaryActionClass}>
                {action.label}
              </a>
            )
          }

          if (!('onClick' in action)) return null

          const clickAction = action as Extract<typeof action, { onClick(): void }>

          return clickAction.kind === 'primary' ? (
            <LinkButton key={clickAction.label} onClick={clickAction.onClick}>
              {clickAction.label}
            </LinkButton>
          ) : (
            <button
              key={clickAction.label}
              type="button"
              onClick={clickAction.onClick}
              className={secondaryActionClass}
            >
              {clickAction.label}
            </button>
          )
        })}
      </div>
    </div>
  )
}