import React from "react";
import { cn } from "@/lib/utils";
import { Button } from "./button";

/**
 * Sidebar panel showing the assigned advisor's name and a chat CTA.
 *
 * Two states:
 *  - **Assigned** (`brokerName` provided): displays name, role, and a
 *    "Chat with your advisor" button.
 *  - **Unassigned** (no `brokerName`): displays a CTA to send a broker request.
 *
 * In both states the heading "Contact your advisor for a clear picture" is shown.
 */

// ─── Types ────────────────────────────────────────────────────────────────────

export type BrokerRole = "mortgage-broker" | "financial-planner";

export interface BrokerInfoPanelProps {
  /** Assigned broker's full name. Omit to show the unassigned state. */
  brokerName?: string;
  /** Role label shown next to the name. Defaults to "mortgage-broker". */
  brokerRole?: BrokerRole;
  /**
   * Broker's contact phone number.
   * @deprecated Kept for API compatibility; no longer displayed.
   */
  brokerPhone?: string;
  /**
   * Broker's contact email address.
   * @deprecated Kept for API compatibility; no longer displayed.
   */
  brokerEmail?: string;
  /** Called when the user clicks "Chat with your advisor" (assigned state) */
  onChat?: () => void;
  /** Called when the user clicks "Send Broker Request" (unassigned state only) */
  onRequestBroker?: () => void;
  className?: string;
}

// ─── Constants ────────────────────────────────────────────────────────────────

const ROLE_LABELS: Record<BrokerRole, string> = {
  "mortgage-broker": "Mortgage Broker",
  "financial-planner": "Financial Planner",
};

// ─── Component ────────────────────────────────────────────────────────────────

export function BrokerInfoPanel({
  brokerName,
  brokerRole = "mortgage-broker",
  onChat,
  onRequestBroker,
  className,
}: BrokerInfoPanelProps) {
  return (
    <div
      className={cn(
        "flex w-full flex-col items-end gap-2 border-b border-border px-6 py-4",
        className,
      )}
    >
      <p className="text-sm font-semibold text-foreground">
        Contact your advisor for a{" "}
        <span className="text-primary">clear picture</span>
      </p>

      {brokerName ? (
        <>
          <div className="flex flex-wrap items-center gap-2 text-sm font-bold leading-tight text-foreground">
            <span>{brokerName}</span>
            <span className="text-muted-foreground">|</span>
            <span className="font-normal">{ROLE_LABELS[brokerRole]}</span>
          </div>

          <Button variant="outline" size="sm" className="mt-1" onClick={onChat}>
            Chat with your advisor
          </Button>
        </>
      ) : (
        <Button
          variant="outline"
          size="sm"
          className="mt-2"
          onClick={onRequestBroker}
        >
          Send Broker Request
        </Button>
      )}
    </div>
  );
}