/**
 * ConsentBanner — site-wide cookie consent strip.
 *
 * Renders a fixed bottom-of-viewport banner that hides when consent has
 * already been recorded.  Composes Phase 2 Button variants and reads state
 * via the Phase 3 useConsent hook.  No global Provider required.
 *
 * ARIA: role="region" aria-label="Cookie consent"
 * Motion: CSS transition only; respects prefers-reduced-motion.
 */
import { Button } from '../primitives/button'
import { useConsent } from '../hooks/useConsent'

export interface ConsentBannerProps {
  /** Banner heading text */
  title?: string
  /** Descriptive body shown beneath the title */
  description?: string
  /** Label for the "accept all" primary button */
  acceptLabel?: string
  /** Label for the "reject all" secondary button */
  rejectLabel?: string
  /** Label for the preferences link button */
  preferencesLabel?: string
  /** URL for the privacy policy (rendered as an inline link) */
  policyHref?: string
  /**
   * Called when the user clicks the "Preferences" button.
   * When omitted the banner falls back to a hash-route approach consumers control.
   */
  onPreferences?: () => void
}

export function ConsentBanner({
  title = 'We use cookies',
  description = 'We use cookies and similar technologies to improve your experience. You can accept all cookies, reject non-essential ones, or manage your preferences.',
  acceptLabel = 'Accept all',
  rejectLabel = 'Reject all',
  preferencesLabel = 'Preferences',
  policyHref,
  onPreferences,
}: ConsentBannerProps) {
  const { preferences, acceptAll, rejectAll } = useConsent()

  // Hide when consent has already been recorded.
  if (preferences !== null) {
    return null
  }

  function handleAccept() {
    acceptAll()
  }

  function handleReject() {
    rejectAll()
  }

  function handlePreferences() {
    if (onPreferences) {
      onPreferences()
    } else {
      // Fall back to a hash route consumers control.
      window.location.hash = '#consent-preferences'
    }
  }

  return (
    <div
      role="region"
      aria-label="Cookie consent"
      data-slot="consent-banner"
      className={[
        'fixed bottom-0 left-0 right-0 z-50',
        'bg-background/95 backdrop-blur-[20px]',
        'border-t border-border-glass',
        'px-4 py-4 sm:px-6',
        'motion-safe:animate-in motion-safe:slide-in-from-bottom-4 motion-safe:duration-300',
      ].join(' ')}
    >
      <div className="mx-auto flex max-w-7xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex-1 space-y-1">
          <p className="text-foreground text-sm font-semibold">{title}</p>
          <p className="text-foreground-muted text-sm">
            {description}
            {policyHref && (
              <>
                {' '}
                <a
                  href={policyHref}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-primary underline-offset-4 hover:underline"
                >
                  Privacy policy
                </a>
              </>
            )}
          </p>
        </div>

        <div className="flex flex-shrink-0 flex-wrap items-center gap-2">
          <Button variant="link" size="sm" type="button" onClick={handlePreferences}>
            {preferencesLabel}
          </Button>
          <Button variant="secondary" size="sm" type="button" onClick={handleReject}>
            {rejectLabel}
          </Button>
          <Button variant="default" size="sm" type="button" onClick={handleAccept}>
            {acceptLabel}
          </Button>
        </div>
      </div>
    </div>
  )
}
