"use client";

import Link from "next/link";
import type { CapabilityFeature } from "@/lib/capabilities/types";
import { useCapabilities } from "@/lib/capabilities/context";

interface FeatureGateProps {
  feature: CapabilityFeature;
  children?: React.ReactNode;
  /** 未就緒時是否顯示說明（預設不顯示，直接隱藏） */
  showHint?: boolean;
  className?: string;
}

export function FeatureGate({
  feature,
  children,
  showHint = false,
  className,
}: FeatureGateProps) {
  const { loading, get } = useCapabilities();

  if (loading) return null;

  const cap = get(feature);
  if (cap?.ready) {
    return <>{children}</>;
  }

  if (!showHint || !cap) return null;

  return (
    <div className={className ?? "rounded-lg border border-dashed border-border bg-muted/40 px-3 py-2.5"}>
      <p className="text-[12px] text-muted-foreground">
        {cap.reason ?? `${cap.label}尚未就緒`}
        {cap.setupHref && cap.setupLabel && (
          <>
            {" · "}
            <Link href={cap.setupHref} className="text-primary underline-offset-2 hover:underline">
              {cap.setupLabel}
            </Link>
          </>
        )}
      </p>
    </div>
  );
}