"use client"

/**
 * Banner — two types of banner for system-level and local-level messaging.
 *
 * 1. SystemBanner: full-width strip at the very top of the app (above the
 *    utility bar). Use `flush` for shell chrome (no radius / outer shadow).
 *    Used for maintenance notices, feature promotions, global alerts.
 *
 * 2. LocalBanner: inline alert within a page section.
 *    Used for page-specific errors, warnings, and informational messages.
 *
 * Both support: info, warning, error, success, and promo variants.
 * Both are dismissible and accessible (role="alert" / role="status").
 */

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "../../lib/utils"
import { Button } from "./button"
import { Tip }    from "./tip"

// ─────────────────────────────────────────────────────────────────────────────
// Variant definitions
// ─────────────────────────────────────────────────────────────────────────────

const VARIANT_CONFIG = {
  info: {
    icon: "fa-circle-info",
    prefix: "fa-light",
    role: "status" as const,
    live: "polite" as const,
  },
  warning: {
    icon: "fa-triangle-exclamation",
    prefix: "fa-light",
    role: "alert" as const,
    live: "assertive" as const,
  },
  error: {
    icon: "fa-circle-exclamation",
    prefix: "fa-light",
    role: "alert" as const,
    live: "assertive" as const,
  },
  success: {
    icon: "fa-circle-check",
    prefix: "fa-light",
    role: "status" as const,
    live: "polite" as const,
  },
  promo: {
    icon: "fa-star-christmas text-brand",
    prefix: "fa-duotone fa-solid",
    role: "status" as const,
    live: "polite" as const,
  },
}

// ─────────────────────────────────────────────────────────────────────────────
// SystemBanner — inline at the top of the main content area
// ─────────────────────────────────────────────────────────────────────────────

const systemBannerActionClassName = cn(
  "inline-flex shrink-0 items-center gap-1 text-inherit text-xs font-semibold",
  "underline underline-offset-2 hover:no-underline",
  "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/50",
)

const systemBannerVariants = cva(
  // No `overflow-hidden` on root — it clips promo `boxShadow` (glow). Clip `decorativeOverlay` in a nested layer instead.
  "relative isolate flex rounded-lg border text-sm transition-[color,background-color,border-color,box-shadow] duration-150 ease-out",
  {
    variants: {
      variant: {
        /* Prominent defaults — chip fill + inverted `background` ink. Chip tokens are
           defined to clear 4.5:1 against `--background` in light, dark, and HC. */
        info:    "bg-chip-1 text-background border-chip-1",
        warning: "bg-chip-4 text-background border-chip-4",
        error:   "bg-destructive text-destructive-foreground border-destructive",
        success: "bg-chip-2 text-background border-chip-2",
        promo:   "bg-gradient-to-r from-brand/14 via-brand/8 to-brand/5 text-foreground border-brand/22 dark:from-brand/20 dark:via-brand/12 dark:to-brand/7 dark:border-brand/26",
      },
      /** Emphasis — "prominent" uses dark solid fills; "subtle" uses soft tinted bg. */
      emphasis: {
        prominent: "",
        subtle: "",
      },
      /** Action placement: "inline" puts the action to the right; "bottom" puts it below the text */
      actionPosition: {
        // flex-wrap so the action button drops to a second line at 200%+ zoom instead of overflowing
        inline: "flex-wrap items-center gap-3 px-4 py-2.5",
        bottom: "flex-col gap-2 px-4 py-3",
      },
    },
    compoundVariants: [
      { emphasis: "subtle", variant: "info",    class: "bg-chip-1/5 text-foreground border-chip-1/30 dark:bg-chip-1/10 dark:border-chip-1/20" },
      { emphasis: "subtle", variant: "warning", class: "bg-chip-4/5 text-foreground border-chip-4/30 dark:bg-chip-4/10 dark:border-chip-4/20" },
      { emphasis: "subtle", variant: "error",   class: "bg-destructive/5 text-foreground border-destructive/30 dark:bg-destructive/10 dark:border-destructive/20" },
      { emphasis: "subtle", variant: "success", class: "bg-chip-2/5 text-foreground border-chip-2/30 dark:bg-chip-2/10 dark:border-chip-2/20" },
      { emphasis: "subtle", variant: "promo",   class: "bg-brand/5 text-foreground border-brand/30 dark:bg-brand/10 dark:border-brand/20" },
    ],
    defaultVariants: { variant: "info", emphasis: "prominent", actionPosition: "inline" },
  }
)

