"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";

const HELP_BASE_URL = (process.env.NEXT_PUBLIC_HELP_URL ?? "").replace(/\/$/, "");

function guessHelpTopicFromPath(pathname: string) {
  const segment = pathname.split("/").filter(Boolean)[0];
  return segment || "dashboard";
}

export function HelpLink({ topicOverride }: { topicOverride?: string }) {
  const pathname = usePathname();
  const topic = topicOverride ?? guessHelpTopicFromPath(pathname || "/");
  const href = HELP_BASE_URL ? `${HELP_BASE_URL}/t/${encodeURIComponent(topic)}` : `/einstellungen`;

  return (
    <Link
      href={href}
      target={HELP_BASE_URL ? "_blank" : undefined}
      rel={HELP_BASE_URL ? "noreferrer" : undefined}
      title="Hilfe zu diesem Bereich"
      aria-label="Hilfe zu diesem Bereich"
      className="inline-flex items-center justify-center rounded-md border border-gray-200 bg-white p-1.5 text-gray-500 transition-colors hover:border-[#0F766E] hover:text-[#0F766E]"
    >
      <QuestionMarkCircleIcon className="h-5 w-5" />
    </Link>
  );
}