---
import type { HTMLAttributes } from 'astro/types'
import Button from '../Button/index.astro'
import Text from '../Text/index.astro'
import IconAlertOctagon from '../icons/default/IconAlertOctagon.astro'
import IconAlertTriangle from '../icons/default/IconAlertTriangle.astro'
import IconCheckCircle from '../icons/default/IconCheckCircle.astro'
import '../../dist/components/FeedbackPage/styles.css'

export type FeedbackPageType = 'error' | 'success' | 'warning'
export type FeedbackPageSize = 'mobile' | 'desktop'

export type FeedbackPageAction = {
  label: string
  /** Com `href`, o botão sai como link (`<a>`). */
  href?: string
  target?: string
}

/**
 * Same props and markup as the React `FeedbackPage`. No `onClick` on the
 * actions: the buttons carry `data-au-feedback-page="primary"` and
 * `data-au-feedback-page="secondary"` for the page's own `<script>`, or an
 * `href` makes them links. Every HTML attribute is forwarded to the
 * `<section>`.
 */
export type Props = HTMLAttributes<'section'> & {
  /** Error (falhou), Success (deu certo) ou Warning (pede atenção ou espera). Figma: Feedback Page, Type. */
  type?: FeedbackPageType
  title: string
  description?: string
  /** Primeiro botão, Outlined: a ação que resolve. Sem ele a tela sai sem botões (Show Buttons=False). */
  primaryAction?: FeedbackPageAction
  /** Segundo botão, Ghost: o caminho de volta. Só aparece junto do primeiro (Only 1 Button=False o desliga). */
  secondaryAction?: FeedbackPageAction
  /** Força o layout Mobile (botões empilhados) ou Desktop (lado a lado). Sem ela, segue o breakpoint de 1024px. Figma: Size. */
  size?: FeedbackPageSize
  /** Tag do título. */
  titleAs?: 'h1' | 'h2' | 'h3'
}

const ICONS = {
  error: IconAlertOctagon,
  success: IconCheckCircle,
  warning: IconAlertTriangle,
}

const {
  type = 'error',
  title,
  description,
  primaryAction,
  secondaryAction,
  size,
  titleAs = 'h1',
  class: className,
  ...rest
} = Astro.props

// Stand in for the React `useId()`.
const titleId = `au-feedback-page-${crypto.randomUUID().slice(0, 8)}-title`
const Icon = ICONS[type]
const actions = primaryAction ? [primaryAction, secondaryAction].filter(Boolean) : []
---

<section
  class:list={[
    'au-feedback-page',
    `au-feedback-page--type-${type}`,
    size && `au-feedback-page--size-${size}`,
    actions.length > 0 && 'au-feedback-page--with-actions',
    className,
  ]}
  aria-labelledby={titleId}
  {...rest}>
  <div class="au-feedback-page__icon" aria-hidden="true">
    <span class="au-feedback-page__icon-circle">
      <Icon size="medium" />
    </span>
  </div>
  <Text as={titleAs} id={titleId} variant="heading-medium" weight="semibold" class="au-feedback-page__title">
    {title}
  </Text>
  {
    description && (
      <Text as="p" variant="body-medium" color="secondary" class="au-feedback-page__description">
        {description}
      </Text>
    )
  }
  {
    actions.length > 0 && (
      <div class="au-feedback-page__actions">
        {actions.map((action, index) => (
          <Button
            as={action!.href ? 'a' : 'button'}
            href={action!.href}
            target={action!.target}
            type={index === 0 ? 'outlined' : 'ghost'}
            size="medium"
            class:list={[
              'au-feedback-page__action',
              index === 0 ? 'au-feedback-page__action--primary' : 'au-feedback-page__action--secondary',
            ]}
            data-au-feedback-page={index === 0 ? 'primary' : 'secondary'}>
            {action!.label}
          </Button>
        ))}
      </div>
    )
  }
</section>