"use client";
// app/components/Header.tsx
import Link from "next/link";
import { useEffect, useState } from "react";

export default function Header() {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [isTop, setIsTop] = useState(true);

  // Initialise le thème en fonction du localStorage ou de la préférence système
  useEffect(() => {
    const saved = typeof window !== "undefined" ? localStorage.getItem("theme") : null;
    const prefersDark = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
    const initial = (saved === "light" || saved === "dark") ? (saved as "light" | "dark") : (prefersDark ? "dark" : "light");
    setTheme(initial);
    document.documentElement.setAttribute("data-theme", initial);
  }, []);

  // Détecte si l'on est tout en haut de la page
  useEffect(() => {
    const onScroll = () => setIsTop(window.scrollY <= 0);
    onScroll(); // état initial au chargement
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const toggleTheme = () => {
    const next = theme === "dark" ? "light" : "dark";
    setTheme(next);
    document.documentElement.setAttribute("data-theme", next);
    try {
      localStorage.setItem("theme", next);
    } catch {}
  };

  return (
      <header className={isTop ? "minimalist-pro is-top" : "minimalist-pro"}>
          <div className="logo">
              <Link href="/">
                  <span className="name">Anthony Violet</span>
                  <span className="tagline">Développeur Freelance & Digital Nomad</span>
              </Link>
          </div>
          <nav>
              <ul>
                  <li><Link href="/projects" >Projets</Link></li>
                  <li><Link href="/competences">Compétences</Link></li>
                  <li><Link href="#blog">Blog Voyage</Link></li>
                  <li><Link href="/contact">Contact</Link></li>
                  <li><Link href="https://fr.malt.be/profile/anthonyviolet1" target="_blank">Malt</Link></li>
                  <li><Link href="https://www.linkedin.com/in/anthony-violet/" target="_blank">LinkedIn</Link></li>
              </ul>
          </nav>
          <div className="cta">
              <button
                  type="button"
                  className="theme-toggle__btn"
                  aria-label={theme === "dark" ? "Activer le thème clair" : "Activer le thème sombre"}
                  onClick={toggleTheme}
                  title={theme === "dark" ? "Mode clair" : "Mode sombre"}
              >
                  {theme === "dark" ? "☀️" : "🌙"}
              </button>
              <Link href="mailto:tonemail@domaine.com" className="button">Travaillons ensemble</Link>
          </div>
      </header>

      /*<header className="cyberpunk">
          <div className="glitch-logo">
              <Link href="/">
                  <span data-text="Anthony Violet">Anthony Violet</span>
                  <span className="subtitle">// Développeur Full Stack & Créateur de Jeux</span>
              </Link>
          </div>
          <nav className="neon-nav">
              <ul>
                  <li><Link href="#projets" className="neon-link">/projets</Link></li>
                  <li><Link href="#tech" className="neon-link">/tech-stack</Link></li>
                  <li><Link href="#blog" className="neon-link">/toine-traveller</Link></li>
                  <li><Link href="#contact" className="neon-link">/contact@terminal</Link></li>
              </ul>
          </nav>
          <div className="status-bar">
              <span>En ligne █</span>
              <span>Disponible pour missions</span>
          </div>
      </header>

      <header className="sidebar-header">
          <div className="profile-pic">
              <img src="ton-avatar.jpg" alt="Anthony Violet" />
          </div>
          <div className="profile-info">
              <h1>Anthony Violet</h1>
              <p>Freelance Dev | Digital Nomad | Builder de jeux & apps</p>
          </div>
          <nav>
              <ul>
                  <li><Link href="#projets"><i className="icon-code"></i> Projets</Link></li>
                  <li><Link href="#about"><i className="icon-user"></i> À propos</Link></li>
                  <li><Link href="#blog"><i className="icon-globe"></i> Blog</Link></li>
                  <li><Link href="#contact"><i className="icon-mail"></i> contact</Link></li>
              </ul>
          </nav>
          <div className="social-links">
              <Link href="https://github.com/tonuser" target="_blank"><i className="icon-github"></i></Link>
              <Link href="https://linkedin.com/in/anthony-violet" target="_blank"><i className="icon-linkedin"></i></Link>
          </div>
      </header>

      <header className="interactive-header">
          <div className="typewriter">
              <h1>Bonjour, je suis <span className="typed-text">Anthony Violet</span></h1>
              <p>Je code en <span className="tech-tag">JavaScript</span>, <span className="tech-tag">Python</span>, et j'explore le monde.</p>
          </div>
          <nav>
              <ul>
                  <li><Link href="#projets">Mes réalisations</Link></li>
                  <li><Link href="#cv">Mon CV</Link></li>
                  <li><Link href="#blog">Mes aventures</Link></li>
              </ul>
          </nav>
          <div className="language-switcher">
              <button>FR</button>
              <button>EN</button>
          </div>
      </header>

      <header className="dark-header">
          <div className="container">
              <Link href="/" className="logo">
                  <img src="logo.svg" alt="Logo Anthony Violet" />
              </Link>
              <nav>
                  <ul>
                      <li><Link href="#projets">Projets</Link></li>
                      <li><Link href="#services">Services</Link></li>
                      <li><Link href="#blog">Blog</Link></li>
                      <li><Link href="#contact">Me contacter</Link></li>
                  </ul>
              </nav>
          </div>
          <div className="theme-toggle">
              <button id="theme-button"><i className="icon-moon"></i></button>
          </div>
      </header>*/
    );
}