import { useEffect, useMemo, useState, type CSSProperties } from 'react';
import { SiteFooter } from '../../shared/components/SiteFooter';
import { dictCards, slugifyJobordbogenTitle } from './JobordbogenPage';
import './jobordbogen.css';

interface IconifyIconProps {
  className?: string;
  icon: string;
  style?: CSSProperties;
}

function IconifyIcon({ className, icon, style }: IconifyIconProps) {
  return <iconify-icon className={className} icon={icon} style={style} />;
}

function Logo() {
  return (
    <svg viewBox="0 0 100 100" className="w-8 h-8 rounded-lg shadow-[0_4px_15px_rgba(49,103,201,0.2)] group-hover:shadow-[0_6px_20px_rgba(49,103,201,0.3)] transition-all group-hover:scale-105">
      <defs>
        <linearGradient id="jobEntryNavBg" x1="0%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#1A9A75" />
          <stop offset="100%" stopColor="#3167C9" />
        </linearGradient>
        <linearGradient id="jobEntryNavFg" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#6ACEEB" />
          <stop offset="100%" stopColor="#46D3B6" />
        </linearGradient>
      </defs>
      <rect width="100" height="100" fill="url(#jobEntryNavBg)" />
      <path fillRule="evenodd" clipRule="evenodd" d="M 60 15 L 72 15 L 72 85 L 60 85 L 60 72.98 A 28 28 0 1 1 60 27.02 Z M 44 34 A 16 16 0 1 0 44 66 A 16 16 0 1 0 44 34 Z" fill="url(#jobEntryNavFg)" />
    </svg>
  );
}

