import { useMemo } from "react";
import Confetti from "react-confetti";
import { FormattedMessage } from "react-intl";

import { type NostrEvent, NostrLink } from "@snort/system";
import { useUserProfile } from "@snort/system-react";

import { findTag } from "@/utils";
import { formatSats } from "@/number";
import usePreviousValue from "@/hooks/usePreviousValue";
import { SendZapsDialog } from "./send-zap";
import { getName } from "./profile";
import { useZaps } from "@/hooks/zaps";

export function Goal({ ev, confetti }: { ev: NostrEvent; confetti?: boolean }) {
  const profile = useUserProfile(ev.pubkey);
  const zapTarget = profile?.lud16 ?? profile?.lud06;
  const link = NostrLink.fromEvent(ev);
  const zaps = useZaps(link, true);
  const goalAmount = useMemo(() => {
    const amount = findTag(ev, "amount");
    return amount ? Number(amount) / 1000 : null;
  }, [ev]);

  if (!goalAmount) {
    return null;
  }

  const soFar = useMemo(() => {
    return zaps
      .filter(z => z.receiver === ev.pubkey && z.targetEvents.some(a => a.matchesEvent(ev)))
      .reduce((acc, z) => acc + z.amount, 0);
  }, [zaps]);

  const progress = Math.max(0, Math.min(100, (soFar / goalAmount) * 100));
  const isFinished = progress >= 100;
  const previousValue = usePreviousValue(isFinished);

  const goalContent = (
    <div className="flex flex-col cursor-pointer">
      {ev.content.length > 0 && <p>{ev.content}</p>}
      <div className="relative h-7">
        <div className="absolute bg-layer-2 h-3 rounded-full my-2 w-full"></div>
        <div
          className="absolute bg-zap h-3 rounded-full text-xs font-medium my-2 leading-3 pl-1"
          style={{
            width: `${progress}%`,
          }}>
          {soFar > 0 ? formatSats(soFar) : ""}
        </div>
        <div className="absolute text-right text-xs right-1 font-medium my-2 leading-3">
          <FormattedMessage defaultMessage="Goal: {amount}" id="QceMQZ" values={{ amount: formatSats(goalAmount) }} />
        </div>
      </div>
      {isFinished && previousValue === false && (confetti ?? true) && (
        <Confetti numberOfPieces={2100} recycle={false} />
      )}
    </div>
  );

  return zapTarget ? (
    <SendZapsDialog
      lnurl={zapTarget}
      pubkey={ev.pubkey}
      eTag={ev?.id}
      targetName={getName(ev.pubkey, profile)}
      button={goalContent}
    />
  ) : (
    goalContent
  );
}
