"use client";

import Link from "next/link";
import { usePermission } from "@/hooks/usePermission";

interface PremiumGateProps {
  children: React.ReactNode;
  /** Blur and overlay instead of hiding — good for article teasers */
  blur?: boolean;
}

export default function PremiumGate({
  children,
  blur = true,
}: PremiumGateProps) {
  const { isPremium, isGuest } = usePermission();

  if (isPremium) return <>{children}</>;

  if (blur) {
    return (
      <div style={{ position: "relative", overflow: "hidden" }}>
        {/* Blurred preview */}
        <div
          style={{
            filter: "blur(6px)",
            pointerEvents: "none",
            userSelect: "none",
          }}
        >
          {children}
        </div>

        {/* Overlay CTA */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center",
            gap: "0.875rem",
            background:
              "linear-gradient(to top, rgba(255,255,255,0.97) 40%, rgba(255,255,255,0.7) 100%)",
            padding: "2rem 1.5rem",
            textAlign: "center",
          }}
        >
          <div
            style={{
              width: 44,
              height: 44,
              borderRadius: "50%",
              background: "rgba(193,39,45,0.08)",
              border: "1.5px solid rgba(193,39,45,0.2)",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="var(--brand, #C1272D)"
              strokeWidth="2"
              strokeLinecap="round"
            >
              <rect x="3" y="11" width="18" height="11" rx="2" />
              <path d="M7 11V7a5 5 0 0 1 10 0v4" />
            </svg>
          </div>
          <div>
            <p
              style={{
                fontWeight: 800,
                fontSize: "1rem",
                color: "var(--ink, #0e0e11)",
                margin: "0 0 0.25rem",
              }}
            >
              Premium Content
            </p>
            <p
              style={{
                fontSize: "0.8125rem",
                color: "var(--text-2, #6b7280)",
                margin: 0,
              }}
            >
              {isGuest
                ? "Sign in to continue reading"
                : "Subscribe to unlock this content"}
            </p>
          </div>
          <Link
            href={isGuest ? "/login" : "/subscribe"}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: "0.375rem",
              padding: "0.5625rem 1.375rem",
              background: "var(--brand, #C1272D)",
              color: "#fff",
              borderRadius: 8,
              fontWeight: 700,
              fontSize: "0.875rem",
              textDecoration: "none",
              transition: "opacity 0.15s",
            }}
          >
            {isGuest ? "Sign in" : "Subscribe"}
            <svg
              width="14"
              height="14"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2.5"
            >
              <path d="M5 12h14M13 6l6 6-6 6" />
            </svg>
          </Link>
        </div>
      </div>
    );
  }

  // Hard block (no blur)
  return (
    <div
      style={{
        padding: "3rem 1.5rem",
        textAlign: "center",
        background: "var(--surf, #fff)",
        border: "1px solid var(--border, #e5e7eb)",
        borderRadius: 12,
      }}
    >
      <p
        style={{
          fontWeight: 700,
          marginBottom: "0.5rem",
          color: "var(--ink, #0e0e11)",
        }}
      >
        {isGuest ? "Sign in to view this content" : "Premium content"}
      </p>
      <p
        style={{
          fontSize: "0.875rem",
          color: "var(--text-2, #6b7280)",
          marginBottom: "1rem",
        }}
      >
        {isGuest
          ? "Create a free account to get started"
          : "Subscribe to access this and all premium articles"}
      </p>
      <Link
        href={isGuest ? "/login" : "/subscribe"}
        style={{
          padding: "0.5rem 1.25rem",
          background: "var(--brand, #C1272D)",
          color: "#fff",
          borderRadius: 8,
          fontWeight: 700,
          fontSize: "0.875rem",
          textDecoration: "none",
        }}
      >
        {isGuest ? "Sign in" : "View plans"}
      </Link>
    </div>
  );
}