import React from 'react';
import { CheckCircle } from 'lucide-react';
import { CRM_CONVERTED_LEAD_TARGET_LINKS } from './action-surface-policy';

export interface CrmConvertedLeadBannerHost {
  navigateToRecord: (objectApiName: string, recordId: string) => void;
}

export interface CrmConvertedLeadBannerProps {
  record: Record<string, unknown> | null | undefined;
  host: CrmConvertedLeadBannerHost;
}

export const CrmConvertedLeadBanner: React.FC<CrmConvertedLeadBannerProps> = ({
  record,
  host,
}) => {
  const targetLinks = CRM_CONVERTED_LEAD_TARGET_LINKS.flatMap((link) => {
    const recordId = record?.[link.idField] as string | null | undefined;
    return recordId ? [{ ...link, recordId }] : [];
  });

  return (
    <div
      role="status"
      data-testid="header-banner-panel"
      className="mb-6 flex items-start gap-3 rounded-lg border border-green-200 bg-green-50 px-4 py-3"
    >
      <div className="flex-shrink-0 rounded-full bg-green-100 p-1.5">
        <CheckCircle className="h-4 w-4 text-green-600" />
      </div>

      <div className="flex-1 min-w-0">
        <p className="text-sm font-semibold text-green-900 uppercase tracking-wide">
          Converted
        </p>

        {targetLinks.length > 0 && (
          <div className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1">
            {targetLinks.map((link) => (
              <button
                key={link.idField}
                type="button"
                className="text-sm text-green-700 underline hover:text-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 rounded"
                onClick={() => host.navigateToRecord(link.objectApiName, link.recordId)}
              >
                {link.label}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};