import * as React from "react";
import { Bot, ChevronLeft } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * PageTopBar — WealthX Design System
 *
 * Sticky top-of-page bar. Sits at the top of the main content area,
 * separated from the content by a bottom border. Holds the page title
 * and action buttons.
 *
 * Used by: Loan CRM, Contact, AI Builder, and other data-heavy pages.
 * For an in-page title block with a description, use PageHeader instead.
 *
 * Layout:
 *   [Title]          [page-specific actions…]  [Ask Support]
 *
 * "Ask Support" is always pinned to the far right when onAskSupport is
 * provided — it is never passed through the actions slot.
 */

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

export interface PageTopBarProps {
  /** Page title shown on the left */
  title: string;
  /**
   * When provided, a back arrow button is rendered before the title — for
   * pages reached by drilling in from a list (e.g. a board opened from a grid).
   */
  onBack?: () => void;
  /** Page-specific action elements (buttons, dropdowns, etc.) */
  actions?: React.ReactNode;
  /**
   * When provided, renders the "Ask Support" button pinned to the far right,
   * after all page-specific actions. The handler should open the SupportAgentPanel.
   */
  onAskSupport?: () => void;
  className?: string;
}

// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------

export function PageTopBar({
  title,
  onBack,
  actions,
  onAskSupport,
  className,
}: PageTopBarProps) {
  return (
    <div
      data-slot="page-top-bar"
      className={cn(
        "flex shrink-0 items-center justify-between gap-4",
        "border-b border-border bg-background px-6 py-3",
        className,
      )}
    >
      {/* Title (optionally preceded by a back arrow) */}
      <div className="flex min-w-0 items-center gap-2">
        {onBack && (
          <Button
            variant="ghost"
            size="icon"
            className="size-7 shrink-0"
            onClick={onBack}
            aria-label="Back"
          >
            <ChevronLeft className="size-4" />
          </Button>
        )}
        <h1 className="truncate text-lg font-semibold leading-tight">
          {title}
        </h1>
      </div>

      {/* Right side: page actions + Ask Support (always last) */}
      <div className="flex items-center gap-2">
        {actions}
        {onAskSupport && (
          <Button variant="outline" size="sm" onClick={onAskSupport}>
            <Bot className="size-3.5" aria-hidden="true" />
            Ask Support
          </Button>
        )}
      </div>
    </div>
  );
}