"use client";

import { LockKeyhole } from "lucide-react";
import { useActiveCharacter } from "@/providers/character-provider";

export interface PrivateMessageCardProps {
  hint?: string | null;
  isUnlocking?: boolean;
  onUnlock?: () => void;
}

export function PrivateMessageCard({
  hint,
  isUnlocking = false,
  onUnlock,
}: PrivateMessageCardProps) {
  const character = useActiveCharacter();

  return (
    <div
      className="max-w-[min(72vw,280px)] rounded-(--responsive-card-radius-sm,18px) rounded-tl-none border border-[rgba(246,87,160,0.2)] bg-[linear-gradient(180deg,rgba(255,244,248,0.95),rgba(255,255,255,0.95)),#ffffff] p-(--responsive-card-padding,14px) text-[#3c3b3b] shadow-[0_4px_12px_rgba(246,87,160,0.12)]"
      role="group"
      aria-label="Locked private message"
    >
      <div
        className="mb-[clamp(8px,1.852vw,10px)] flex size-(--responsive-icon-button-size,42px) items-center justify-center rounded-full bg-[linear-gradient(135deg,#ff8fc7_0%,#f657a0_100%)] text-white"
        aria-hidden="true"
      >
        <LockKeyhole className="block" size={22} />
      </div>
      <p className="m-0 text-(length:--responsive-body,14px) leading-[1.4] text-[#3c3b3b]">
        {hint && hint.length > 0
          ? hint
          : `${character.shortName} has a private message for you.`}
      </p>
      <button
        type="button"
        data-analytics-key="chat.unlock_message"
        data-analytics-label="Unlock private message"
        className="mt-(--spacing-md,12px) w-full cursor-pointer rounded-full border-0 bg-[linear-gradient(90deg,#ff67e0,#ff52a2)] px-(--spacing-md,12px) py-[clamp(9px,1.852vw,10px)] text-(length:--responsive-body,14px) font-bold text-white disabled:cursor-not-allowed disabled:opacity-65 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
        disabled={isUnlocking || !onUnlock}
        onClick={onUnlock}
      >
        {isUnlocking ? "Unlocking..." : "Unlock private message"}
      </button>
    </div>
  );
}