import React, { useEffect, useState, useRef } from "react";
import { Button, Dropdown } from "flowbite-react";

export default function EngineeringHeroFlowbite() {
  const defaultConfig = {
    main_title: "حلول هندسية متكاملة",
    subtitle: "نصمم ونبني المستقبل بخبرة ودقة واحترافية",
    primary_color: "#e67e22",
    background_color: "#000000",
    text_color: "#ffffff",
    secondary_surface: "#95a5a6",
    secondary_action: "#34495e",
    font_family: "Cairo",
    font_size: 16,
  };

  const [config, setConfig] = useState(defaultConfig);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const mainTitleRef = useRef(null);
  const subtitleRef = useRef(null);

  useEffect(() => {
    const id = "cairo-font-link";
    if (!document.getElementById(id)) {
      const link = document.createElement("link");
      link.id = id;
      link.rel = "stylesheet";
      link.href = "https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap";
      document.head.appendChild(link);
    }
  }, []);

  useEffect(() => {
    const main = mainTitleRef.current;
    const sub = subtitleRef.current;
    const baseFontStack = "Arial, sans-serif";
    const font = (config.font_family || defaultConfig.font_family) + ", " + baseFontStack;
    const baseSize = config.font_size || defaultConfig.font_size;

    if (main) {
      main.textContent = config.main_title || defaultConfig.main_title;
      main.style.fontFamily = font;
      main.style.fontSize = `${baseSize * 4}px`;
      main.style.color = config.text_color || defaultConfig.text_color;
    }

    if (sub) {
      sub.textContent = config.subtitle || defaultConfig.subtitle;
      sub.style.fontFamily = font;
      sub.style.fontSize = `${baseSize * 1.75}px`;
      sub.style.color = config.text_color || defaultConfig.text_color;
    }

    const root = document.documentElement;
    root.style.setProperty("--ehb-primary", config.primary_color || defaultConfig.primary_color);
    root.style.setProperty("--ehb-background", config.background_color || defaultConfig.background_color);
    root.style.setProperty("--ehb-surface", config.secondary_surface || defaultConfig.secondary_surface);
    root.style.setProperty("--ehb-action", config.secondary_action || defaultConfig.secondary_action);
  }, [config]);

  useEffect(() => {
    const element = {
      defaultConfig,
      onConfigChange: async (newCfg) => {
        setConfig((c) => ({ ...c, ...newCfg }));
      },
      mapToCapabilities: (cfg) => ({
        recolorables: [
          {
            get: () => cfg.background_color || defaultConfig.background_color,
            set: (value) => {
              cfg.background_color = value;
              window?.elementSdk?.setConfig?.({ background_color: value });
              setConfig({ ...cfg });
            },
          },
          {
            get: () => cfg.secondary_surface || defaultConfig.secondary_surface,
            set: (value) => {
              cfg.secondary_surface = value;
              window?.elementSdk?.setConfig?.({ secondary_surface: value });
              setConfig({ ...cfg });
            },
          },
          {
            get: () => cfg.text_color || defaultConfig.text_color,
            set: (value) => {
              cfg.text_color = value;
              window?.elementSdk?.setConfig?.({ text_color: value });
              setConfig({ ...cfg });
            },
          },
          {
            get: () => cfg.primary_color || defaultConfig.primary_color,
            set: (value) => {
              cfg.primary_color = value;
              window?.elementSdk?.setConfig?.({ primary_color: value });
              setConfig({ ...cfg });
            },
          },
          {
            get: () => cfg.secondary_action || defaultConfig.secondary_action,
            set: (value) => {
              cfg.secondary_action = value;
              window?.elementSdk?.setConfig?.({ secondary_action: value });
              setConfig({ ...cfg });
            },
          },
        ],
        borderables: [],
        fontEditable: {
          get: () => cfg.font_family || defaultConfig.font_family,
          set: (value) => {
            cfg.font_family = value;
            window?.elementSdk?.setConfig?.({ font_family: value });
            setConfig({ ...cfg });
          },
        },
        fontSizeable: {
          get: () => cfg.font_size || defaultConfig.font_size,
          set: (value) => {
            cfg.font_size = value;
            window?.elementSdk?.setConfig?.({ font_size: value });
            setConfig({ ...cfg });
          },
        },
      }),
      mapToEditPanelValues: (cfg) =>
        new Map([
          ["main_title", cfg.main_title || defaultConfig.main_title],
          ["subtitle", cfg.subtitle || defaultConfig.subtitle],
        ]),
    };

    if (window?.elementSdk?.init) {
      try {
        window.elementSdk.init(element);
      } catch (e) {}
    }
  }, []);

  return (
    <div dir="rtl" className="h-screen w-full overflow-hidden" style={{ background: 'var(--ehb-background, #000000)' }}>
      <style>{`
        :root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e }
        .logo-container{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--ehb-background) 0%, #34495e 100%);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeOutContainer 0.5s ease-out 4s forwards}
        .logo{width:80px;height:80px;border-radius:12px;position:absolute;opacity:0;transform:translateY(100%);display:flex;align-items:center;justify-content:center;background:transparent}
        .logo img{max-width:70%;max-height:70%;object-fit:contain;display:block}
        .logo-1{animation:jumpIn 0.6s ease-out 0.2s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
        .logo-2{animation:jumpIn 0.6s ease-out 0.4s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
        .logo-3{animation:jumpIn 0.6s ease-out 0.6s forwards, moveToMerge 0.8s ease-in-out 2s forwards}
        .final-logo{width:120px;height:120px;background:transparent;border-radius:16px;position:absolute;opacity:0;transform:scale(0);animation:finalLogoAppear 0.6s ease-out 2.8s forwards;display:flex;align-items:center;justify-content:center}
        .final-logo img{max-width:80%;max-height:80%;object-fit:contain;display:block}
        @keyframes jumpIn{0%{opacity:0;transform:translateY(100%)}60%{transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
        @keyframes moveToMerge{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
        @keyframes finalLogoAppear{0%{opacity:0;transform:scale(0)}100%{opacity:1;transform:scale(1)}}
        @keyframes fadeOutContainer{to{opacity:0;visibility:hidden}}
        .hero-section{position:relative;width:100%;height:100%;overflow:hidden;opacity:0;animation:fadeInHero 1s ease-out 4.5s forwards}
        @keyframes fadeInHero{to{opacity:1}}
        .hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));z-index:3}
        .hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:40px;gap:2rem;direction:ltr;flex-direction:row}
        .hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px}
        .hero-left img{max-width:100%;height:auto;display:block}
        .hero-content{flex:1;z-index:15;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;padding:40px}
        .hero-title{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6s forwards}
        .hero-subtitle{opacity:0;transform:translateY(30px);animation:slideUpFade 1s ease-out 6.3s forwards}
        @keyframes slideUpFade{to{opacity:1;transform:translateY(0)}}

        /* Brighter, more luminous navy glows: stronger cores, additional layered highlights, subtle lens flare and increased saturation */
        .navy-glow{position:absolute;pointer-events:none;z-index:4;opacity:1;transform:translateZ(0);mix-blend-mode:screen;filter:blur(160px) saturate(160%);transition:opacity .45s ease, transform .45s ease, filter .45s ease;will-change:opacity,transform,filter}

        /* bottom-left glow: very bright core + warm accent rim for contrast */
        .navy-glow.bottom-left{left:0;bottom:0;width:90vh;height:90vh;border-radius:50%;
          background: radial-gradient(circle at 15% 88%, rgba(10,34,78,0.98) 0%, rgba(22,54,110,0.76) 18%, rgba(40,78,140,0.48) 36%, rgba(6,23,58,0) 62%);
          box-shadow: 0 0 120px 32px rgba(10,34,78,0.12), inset 0 0 140px 10px rgba(230,126,34,0.035);
          animation: glowFloat 9s ease-in-out infinite alternate, glowPulse 5.8s ease-in-out infinite;}

        /* layered depth */
        .navy-glow.bottom-left::before, .navy-glow.bottom-left::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
        .navy-glow.bottom-left::before{background: radial-gradient(circle at 22% 78%, rgba(120,170,220,0.22), rgba(120,170,220,0) 46%);transform:scale(0.95);filter:blur(42px);opacity:0.96}
        .navy-glow.bottom-left::after{background: radial-gradient(circle at 42% 92%, rgba(230,126,34,0.12), rgba(230,126,34,0) 52%);transform:scale(0.7);filter:blur(30px);opacity:0.7}
        /* tiny bright flare center */
        .navy-glow.bottom-left .flare{position:absolute;left:18%;bottom:20%;width:18vh;height:18vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.35) 8%, rgba(10,34,78,0.0) 45%);filter:blur(28px);opacity:0.95}

        /* top-right glow: tighter and brighter to balance composition */
        .navy-glow.top-right{right:0;top:0;width:78vh;height:78vh;border-radius:50%;
          background: radial-gradient(circle at 88% 12%, rgba(12,36,82,0.98) 0%, rgba(20,44,88,0.72) 16%, rgba(44,78,140,0.38) 36%, rgba(6,23,58,0) 62%);
          box-shadow: 0 0 110px 24px rgba(44,78,140,0.08), inset 0 0 120px 6px rgba(255,255,255,0.02);
          animation: glowFloat 11.5s ease-in-out infinite alternate, glowPulse 6.6s ease-in-out infinite}

        .navy-glow.top-right::before, .navy-glow.top-right::after{content:"";position:absolute;border-radius:50%;left:0;top:0;right:0;bottom:0;pointer-events:none}
        .navy-glow.top-right::before{background: radial-gradient(circle at 70% 30%, rgba(160,200,255,0.18), rgba(160,200,255,0) 48%);transform:scale(0.94);filter:blur(40px);opacity:0.98}
        .navy-glow.top-right::after{background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0) 45%);transform:scale(0.62);filter:blur(24px);opacity:0.6}
        .navy-glow.top-right .flare{position:absolute;right:14%;top:12%;width:10vh;height:10vh;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.28) 10%, rgba(12,36,82,0) 48%);filter:blur(20px);opacity:0.9}

        /* slightly stronger pulse and float so glow reads as illuminated but stays subtle */
        @keyframes glowFloat{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-22px) scale(1.045)}}
        @keyframes glowPulse{0%{opacity:1}50%{opacity:0.66}100%{opacity:1}}

        /* small responsive tweak so glows don't overwhelm on narrow screens */
        @media (max-width: 640px){
          .navy-glow.bottom-left{width:56vh;height:56vh;filter:blur(110px)}
          .navy-glow.top-right{width:50vh;height:50vh;filter:blur(106px)}
          .navy-glow.bottom-left .flare, .navy-glow.top-right .flare{display:none}
        }
      `}</style>

      <div className="logo-container">
        <div className="logo logo-1" style={{ left: 'calc(50% - 200px)' }}>
          <img src="src/assets/TPS-logo.png" alt="TPS logo" />
        </div>
        <div className="logo logo-2" style={{ left: 'calc(50% - 40px)' }}>
          <img src="src/assets/NSC.png" alt="NSC logo" />
        </div>
        <div className="logo logo-3" style={{ left: 'calc(50% + 120px)' }}>
          <img src="src/assets/LOGO.png" alt="LOGO" />
        </div>
        <div className="final-logo">
          <img src="src/assets/REXNT.png" alt="REXNT" />
        </div>
      </div>

      <div className="hero-section">
        {/* removed the previous hero-image background as requested */}

        <div className="navy-glow bottom-left"><div className="flare" /></div>
        <div className="navy-glow top-right"><div className="flare" /></div>

        <div className="hero-overlay" />

        <div className="hero-layout">
          <div className="hero-left">
            <img src="src/assets/REXNT.png" alt="REXNT" />
          </div>

          <div className="hero-content">
            <h1 ref={mainTitleRef} className="hero-title text-white text-right" style={{ fontWeight: 800, marginBottom: 24, textShadow: '2px 2px 8px rgba(0,0,0,0.5)' }} />

            <p ref={subtitleRef} className="hero-subtitle text-white text-right" style={{ maxWidth: 800, textShadow: '1px 1px 4px rgba(0,0,0,0.5)' }} />

            <div className="mt-8 flex items-center gap-6 justify-end">
              <Button color="light" onClick={() => window?.scrollTo?.({ top: 0, behavior: 'smooth' })}>ابدأ</Button>

              <div className="relative">
                <Button onClick={() => setDropdownOpen((s) => !s)} className="bg-[var(--ehb-primary)] text-black font-semibold">
                  تواصل معنا
                </Button>

                {dropdownOpen && (
                  <div className="absolute mt-3 right-0 bg-[#06173a] border border-white/10 rounded p-3 text-white shadow-2xl">
                    <a className="flex items-center gap-3 py-2 px-3 hover:underline" href="https://wa.me/963965656631" target="_blank" rel="noreferrer">📱 <span>+963965656631</span></a>
                    <a className="flex items-center gap-3 py-2 px-3 hover:underline" href="mailto:info@TPS-STATIONS.COM">✉️ <span>info@TPS-STATIONS.COM</span></a>
                  </div>
                )}

              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  );
}
