"use client";

import { Coffee, X } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

import type { CommercialAction } from "@/data/schemas/chat";
import { recordTipOfferAction } from "@/lib/commercial/tip_offer_session";
import { useActiveCharacterRoutes } from "@/providers/character-provider";

import styles from "./commercial-action-card.module.css";

export interface CommercialActionCardProps {
  action: CommercialAction;
  characterId: string;
}

export function CommercialActionCard({
  action,
  characterId,
}: CommercialActionCardProps) {
  const routes = useActiveCharacterRoutes();
  const [dismissed, setDismissed] = useState(false);

  if (dismissed || action.type !== "giftOffer") return null;

  return (
    <aside
      className={styles.card}
      aria-label="Gift invitation"
      data-commercial-action-id={action.actionId}
    >
      <button
        type="button"
        className={styles.dismiss}
        aria-label="Dismiss gift invitation"
        title="Dismiss"
        onClick={() => {
          setDismissed(true);
          recordTipOfferAction(characterId, "dismissed", "aiContext");
        }}
      >
        <X size={16} aria-hidden="true" />
      </button>
      <p>{action.copy}</p>
      <Link
        href={routes.tip}
        className={styles.cta}
        onClick={() =>
          recordTipOfferAction(characterId, "opened", "aiContext")
        }
      >
        <Coffee size={17} aria-hidden="true" />
        <span>{action.ctaLabel}</span>
      </Link>
    </aside>
  );
}