"use client";

import { useState } from "react";
import Link from "next/link";
import SocialShare from "@/components/shared/social-share";
import AddToCompare from "./AddToCompare";

interface ProfileActionsProps {
  userId: number;
  idAw: string;
}

// D.10: the "Send Message" link was duplicated by <LetsChatButton> in the
// main hero. Profile actions keeps only the secondary buttons (share,
// compare, block, report). The primary CTA pair (LetsChatButton +
// BookingButton) lives in the hero so the visual hierarchy is clean.
export default function ProfileActions({ userId, idAw }: ProfileActionsProps) {
  const [blocking, setBlocking] = useState(false);
  const [blocked, setBlocked] = useState(false);

  return (
    <div className="flex items-center gap-3 mt-4 flex-wrap">
      <SocialShare title={`Check out this profile on AdultWorld`} />

      <AddToCompare idAw={idAw} />

      <button
        onClick={async () => {
          if (blocked) return;
          setBlocking(true);
          try {
            const res = await fetch("/api/blocks", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ blocked_user_id: userId }),
            });
            if (res.ok || res.status === 409) setBlocked(true);
          } catch {} finally { setBlocking(false); }
        }}
        disabled={blocking || blocked}
        className="text-text-muted hover:text-red-400 text-xs transition-colors disabled:opacity-50"
      >
        {blocked ? "Blocked" : blocking ? "Blocking..." : "Block"}
      </button>

      <Link
        href={`/support/new/report-member?user=${idAw}`}
        className="text-text-muted hover:text-red-400 text-xs transition-colors ml-1"
      >
        Report
      </Link>
    </div>
  );
}