'use client';
import { type ReactNode } from 'react';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import GradientButton from '@/Component/Common/Forms/GradientButton';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { formatNumberWithCommas } from '@/Utils/Other/FormatNumberWithCommas';
import { STAGE_KEYS } from './stageUtils';
import { FiExternalLink } from 'react-icons/fi';
import { useLocalDraftSeen } from '@/Utils/Hooks/useLocalSeen';
import { useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';
import Link from 'next/link';

const PinnedBanner = (props: {
  ManagementDetailData: any;
  translations: any;
  onApproveQuotation: () => void;
  onArchive?: () => void;
  onOpenDraft: (draft?: any) => void;
  onOpenDraftsList: () => void;
  onConfirmCompletion: () => void;
  onRejectCompletion: () => void;
}) => {
  const {
    ManagementDetailData,
    translations,
    onApproveQuotation,
    onArchive,
    onOpenDraft,
    onOpenDraftsList,
    onConfirmCompletion,
    onRejectCompletion,
  } = props;

  const { isDraftSeen } = useLocalDraftSeen();

  const campaign = ManagementDetailData?.campaign;
  const campaignInfluencer = campaign?.campaignInfluencers?.[0];
  const status = campaignInfluencer?.status;
  const pendingDrafts = campaignInfluencer?.drafts?.filter((d: any) => d.status === 'pending') || [];
  const posts = campaignInfluencer?.posts || [];
  const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

  const showDisputeStripe =
    campaignInfluencer?.dispute?.status === 'unsolved' && userDetails?.role !== 'admin';

  const disputeStripe = showDisputeStripe ? (
    <div className="mx-4 mt-3 mb-1 bg-red-500/25 rounded-md px-5 py-2 flex items-center justify-center text-center text-sm">
      {translations?.disputeMessage}
    </div>
  ) : null;

  let actionBanner: ReactNode = null;

  if (status === STAGE_KEYS.QUOTATION) {
    actionBanner = (
      <div className="mx-4 mt-3 mb-1 rounded-xl border border-lightGray bg-neutral-50 px-4 py-3 flex items-center justify-between gap-3 flex-wrap">
        <div className="flex items-center gap-4 text-sm">
          {campaignInfluencer?.influencer_budget > 0 && (
            <span className="font-medium flex flex-col">
              ${formatNumberWithCommas(campaignInfluencer.influencer_budget)} {campaignInfluencer?.currency}{' '}
              <span className='font-medium text-xs'><span role="img" aria-label="cash" className="mr-1">💰</span>{translations?.cash}</span>
            </span>
          )}
          {campaign?.product_value > 0 && (
            <span className="font-medium flex flex-col">
              ${formatNumberWithCommas(campaign.product_value)} {campaignInfluencer?.currency}{' '}
              <span className='font-medium text-xs'><span role="img" aria-label="cash" className="mr-1">🎁</span>{translations?.productValue}</span>
            </span>
          )}
        </div>
        <div className="flex items-center gap-2">
          {onArchive && (
            <BorderButton customClass="!h-9 !px-4 text-xs" onClick={onArchive}>
              {translations?.archive}
            </BorderButton>
          )}
          <GradientButton customClass="!h-9 !px-4 text-xs" onClick={onApproveQuotation}>
            {translations?.approve}
          </GradientButton>
        </div>
      </div>
    );
  } else if (status === STAGE_KEYS.DRAFT_READY && pendingDrafts.length > 0) {
    actionBanner = (
      <div className="mx-4 mt-3 mb-1 rounded-xl border border-draftAvailable/30 bg-draftAvailable/5 px-4 py-3 flex items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          {pendingDrafts.slice(0, 3).map((draft: any) => (
            <button
              key={draft.id}
              type="button"
              className="w-12 h-12 rounded-lg overflow-hidden bg-neutral-200 shrink-0 border border-white shadow-sm relative"
              onClick={() => onOpenDraft(draft)}
            >
              <ImageWithFallback
                src={`${userDetails?.draft_path}${draft?.draftVersions?.[0].type == 'video' ? draft?.draftVersions?.[0]?.thumbnail : draft?.draftVersions?.[0]?.draft_name}`}
                alt="Draft"
                className="w-full h-full object-cover"
                height={64}
                width={64}
              />
              {(draft?.is_draft_seen || isDraftSeen(String(draft?.id))) && (
                <div className="absolute top-0 right-0 w-full h-full bg-black/50 rounded flex items-center justify-center">
                  <span className="text-white font-medium text-xs">Seen</span>
                </div>
              )}
            </button>
          ))}
        </div>
        <button
          type="button"
          onClick={onOpenDraftsList}
          className="text-xs font-semibold text-draftAvailable border border-draftAvailable rounded-lg px-3 py-2 hover:bg-draftAvailable/10"
        >
          {pendingDrafts.length} {translations?.draftsPendingApproval ?? 'drafts pending approval'}
        </button>
      </div>
    );
  } else if (status === STAGE_KEYS.COMPLETION_REQUEST) {
    actionBanner = (
      <div className="mx-4 mt-3 mb-1 rounded-xl border border-lightGray bg-neutral-50 px-4 py-3 flex items-center justify-between gap-3 flex-wrap">
        <div className="flex items-center gap-2">
          {posts.slice(0, 3).map((post: any) => (
            <Link
              key={post.id}
              href={post?.image_link}
              target="_blank"
              rel="noopener noreferrer"
              className="relative w-12 h-12 rounded-lg overflow-hidden bg-neutral-200 shrink-0 border border-white shadow-sm group"
            >
              <ImageWithFallback
                src={post?.image_link}
                alt="Post"
                width={48}
                height={48}
                className="w-full h-full object-cover"
              />
              <span className="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                <FiExternalLink className="text-white w-4 h-4" />
              </span>
            </Link>
          ))}
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={onConfirmCompletion}
            className="h-9 px-4 rounded-lg text-xs font-semibold bg-closed text-white hover:opacity-90"
          >
            {translations?.confirmCompletion}
          </button>
          <button
            type="button"
            onClick={onRejectCompletion}
            className="h-9 px-4 rounded-lg text-xs font-semibold bg-red-500 text-white hover:opacity-90"
          >
            {translations?.rejectCompletion}
          </button>
        </div>
      </div>
    );
  }

  if (!disputeStripe && !actionBanner) return null;

  return (
    <div className="max-md:hidden">
      {disputeStripe}
      {actionBanner}
    </div>
  );
};

export default PinnedBanner;