'use client';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import GradientButton from '@/Component/Common/Forms/GradientButton';
import NeedHelpDropdown from '@/Component/Common/NeedHelpDropdown';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { formatNumber } from '@/Utils/Other/FormateNumbers';
import { formatNumberWithCommas } from '@/Utils/Other/FormatNumberWithCommas';
import { getStageColorClass, getStageLabel, STAGE_KEYS } from './stageUtils';
import { FiArrowLeft } from 'react-icons/fi';
import { FaChevronRight } from 'react-icons/fa';

const InfluencerBanner = (props: {
  setSelectedConversation: (conversation: any) => void;
  ManagementDetailData: any;
  translations: any;
  onViewProfile: () => void;
  needHelpOptions?: { id: string; label: string; onClick: () => void }[];
  showNeedHelp?: boolean;
  onChaseDraft?: () => void;
  onChasePublish?: () => void;
  chasePending?: boolean;
}) => {
  const {
    setSelectedConversation,
    ManagementDetailData,
    translations,
    onViewProfile,
    needHelpOptions = [],
    showNeedHelp,
    onChaseDraft,
    onChasePublish,
    chasePending,
  } = props;
  const influencer = ManagementDetailData?.influencerDetails;
  const campaignInfluencer = ManagementDetailData?.campaign?.campaignInfluencers?.[0];
  const status = campaignInfluencer?.status;
  const name = influencer?.display_name;
  const currency = campaignInfluencer?.currency || ManagementDetailData?.campaign?.currency || 'HKD';
  const rate = campaignInfluencer?.influencer_budget;
  const engRate = influencer?.engagement_ratio;
  const followers = influencer?.total_followers;
  const showViewProfile = [STAGE_KEYS.QUOTATION, STAGE_KEYS.DRAFT_READY, STAGE_KEYS.COMPLETION_REQUEST].includes(
    status as any
  );

  return (
    <div
      data-sidebar-trigger
      className="flex items-center justify-between gap-3 px-4 py-3 border-b border-lightGray bg-white cursor-pointer"
      onClick={onViewProfile}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => e.key === 'Enter' && onViewProfile()}
    >
      <div className="flex items-center md:gap-3 gap-1.5 min-w-0">
        <button
          type="button"
          onClick={(e) => { e.stopPropagation(); setSelectedConversation(null); }}
          className="lg:hidden flex items-center text-sm font-medium text-neutral-700 shrink-0"
        >
          <FiArrowLeft className="w-4 h-4" />
        </button>
        <div className="w-10 h-10 rounded-full overflow-hidden bg-primary/15 flex items-center justify-center text-primary font-bold shrink-0">
          {influencer?.image ? (
            <ImageWithFallback
              src={influencer.image}
              alt={name}
              width={40}
              height={40}
              className="w-full h-full object-cover"
            />
          ) : (
            name.charAt(0).toUpperCase()
          )}
        </div>
        <div className="min-w-0">
          <div className="flex items-center gap-2 flex-wrap">
            <h3 className="font-semibold text-sm truncate">{name}</h3>
            {status && (
              <span className={`text-[10px] font-semibold px-2 py-0.5 rounded ${getStageColorClass(status)}`}>
                {getStageLabel(status, translations)}
              </span>
            )}
          </div>
          <p className="text-xs text-neutral-500 mt-0.5">
            {rate != null && (
              <>
                {currency} {formatNumberWithCommas(rate)}
              </>
            )}
            {engRate != null && <> · Eng. Rate {Number(engRate).toFixed(2)}%</>}
            {followers != null && (
              <>
                {' '}
                · {translations?.followers} {formatNumber(followers)}
              </>
            )}
          </p>
        </div>
      </div>
      <div className="flex items-center gap-2 shrink-0 self-end max-md:hidden" onClick={(e) => e.stopPropagation()}>
        {status === STAGE_KEYS.DRAFTING && onChaseDraft && (
          <GradientButton customClass="!h-9 !px-4 text-xs" onClick={onChaseDraft} disabled={chasePending}>
            {translations?.chaseDraft ?? 'Chase Draft'}
          </GradientButton>
        )}
        {status === STAGE_KEYS.PUBLISHING && onChasePublish && (
          <GradientButton customClass="!h-9 !px-4 text-xs" onClick={onChasePublish} disabled={chasePending}>
            {translations?.chasePublish ?? 'Chase Publish'}
          </GradientButton>
        )}
        {showViewProfile && (
          <BorderButton customClass="!h-9 !px-3 text-xs" onClick={onViewProfile}>
            {translations?.viewProfile}
          </BorderButton>
        )}
        {showNeedHelp && (
          <NeedHelpDropdown
            options={needHelpOptions}
            helpGuideUrl="https://www.connector.cc/faq-brand"
            helpGuideLabel={translations?.checkHelpGuides ?? 'Check Help Guides'}
            buttonLabel={translations?.needHelp ?? 'Need Help?'}
          />
        )}
      </div>
      <div className="md:hidden">
        <FaChevronRight className="w-4 h-4 text-neutral-500" />
      </div>
    </div>
  );
};

export default InfluencerBanner;