export function JobordbogenEntryPage() {
  const path = useMemo(() => window.location.pathname, []);
  const slug = path.split('/').filter(Boolean).at(-1) ?? '';
  const currentCard = useMemo(() => dictCards.find((card) => slugifyJobordbogenTitle(card.title) === slug) ?? null, [slug]);
  const relatedCards = useMemo(() => dictCards.filter((card) => card.title !== currentCard?.title).slice(0, 3), [currentCard?.title]);
  const [isNavOpen, setIsNavOpen] = useState(false);
  const [isTipsOpen, setIsTipsOpen] = useState(false);
  const [isHowOpen, setIsHowOpen] = useState(false);

  useEffect(() => {
    if (!isNavOpen) return undefined;
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = previousOverflow;
    };
  }, [isNavOpen]);

  useEffect(() => {
    function handleResize() {
      if (window.innerWidth > 990) setIsNavOpen(false);
    }
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  if (!currentCard) {
    return (
      <div className="job-react-root min-h-screen bg-[#f8fafc] flex flex-col items-center justify-center px-6 text-center">
        <h1 className="text-3xl font-medium text-gray-900 mb-3">Begrebet blev ikke fundet</h1>
        <a href="/jobordbogen" className="text-teal-600 hover:text-teal-700">Tilbage til Jobordbogen</a>
      </div>
    );
  }

  return (
    <div className="job-react-root scroll-smooth bg-[#f8fafc] relative min-h-screen text-gray-600 selection:bg-teal-100 selection:text-teal-900 overflow-x-hidden flex flex-col font-normal custom-scrollbar">
      <div className="fixed top-[-15%] left-[-10%] w-[60vw] h-[60vw] rounded-full bg-gradient-to-br from-teal-400/30 to-emerald-300/10 blur-[140px] pointer-events-none z-0" />
      <div className="fixed bottom-[-15%] right-[-10%] w-[70vw] h-[70vw] rounded-full bg-gradient-to-tl from-indigo-500/20 to-purple-400/10 blur-[160px] pointer-events-none z-0" />
      <div className="fixed top-[20%] right-[15%] w-[40vw] h-[40vw] rounded-full bg-gradient-to-tr from-cyan-400/20 to-blue-300/10 blur-[130px] pointer-events-none z-0" />

      <nav className="fixed top-0 inset-x-0 z-50 h-16 bg-white/20 backdrop-blur-2xl border-b border-white/50 shadow-[0_4px_30px_rgba(0,0,0,0.03)] flex items-center justify-between px-6 lg:px-12 transition-all">
        <a href="/home" className="flex items-center gap-2 group outline-none">
          <Logo />
          <span className="text-xl font-normal tracking-tight text-gray-900 uppercase">ARBEJD</span>
        </a>
        <div className="job-nav-links">
          <a href="/pricing" className="text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Priser</a>
          <div className="job-how-dropdown">
            <button type="button" className="job-how-trigger text-base font-normal text-gray-600 hover:text-gray-900 transition-colors outline-none drop-shadow-sm" onClick={() => { setIsHowOpen((c) => !c); setIsTipsOpen(false); }} aria-expanded={isHowOpen}>
              Sådan virker det
              <IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isHowOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
            </button>
            <div className={isHowOpen ? 'job-how-menu open' : 'job-how-menu'}>
              <a href="#" onClick={() => setIsHowOpen(false)}>For virksomheder</a>
              <a href="#" onClick={() => setIsHowOpen(false)}>For jobsøgere</a>
              <a href="/pricing" onClick={() => setIsHowOpen(false)}>Priser</a>
              <a href="#" onClick={() => setIsHowOpen(false)}>FAQ</a>
              <a href="#" onClick={() => setIsHowOpen(false)}>Nyhedsbrev</a>
            </div>
          </div>
          <div className="job-tips-dropdown">
            <button type="button" className="job-tips-trigger text-base font-normal text-gray-900 transition-colors outline-none drop-shadow-sm border-b-2 border-teal-500 pb-0.5" onClick={() => { setIsTipsOpen((c) => !c); setIsHowOpen(false); }} aria-expanded={isTipsOpen}>
              Tips og tricks
              <IconifyIcon icon="solar:alt-arrow-down-linear" className={`text-base transition-transform ${isTipsOpen ? 'rotate-180' : ''}`} style={{ strokeWidth: 1.5 }} />
            </button>
            <div className={isTipsOpen ? 'job-tips-menu open' : 'job-tips-menu'}>
              <a href="/stories" onClick={() => setIsTipsOpen(false)}>Stories</a>
              <a href="/jobordbogen" className="active" onClick={() => setIsTipsOpen(false)}>Jobordbogen</a>
            </div>
          </div>
        </div>
        <div className="job-nav-actions">
          <a href="#" className="hidden sm:block text-base font-normal text-gray-700 hover:text-gray-900 transition-colors outline-none drop-shadow-sm">Log ind</a>
          <a href="#" className="text-base font-normal text-white bg-gradient-to-r from-gray-900 to-gray-800 hover:from-gray-800 hover:to-gray-700 px-5 py-2.5 rounded-full transition-all shadow-[0_4px_15px_rgba(0,0,0,0.1)] outline-none border border-gray-700">Opret dig</a>
        </div>
        <button type="button" className="job-nav-hamburger" aria-expanded={isNavOpen} aria-label={isNavOpen ? 'Luk menu' : 'Åbn menu'} onClick={() => setIsNavOpen((c) => !c)}>
          <IconifyIcon icon={isNavOpen ? 'solar:close-circle-linear' : 'solar:hamburger-menu-linear'} className="text-xl text-gray-800" style={{ strokeWidth: 1.8 }} />
        </button>
        <div className={isNavOpen ? 'job-nav-popup open' : 'job-nav-popup'}>
          <a href="/pricing" onClick={() => setIsNavOpen(false)}>Priser</a>
          <a href="/stories" onClick={() => setIsNavOpen(false)}>Tips og tricks: Stories</a>
          <a href="/jobordbogen" onClick={() => setIsNavOpen(false)}>Tips og tricks: Jobordbogen</a>
          <a href="#" onClick={() => setIsNavOpen(false)}>Log ind</a>
          <a href="#" className="job-nav-popup-cta" onClick={() => setIsNavOpen(false)}>Opret dig</a>
        </div>
      </nav>

      <main className="flex-1 relative z-10 pt-16">
        <section className="relative pt-24 pb-12 px-6 lg:px-12 max-w-7xl mx-auto flex flex-col items-center text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-white/80 to-white/40 backdrop-blur-xl border border-white/80 text-gray-800 text-xs font-medium uppercase tracking-wider mb-8 shadow-sm relative z-30 transition-all">
            <IconifyIcon icon="solar:document-text-linear" className="text-base text-teal-600" style={{ strokeWidth: 1.5 }} />
            Definition
          </div>
          <h1 className="text-5xl md:text-6xl lg:text-7xl font-medium tracking-tight text-gradient mb-8 leading-tight max-w-4xl drop-shadow-sm relative z-30 transition-all">{currentCard.title}</h1>
          <p className="text-xl md:text-2xl text-gray-600 max-w-3xl font-normal leading-relaxed drop-shadow-sm relative z-30 transition-all min-h-[5rem]">Hvad betyder det?</p>
        </section>

        <div className="max-w-7xl mx-auto px-6 lg:px-12 relative z-20 pb-24">
          <button type="button" onClick={() => window.location.assign('/jobordbogen')} className="mb-10 inline-flex items-center gap-2 px-5 py-2.5 bg-white/60 backdrop-blur-md border border-gray-200/60 shadow-sm rounded-full text-sm font-medium text-gray-600 hover:text-gray-900 hover:shadow-md transition-all outline-none">
            <IconifyIcon icon="solar:arrow-left-linear" className="text-lg" />
            Tilbage til oversigten
          </button>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
            <div className="flex flex-col">
              <div className="text-base text-gray-600 font-normal leading-relaxed space-y-6">
                <p>{currentCard.body}</p>
              </div>
              <div className="mt-12 flex flex-col sm:flex-row items-start sm:items-center gap-5 p-6 bg-gradient-to-r from-white/80 to-white/40 backdrop-blur-xl border border-white/80 rounded-[2rem] shadow-[0_8px_30px_rgba(0,0,0,0.03)]">
                <div className="relative">
                  <img src="https://ui-avatars.com/api/?name=Magnus+Villumsen&background=0d9488&color=fff&size=150" alt="Magnus" className="w-16 h-16 rounded-full shadow-md object-cover" />
                  <div className="absolute bottom-0 right-0 w-4 h-4 rounded-full bg-green-400 border-2 border-white" />
                </div>
                <div className="flex-1">
                  <div className="text-xs font-semibold text-teal-600 uppercase tracking-wider mb-1">Defineret af Arbejd.coms</div>
                  <h4 className="text-xl font-medium tracking-tight text-gray-900">Magnus Villumsen</h4>
                  <div className="text-sm font-medium text-gray-500">Content Creator</div>
                </div>
                <div className="sm:text-right mt-4 sm:mt-0 pt-4 sm:pt-0 border-t sm:border-t-0 border-gray-100 sm:border-l sm:pl-5 w-full sm:w-auto">
                  <div className="text-xs font-medium text-gray-400 uppercase tracking-wider mb-1">Sidst opdateret</div>
                  <div className="text-sm font-medium text-gray-800">March 7, 2026</div>
                </div>
              </div>
            </div>

            <div className="relative w-full aspect-square md:aspect-[4/3] rounded-[3rem] bg-gradient-to-br from-teal-500/5 to-indigo-500/5 backdrop-blur-3xl border border-white/60 shadow-[0_8px_40px_rgba(0,0,0,0.04)] flex items-center justify-center overflow-hidden">
              <div className="absolute w-3/4 h-3/4 bg-teal-400/20 blur-[80px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2" />
              <div className="absolute w-1/2 h-1/2 bg-indigo-400/10 blur-[60px] rounded-full top-1/4 right-1/4" />
              <div className="relative z-10 w-32 h-32 rounded-[2rem] bg-gradient-to-tr from-white/80 to-white/30 backdrop-blur-xl border border-white/80 shadow-[0_20px_40px_rgba(0,0,0,0.1)] flex items-center justify-center animate-float-medium">
                <IconifyIcon icon="solar:user-id-linear" className="text-6xl text-teal-600" style={{ strokeWidth: 1.5 }} />
              </div>
            </div>
          </div>

          <div className="mt-24 border-t border-gray-200/50 pt-16">
            <h2 className="text-3xl font-medium tracking-tight text-gray-900 mb-10">Relaterede begreber</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {relatedCards.map((card) => (
                <a key={card.title} href={`/jobordbogen/${slugifyJobordbogenTitle(card.title)}`} className="group flex flex-col p-8 bg-gradient-to-br from-white/80 to-white/40 backdrop-blur-2xl border border-white/80 rounded-3xl shadow-[0_8px_30px_rgba(0,0,0,0.04)] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)] hover:-translate-y-1 transition-all duration-300 outline-none">
                  <div className="w-12 h-12 rounded-2xl bg-teal-50/50 border border-teal-100/50 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                    <IconifyIcon icon="solar:document-text-linear" className="text-2xl text-teal-600" style={{ strokeWidth: 1.5 }} />
                  </div>
                  <h3 className="text-xl font-medium text-gray-900 tracking-tight mb-3 group-hover:text-teal-600 transition-colors">{card.title}</h3>
                  <p className="text-base text-gray-600 leading-relaxed font-normal mb-8 line-clamp-4 flex-1">{card.body}</p>
                  <div className="mt-auto flex items-center gap-2 text-sm font-medium text-teal-600 group-hover:text-teal-700 transition-colors">
                    Se definitionen
                    <IconifyIcon icon="solar:arrow-right-linear" className="text-lg group-hover:translate-x-1 transition-transform" style={{ strokeWidth: 1.5 }} />
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </main>
      <SiteFooter />
    </div>
  );
}
