import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import { dataStore, type SiteSettings } from '@/lib/dataStore';

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [settings, setSettings] = useState<SiteSettings | null>(null);

  useEffect(() => {
    setSettings(dataStore.getSiteSettings());
  }, []);

  const menuItems = [
    { href: '/', icon: '🏠', title: 'Ana Sayfa', desc: 'Projeye genel bakış' },
    { href: '/canli-yayin', icon: '📹', title: 'Canlı Yayın', desc: 'İnşaatı canlı izleyin' },
    { href: '/haberler', icon: '📰', title: 'Haberler', desc: 'Güncel haberler' },
    { href: '/medya', icon: '📸', title: 'Medya Galerisi', desc: 'Videolar ve fotoğraflar' },
    { href: '/sss', icon: '❓', title: 'Sıkça Sorulan Sorular', desc: 'SSS ve cevaplar' },
    { href: '/belgeler', icon: '📄', title: 'Belgeler', desc: 'Teknik dokümanlar' },
    { href: '/iletisim', icon: '📧', title: 'İletişim', desc: 'Bize ulaşın' },
    { href: 'https://www.ankara.bel.tr/', icon: '🏛️', title: 'Ankara Belediyesi', desc: 'Resmi web sitesi', external: true },
  ];

  return (
    <>
  <header className="fixed top-0 left-0 right-0 z-50 bg-[#003366]/70 backdrop-blur-xl shadow-lg border-b border-[#00B4D8]/40">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            <Link href="/" className="flex items-center">
              <div className="w-32 h-32">
                <Image
                  src="https://www.ankara.bel.tr/assets/images/logo-white.svg"
                  alt="Ankara Belediyesi Logo"
                  width={128}
                  height={128}
                  className="w-full h-full object-contain"
                />
              </div>
            </Link>

            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="relative flex flex-col items-center justify-center w-14 h-14 rounded-xl bg-linear-to-br from-[#004B87] to-[#00B4D8] hover:shadow-xl transition-all duration-300 transform hover:scale-110 overflow-hidden group"
            >
              <div className="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity"></div>
              <span className={`block w-7 h-0.5 bg-white transition-all duration-300 relative z-10 ${isMenuOpen ? 'rotate-45 translate-y-2' : ''}`}></span>
              <span className={`block w-7 h-0.5 bg-white my-1.5 transition-all duration-300 relative z-10 ${isMenuOpen ? 'opacity-0 scale-0' : ''}`}></span>
              <span className={`block w-7 h-0.5 bg-white transition-all duration-300 relative z-10 ${isMenuOpen ? '-rotate-45 -translate-y-2' : ''}`}></span>
            </button>
          </div>
        </div>
      </header>

      {/* Full Screen Overlay Menu */}
  <div className={`fixed inset-0 z-60 transition-all duration-500 ${isMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}>
        <div 
          className="absolute inset-0 bg-black/60 backdrop-blur-sm"
          onClick={() => setIsMenuOpen(false)}
        ></div>

        <div className={`absolute top-0 right-0 h-full w-full md:w-[550px] bg-linear-to-br from-[#003366] via-[#004B87] to-[#005f99] shadow-2xl transform transition-transform duration-500 ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
          <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDEzNEgxMnYxMmgyNHYtMTJ6bTAtMThIMTJ2MTJoMjR2LTEyem0wLTE4SDEydjEyaDI0Vjk4em0wLTE4SDEydjEyaDI0Vjgwem0wLTE4SDEydjEyaDI0VjYyem0yNCAxMDhoLTEydjEyaDEydi0xMnptMC0xOGgtMTJ2MTJoMTJ2LTEyem0wLTE4aC0xMnYxMmgxMnYtMTJ6bTAtMThoLTEydjEyaDEyVjk4em0wLTE4aC0xMnYxMmgxMlY4MHptMC0xOGgtMTJ2MTJoMTJWNjJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-30"></div>
          
          <div className="relative flex flex-col h-full">
            <div className="flex justify-between items-center p-8 border-b border-white/20">
              <div>
                <h2 className="text-2xl font-bold text-white mb-1">Menü</h2>
                <p className="text-white/70 text-sm">A2 Metro Hattı Projesi</p>
              </div>
              <button
                onClick={() => setIsMenuOpen(false)}
                className="w-12 h-12 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all duration-300 hover:rotate-90"
              >
                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

            <nav className="flex-1 overflow-y-auto p-8 space-y-3">
              {menuItems.map((item, index) => (
                <a
                  key={index}
                  href={item.href}
                  target={item.external ? '_blank' : undefined}
                  rel={item.external ? 'noopener noreferrer' : undefined}
                  onClick={() => !item.external && setIsMenuOpen(false)}
                  className="group block p-5 rounded-2xl bg-white/5 hover:bg-white/15 backdrop-blur-sm border border-white/10 hover:border-white/30 transition-all duration-300 transform hover:scale-105 hover:shadow-xl"
                  style={{ animationDelay: `${index * 50}ms` }}
                >
                  <div className="flex items-center space-x-4">
                    <div className="shrink-0 w-14 h-14 rounded-xl bg-white/10 flex items-center justify-center text-3xl group-hover:scale-110 transition-transform duration-300">
                      {item.icon}
                    </div>
                    <div className="flex-1">
                      <h3 className="text-lg font-bold text-white group-hover:text-[#00B4D8] transition-colors">
                        {item.title}
                      </h3>
                      <p className="text-sm text-white/70 group-hover:text-white/90 transition-colors">
                        {item.desc}
                      </p>
                    </div>
                    <svg className="w-6 h-6 text-white/50 group-hover:text-white group-hover:translate-x-2 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                    </svg>
                  </div>
                </a>
              ))}
            </nav>

            <div className="p-8 border-t border-white/20">
              <div className="flex items-center space-x-4">
                <div className="flex-1">
                  <p className="text-white/70 text-xs mb-2">Sosyal Medya</p>
                  {settings && (
                    <div className="flex space-x-2">
                      {settings.social.twitter && (
                        <a
                          href={settings.social.twitter}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="w-10 h-10 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all hover:scale-110"
                        >
                          <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z" />
                          </svg>
                        </a>
                      )}
                      {settings.social.facebook && (
                        <a
                          href={settings.social.facebook}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="w-10 h-10 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all hover:scale-110"
                        >
                          <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z" />
                          </svg>
                        </a>
                      )}
                      {settings.social.instagram && (
                        <a
                          href={settings.social.instagram}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="w-10 h-10 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all hover:scale-110"
                        >
                          <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                          </svg>
                        </a>
                      )}
                      {settings.social.linkedin && (
                        <a
                          href={settings.social.linkedin}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="w-10 h-10 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center transition-all hover:scale-110"
                        >
                          <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z M4 2a2 2 0 100 4 2 2 0 000-4z" />
                          </svg>
                        </a>
                      )}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}