"use client";

import { useEffect, useState } from "react";

type LogoProps = {
  size?: number;
  className?: string;
  customSrc?: string;
};

export default function InstituteLogo({
  size = 72,
  className = "",
  customSrc,
}: LogoProps) {
  const [logoUrl, setLogoUrl] = useState<string>(customSrc || "");

  useEffect(() => {
    if (customSrc) {
      setLogoUrl(customSrc);
      return;
    }

    if (typeof window !== "undefined") {
      const loadSavedLogo = () => {
        const saved = localStorage.getItem("is_school_logo");
        setLogoUrl(saved || "");
      };

      loadSavedLogo();

      // Listen to both localStorage changes and custom app events
      const handleStorage = (e: StorageEvent) => {
        if (e.key === "is_school_logo") {
          setLogoUrl(e.newValue || "");
        }
      };

      const handleCustomUpdate = (e: Event) => {
        const customEvent = e as CustomEvent<string>;
        setLogoUrl(customEvent.detail || "");
      };

      window.addEventListener("storage", handleStorage);
      window.addEventListener("school_logo_updated", handleCustomUpdate);

      return () => {
        window.removeEventListener("storage", handleStorage);
        window.removeEventListener("school_logo_updated", handleCustomUpdate);
      };
    }
  }, [customSrc]);

  if (logoUrl) {
    return (
      // eslint-disable-next-line @next/next/no-img-element
      <img
        src={logoUrl}
        alt="Institute Logo"
        width={size}
        height={size}
        className={`object-contain transition-all duration-200 ${className}`}
        style={{ width: `${size}px`, height: `${size}px`, maxHeight: `${size}px` }}
      />
    );
  }

  // Official State of Tamil Nadu / Industrial School Emblem SVG
  return (
    <svg
      viewBox="0 0 200 200"
      width={size}
      height={size}
      className={`shrink-0 ${className}`}
      role="img"
      aria-label="Official Institute Emblem"
    >
      <defs>
        <linearGradient id="gold-grad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#f7e7ae" />
          <stop offset="50%" stopColor="#d9b455" />
          <stop offset="100%" stopColor="#8f6a1b" />
        </linearGradient>
        <radialGradient id="sun-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#d9b455" stopOpacity="0.25" />
          <stop offset="100%" stopColor="#d9b455" opacity="0" />
        </radialGradient>
      </defs>

      {/* Outer Border */}
      <circle cx="100" cy="100" r="94" fill="#faf6ed" stroke="url(#gold-grad)" strokeWidth="4" />
      <circle cx="100" cy="100" r="88" fill="url(#sun-glow)" stroke="#562626" strokeWidth="1" strokeDasharray="3 2" />

      {/* Temple Gopuram / Directorate Emblem Graphic */}
      <g fill="#562626" stroke="#562626" strokeWidth="0.5">
        {/* Kalasam peaks */}
        <polygon points="100,28 97,36 103,36" />
        <polygon points="88,34 85,40 91,40" />
        <polygon points="112,34 109,40 115,40" />
        
        {/* Tier 1 */}
        <rect x="80" y="42" width="40" height="8" rx="1" fill="#7c5e17" />
        {/* Tier 2 */}
        <rect x="74" y="52" width="52" height="10" rx="1" fill="#562626" />
        {/* Tier 3 */}
        <rect x="68" y="64" width="64" height="12" rx="1" fill="#7c5e17" />
        {/* Base Tier */}
        <rect x="60" y="78" width="80" height="16" rx="2" fill="#562626" />
        {/* Gateway Arch */}
        <path d="M 90,94 A 10,10 0 0,1 110,94 L 110,94 L 90,94 Z" fill="#faf6ed" />

        {/* Technical Gear / Wheel in base representing Industrial Training */}
        <circle cx="100" cy="128" r="24" fill="none" stroke="#bd951f" strokeWidth="5" />
        <circle cx="100" cy="128" r="14" fill="#562626" />
        <circle cx="100" cy="128" r="6" fill="#faf6ed" />
        {/* Gear Teeth */}
        <rect x="97" y="99" width="6" height="6" fill="#bd951f" />
        <rect x="97" y="151" width="6" height="6" fill="#bd951f" />
        <rect x="71" y="125" width="6" height="6" fill="#bd951f" />
        <rect x="123" y="125" width="6" height="6" fill="#bd951f" />
      </g>

      {/* Decorative Laurel Leaves */}
      <path
        d="M 40,140 C 42,165 70,175 100,175 C 130,175 158,165 160,140"
        fill="none"
        stroke="#7c5e17"
        strokeWidth="3"
        strokeLinecap="round"
      />

      {/* Text Banner */}
      <text
        x="100"
        y="188"
        textAnchor="middle"
        fontSize="10"
        fontWeight="800"
        fill="#562626"
        letterSpacing="2"
        fontFamily="sans-serif"
      >
        DET · TN
      </text>
    </svg>
  );
}