export interface SystemBannerProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof systemBannerVariants> {
  /** Banner title (optional — adds a bold heading) */
  title?: string
  /** The banner message */
  children: React.ReactNode
  /** Whether the banner can be dismissed */
  dismissible?: boolean
  /** Callback when dismissed */
  onDismiss?: () => void
  /** Optional action — renders as a link-style button. Use href for server components, onClick for client. */
  action?: {
    label: string
    href?: string
    onClick?: () => void
  }
  /** Where to place the action: "inline" (right side) or "bottom" (below text) */
  actionPosition?: "inline" | "bottom"
  /** Override the default icon */
  icon?: string
  /** Optional absolutely-positioned decorative layer (e.g. `<AiThinkingOverlay />`). */
  decorativeOverlay?: React.ReactNode
  /**
   * Full-bleed shell strip (above the utility bar). Drops radius, outer
   * shadow, and side borders so the banner reads as chrome, not a card.
   */
  flush?: boolean
}

export function SystemBanner({
  children,
  title,
  variant = "info",
  emphasis = "prominent",
  dismissible = true,
  onDismiss,
  action,
  actionPosition = "inline",
  icon,
  decorativeOverlay,
  flush = false,
  className,
  style,
  ...props
}: SystemBannerProps) {
  const [dismissed, setDismissed] = React.useState(false)
  const config = VARIANT_CONFIG[variant ?? "info"]

  function handleDismiss() {
    setDismissed(true)
    onDismiss?.()
  }

  if (dismissed) return null

  const actionEl = action && (
    action.href ? (
      <a
        href={action.href}
        className={systemBannerActionClassName}
        suppressHydrationWarning
      >
        {action.label}
        <i className="fa-light fa-arrow-right text-xs" aria-hidden="true" />
      </a>
    ) : (
      <button type="button" onClick={action.onClick} className={systemBannerActionClassName}>
        {action.label}
        <i className="fa-light fa-arrow-right text-xs" aria-hidden="true" />
      </button>
    )
  )

  /** Outside-only brand halo (no inset fill — glow does not paint inside the banner). */
  const promoOuterShadow =
    emphasis === "subtle"
      ? "0 10px 36px -6px oklch(from var(--brand-color) l c h / 0.2), 0 2px 12px -4px oklch(from var(--brand-color) l c h / 0.12)"
      : "0 14px 48px -8px oklch(from var(--brand-color) l c h / 0.26), 0 4px 18px -4px oklch(from var(--brand-color) l c h / 0.16)"

  return (
    <div
      data-slot="banner"
      data-banner-flush={flush ? "true" : undefined}
      role={config.role}
      aria-live={config.live}
      className={cn(
        systemBannerVariants({ variant, emphasis, actionPosition }),
        flush && "rounded-none border-x-0 shadow-none",
        className,
      )}
      style={{
        ...(variant === "promo" && !flush ? { boxShadow: promoOuterShadow } : null),
        ...style,
      }}
      suppressHydrationWarning
      {...props}
    >
      {decorativeOverlay ? (
        <div
          className={cn(
            "pointer-events-none absolute inset-0 z-0 overflow-hidden",
            flush ? "rounded-none" : "rounded-lg",
          )}
          aria-hidden
        >
          {decorativeOverlay}
        </div>
      ) : null}
      {/* Icon */}
      <i
        className={cn(
          config.prefix,
          icon ?? config.icon,
          "relative z-[1] shrink-0 text-sm",
          actionPosition === "bottom" ? "mt-0.5" : "",
        )}
        aria-hidden="true"
      />

      {/* Content + inline action */}
      {actionPosition === "inline" ? (
        <>
          <div className="relative z-[1] min-w-0 flex-1">
            {title && <span className="font-semibold me-1.5">{title}</span>}
            <span className="opacity-90">{children}</span>
          </div>
          {actionEl ? <span className="relative z-[1] inline-flex shrink-0">{actionEl}</span> : null}
        </>
      ) : (
        <div className="relative z-[1] min-w-0 flex-1">
          {title && <p className="font-semibold leading-tight mb-0.5">{title}</p>}
          <p className="opacity-90 leading-relaxed">{children}</p>
          {actionEl && <div className="mt-1.5">{actionEl}</div>}
        </div>
      )}

      {/* Dismiss */}
      {dismissible && (
        <Tip label="Dismiss" side="bottom">
          <button
            type="button"
            aria-label="Dismiss banner"
            onClick={handleDismiss}
            className={cn(
              "relative z-[2] inline-flex size-8 shrink-0 items-center justify-center rounded transition-colors",
              actionPosition === "bottom" ? "absolute top-2.5 right-2.5" : "",
              "hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            )}
          >
            <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
          </button>
        </Tip>
      )}
    </div>
  )
}

// ─────────────────────────────────────────────────────────────────────────────
// LocalBanner — inline, within page sections
// ─────────────────────────────────────────────────────────────────────────────

const localBannerVariants = cva(
  "flex items-start gap-3 rounded-lg border px-4 py-3 text-sm transition-[color,background-color,border-color] duration-150 ease-out",
  {
    variants: {
      variant: {
        info:    "border-chip-1/30 bg-chip-1/5 text-foreground dark:bg-chip-1/10 dark:border-chip-1/20",
        warning: "border-chip-4/30 bg-chip-4/5 text-foreground dark:bg-chip-4/10 dark:border-chip-4/20",
        error:   "border-destructive/30 bg-destructive/5 text-foreground dark:bg-destructive/10 dark:border-destructive/20",
        success: "border-chip-2/30 bg-chip-2/5 text-foreground dark:bg-chip-2/10 dark:border-chip-2/20",
        promo:   "border-brand/30 bg-brand/5 text-foreground dark:bg-brand/10 dark:border-brand/20",
      },
    },
    defaultVariants: { variant: "info" },
  }
)

export interface LocalBannerProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof localBannerVariants> {
  /** Banner title (optional) */
  title?: string
  /** Banner message */
  children: React.ReactNode
  /** Whether the banner can be dismissed */
  dismissible?: boolean
  /** Callback when dismissed */
  onDismiss?: () => void
  /** Optional action — renders as link (href) or button (onClick) */
  action?: {
    label: string
    href?: string
    onClick?: () => void
  }
  /** Optional retry action for error states */
  retry?: {
    label?: string
    onClick: () => void
  }
  /** Override the default icon */
  icon?: string
}

export function LocalBanner({
  children,
  title,
  variant = "info",
  dismissible = false,
  onDismiss,
  action,
  retry,
  icon,
  className,
  ...props
}: LocalBannerProps) {
  const [dismissed, setDismissed] = React.useState(false)
  const config = VARIANT_CONFIG[variant ?? "info"]

  function handleDismiss() {
    setDismissed(true)
    onDismiss?.()
  }

  if (dismissed) return null

  return (
    <div
      data-slot="local-banner"
      role={config.role}
      aria-live={config.live}
      className={cn(localBannerVariants({ variant }), className)}
      {...props}
    >
      {/* Icon */}
      <i
        className={cn(config.prefix, icon ?? config.icon, "text-md shrink-0 mt-0.5")}
        aria-hidden="true"
      />

      {/* Content */}
      <div className="flex-1 min-w-0">
        {title && (
          <p className="font-semibold leading-tight mb-0.5">{title}</p>
        )}
        <div className="text-sm leading-relaxed opacity-90">{children}</div>

        {/* Actions */}
        {(action || retry) && (
          <div className="flex items-center gap-2 mt-2.5">
            {retry && (
              <Button size="xs" variant="outline" onClick={retry.onClick}>
                <i className="fa-light fa-arrow-rotate-right text-xs" aria-hidden="true" />
                {retry.label ?? "Retry"}
              </Button>
            )}
            {action && (
              action.href ? (
                <a href={action.href} className="inline-flex items-center gap-1 text-xs font-semibold underline underline-offset-2 hover:no-underline">
                  {action.label} <i className="fa-light fa-arrow-right text-xs" aria-hidden="true" />
                </a>
              ) : (
                <Button size="xs" variant="outline" onClick={action.onClick}>
                  {action.label}
                </Button>
              )
            )}
          </div>
        )}
      </div>

      {/* Dismiss */}
      {dismissible && (
        <Tip label="Dismiss" side="left">
          <button
            type="button"
            aria-label="Dismiss"
            onClick={handleDismiss}
            className={cn(
              "inline-flex items-center justify-center size-8 rounded transition-colors shrink-0",
              "hover:bg-current/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
            )}
          >
            <i className="fa-light fa-xmark text-xs" aria-hidden="true" />
          </button>
        </Tip>
      )}
    </div>
  )
}