import { useMemo, type CSSProperties } from 'react';
import { SiteFooter } from '../../shared/components/SiteFooter';
import { SiteNavbar } from '../../shared/components/SiteNavbar';
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} />;
}

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]);

  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" />

      <SiteNavbar activeTab="tips" activeTipsItem="jobordbogen" />

      <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>
  );
}
