"use client";

interface Props {
  width?: number;
  height?: number;
  className?: string;
}

/** Same logo height everywhere so login and main page look identical. */
const DEFAULT_LOGO_HEIGHT = 42;

/**
 * Logo: rounded badge (FP) with links motif inside + FP-MTMS wordmark.
 * Uses fixed typography so words look the same on login and main page.
 */
const Logo: React.FC<Props> = ({ height = DEFAULT_LOGO_HEIGHT, className = "" }) => {
  const size = Math.max(28, height);
  const badgeSize = Math.round(size * 0.7);
  const titleFontSize = 21;
  const subtitleFontSize = 10;
  const fpSize = badgeSize <= 22 ? 10 : badgeSize <= 28 ? 12 : 14;

  return (
    <div
      className={`flex items-center gap-2.5 ${className}`}
      style={{ display: "flex", flexShrink: 0 }}
      aria-label="FP-MTMS"
    >
      {/* Badge: rounded square with links motif inside + FP */}
      <svg
        width={badgeSize}
        height={badgeSize}
        viewBox="0 0 40 40"
        xmlns="http://www.w3.org/2000/svg"
        className="shrink-0"
        aria-hidden
      >
        <defs>
          <linearGradient id="logo-bg" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="#60a5fa" />
            <stop offset="40%" stopColor="#3b82f6" />
            <stop offset="100%" stopColor="#1d4ed8" />
          </linearGradient>
          <linearGradient id="logo-bevel" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stopColor="rgba(255,255,255,0.4)" />
            <stop offset="100%" stopColor="rgba(255,255,255,0)" />
          </linearGradient>
          <filter id="logo-shadow" x="-15%" y="-5%" width="130%" height="120%">
            <feDropShadow dx="0" dy="2" stdDeviation="1.5" floodOpacity="0.35" floodColor="#1e40af" />
          </filter>
        </defs>
        {/* Shadow */}
        <rect x="3" y="4" width="34" height="34" rx="8" fill="#1e40af" fillOpacity="0.35" />
        {/* Body */}
        <rect x="2" y="2" width="36" height="36" rx="8" fill="url(#logo-bg)" filter="url(#logo-shadow)" />
        <rect x="2" y="2" width="36" height="12" rx="7" fill="url(#logo-bevel)" />
        {/* Links motif inside: small chain links in corners, clear center for FP */}
        <g fill="none" stroke="rgba(255,255,255,0.55)" strokeWidth="1.4" strokeLinecap="round">
          <path d="M 8 10 a 3 3 0 1 1 0 4.5 a 3 3 0 1 1 0 -4.5" />
          <path d="M 12 10 a 3 3 0 1 1 0 4.5 a 3 3 0 1 1 0 -4.5" />
          <line x1="11" y1="12.2" x2="12" y2="12.2" />
        </g>
        <g fill="none" stroke="rgba(255,255,255,0.5)" strokeWidth="1.4" strokeLinecap="round">
          <path d="M 28 28 a 3 3 0 1 1 0 4.5 a 3 3 0 1 1 0 -4.5" />
          <path d="M 32 28 a 3 3 0 1 1 0 4.5 a 3 3 0 1 1 0 -4.5" />
          <line x1="31" y1="30.2" x2="32" y2="30.2" />
        </g>
        {/* FP text – top-right so it doesn’t overlap the links */}
        <text
          x="20"
          y="24"
          textAnchor="middle"
          fill="#f8fafc"
          style={{
            fontFamily: "system-ui, -apple-system, sans-serif",
            fontWeight: 800,
            fontSize: fpSize + 2,
            letterSpacing: "-0.02em",
          }}
        >
          FP
        </text>
      </svg>
      {/* Wordmark: fixed typography so login and main page match */}
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: 4,
          fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
        }}
      >
        <span
          style={{
            display: "block",
            whiteSpace: "nowrap",
            fontSize: titleFontSize,
            fontWeight: 700,
            letterSpacing: "0.03em",
            lineHeight: 1.25,
            color: "#1e40af",
          }}
          className="dark:text-blue-200"
        >
          FP-MTMS
        </span>
        <span
          style={{
            display: "block",
            whiteSpace: "nowrap",
            fontSize: subtitleFontSize,
            fontWeight: 500,
            letterSpacing: "0.12em",
            lineHeight: 1.4,
            textTransform: "uppercase",
            color: "#2563eb",
          }}
          className="dark:text-blue-300"
        >
          Food Production
        </span>
      </div>
    </div>
  );
};

export default Logo;
