import React, { useId } from 'react';

export interface BrandLogoProps {
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
  variant?: 'icon-only' | 'full';
  showGlow?: boolean;
  className?: string;
  animateOnHover?: boolean;
}

const sizeMap = {
  xs: 20,
  sm: 28,
  md: 36,
  lg: 44,
  xl: 56,
};

/**
 * Modern, stylized SVG brand emblem representing Post Fund Management (PFM).
 * Features an isometric kinetic nexus with three interlocking governance facets:
 * 1. Top Canopy: Governance, Strategy & Portfolios (Radiant Indigo / Violet)
 * 2. Left Vault: Capital, Grants & Disbursement Assurance (Electric Sapphire)
 * 3. Right Wing: Milestones, Evidence & Impact Delivery (Cyan to Emerald)
 * 4. Center Core: Luminous Floating Diamond Milestone Star
 */
export const BrandLogo: React.FC<BrandLogoProps> = ({
  size = 'md',
  variant = 'icon-only',
  showGlow = true,
  className = '',
  animateOnHover = true,
}) => {
  const uniqueId = useId().replace(/:/g, '');
  const pixelSize = typeof size === 'number' ? size : sizeMap[size] || 36;

  const glowId = `pfm-ambient-${uniqueId}`;
  const topGradId = `pfm-top-${uniqueId}`;
  const leftGradId = `pfm-left-${uniqueId}`;
  const rightGradId = `pfm-right-${uniqueId}`;
  const coreGradId = `pfm-core-${uniqueId}`;
  const filterId = `pfm-filter-${uniqueId}`;

  return (
    <div
      className={`inline-flex items-center gap-3 select-none ${
        animateOnHover ? 'group cursor-pointer' : ''
      } ${className}`}
    >
      <div
        style={{ width: pixelSize, height: pixelSize }}
        className={`relative shrink-0 flex items-center justify-center transition-transform duration-300 ${
          animateOnHover ? 'group-hover:scale-105' : ''
        }`}
      >
        {showGlow && (
          <div
            className="absolute inset-0 rounded-2xl bg-blue-500/20 blur-md pointer-events-none transition-opacity duration-300 group-hover:opacity-100 opacity-60"
          />
        )}
        <svg
          viewBox="0 0 64 64"
          width={pixelSize}
          height={pixelSize}
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          className="relative z-10 w-full h-full drop-shadow-sm"
        >
          <defs>
            {/* Ambient Radial Glow */}
            <radialGradient id={glowId} cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#38bdf8" stopOpacity="0.4" />
              <stop offset="70%" stopColor="#2563eb" stopOpacity="0.12" />
              <stop offset="100%" stopColor="#1e1b4b" stopOpacity="0" />
            </radialGradient>

            {/* Top facet: Governance & Portfolios (Indigo / Radiant Violet) */}
            <linearGradient id={topGradId} x1="12" y1="8" x2="52" y2="26" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stopColor="#a5b4fc" />
              <stop offset="35%" stopColor="#6366f1" />
              <stop offset="100%" stopColor="#4338ca" />
            </linearGradient>

            {/* Left facet: Capital & Disbursement Vault (Electric Sapphire) */}
            <linearGradient id={leftGradId} x1="10" y1="22" x2="30" y2="56" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stopColor="#38bdf8" />
              <stop offset="45%" stopColor="#2563eb" />
              <stop offset="100%" stopColor="#1e40af" />
            </linearGradient>

            {/* Right facet: Milestones, Evidence & Impact Delivery (Cyan to Emerald) */}
            <linearGradient id={rightGradId} x1="34" y1="28" x2="54" y2="56" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stopColor="#22d3ee" />
              <stop offset="50%" stopColor="#06b6d4" />
              <stop offset="100%" stopColor="#10b981" />
            </linearGradient>

            {/* Center Radiant Diamond */}
            <linearGradient id={coreGradId} x1="27" y1="27" x2="37" y2="37" gradientUnits="userSpaceOnUse">
              <stop offset="0%" stopColor="#ffffff" />
              <stop offset="40%" stopColor="#e0f2fe" />
              <stop offset="100%" stopColor="#38bdf8" />
            </linearGradient>

            {/* Core luminous glow filter */}
            <filter id={filterId} x="-20%" y="-20%" width="140%" height="140%">
              <feGaussianBlur stdDeviation="1.5" result="blur" />
              <feComposite in="SourceGraphic" in2="blur" operator="over" />
            </filter>
          </defs>

          {/* Deep Contrast Foundation Disk */}
          <circle cx="32" cy="32" r="31" fill="#090d16" />
          <circle cx="32" cy="32" r="30" stroke="#1e293b" strokeWidth="1" />
          <circle cx="32" cy="32" r="28" fill={`url(#${glowId})`} />

          {/* Outer Hexagonal Structural Shield Outline */}
          <path
            d="M32 6.5 L53.5 19 C55 19.8 56 21.5 56 23.2 L56 40.8 C56 42.5 55 44.2 53.5 45 L32 57.5 C30.5 58.3 28.5 58.3 27 57.5 L5.5 45 C4 44.2 3 42.5 3 40.8 L3 23.2 C3 21.5 4 19.8 5.5 19 L27 6.5 C28.5 5.7 30.5 5.7 32 6.5 Z"
            stroke="#3b82f6"
            strokeOpacity="0.35"
            strokeWidth="1.2"
            fill="none"
          />

          {/* Facet 1: Top Canopy (Governance / Oversight Architecture) */}
          <path
            d="M32 9 L51.5 20.2 L43 25.2 L32 18.8 L21 25.2 L12.5 20.2 Z"
            fill={`url(#${topGradId})`}
          />

          {/* Facet 2: Left Vault (Fund Management & Capital Allocation) */}
          <path
            d="M10 23 L19.2 28.4 L19.2 44.5 L30 50.8 L30 55.5 L10 43.8 Z"
            fill={`url(#${leftGradId})`}
          />

          {/* Facet 3: Right Wing (Milestone Performance & Impact Assurance) */}
          <path
            d="M54 23 L54 43.8 L34 55.5 L34 50.8 L44.8 44.5 L44.8 28.4 Z"
            fill={`url(#${rightGradId})`}
          />

          {/* Center Geometric Hub (The PFM Nexus Plate) */}
          <path
            d="M22 28.5 L32 22.8 L42 28.5 L42 35.5 L32 41.2 L22 35.5 Z"
            fill="#0b1120"
            stroke="#334155"
            strokeWidth="1"
          />

          {/* Kinetic Stepped Prisms */}
          <path
            d="M25 31.5 L32 27.5 L39 31.5 L32 35.5 Z"
            fill={`url(#${topGradId})`}
            opacity="0.9"
          />
          <path
            d="M25 37 L32 41 L39 37 L32 33 L25 37 Z"
            fill={`url(#${rightGradId})`}
            opacity="0.9"
          />

          {/* Center Radiant Milestone Diamond */}
          <polygon
            points="32,27 36.5,32 32,37 27.5,32"
            fill={`url(#${coreGradId})`}
            filter={`url(#${filterId})`}
          />

          {/* Center Pure White Optical Star Point */}
          <circle cx="32" cy="32" r="1.5" fill="#ffffff" />
        </svg>
      </div>

      {variant === 'full' && (
        <div className="flex flex-col min-w-0">
          <span className="font-bold text-sm tracking-tight text-white truncate group-hover:text-blue-400 transition">
            PFM Console
          </span>
          <span className="text-[11px] text-blue-400 font-medium tracking-tight">
            Post-Fund Governance
          </span>
        </div>
      )}
    </div>
  );
};