"use client";

import * as React from "react";
import Link from "next/link";
import { Share2, ArrowLeft, ArrowUp } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { ShareModal } from "../ShareModal";
import { useAnalytics } from "../analytics/useAnalytics";

interface BlogPostStickyBarProps {
  title: string;
  url: string;
}

export function BlogPostStickyBar({ title, url }: BlogPostStickyBarProps) {
  const [isVisible, setIsVisible] = React.useState(false);
  const [isShareModalOpen, setIsShareModalOpen] = React.useState(false);
  const { trackEvent } = useAnalytics();

  React.useEffect(() => {
    const handleScroll = () => {
      // Show start appearing after scrolling past the header area (approx 600px)
      const show = window.scrollY > 600;
      setIsVisible(show);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ y: -20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ y: -20, opacity: 0 }}
            transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
            className="fixed top-[72px] md:top-[80px] left-0 right-0 z-[90] bg-white/70 backdrop-blur-xl border-b border-slate-100 shadow-sm shadow-slate-100/50 h-16"
          >
            <div className="max-w-4xl mx-auto px-6 h-full flex items-center justify-center relative">
              {/* Left Side - Absolute Positioned */}
              <div className="absolute left-6 h-full flex items-center">
                <Link
                  href="/blog"
                  className="group flex items-center gap-2.5 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 hover:text-slate-900 transition-colors"
                >
                  <div className="w-9 h-9 rounded-full border border-slate-200 group-hover:border-slate-900 group-hover:bg-slate-900 flex items-center justify-center transition-all duration-300">
                    <ArrowLeft className="w-4 h-4 text-slate-400 group-hover:text-white transition-colors" />
                  </div>
                  <span className="hidden sm:inline">Blog</span>
                </Link>
              </div>

              {/* Center Title - Guaranteed dead center */}
              <div className="flex items-center justify-center p-0 m-0 h-full">
                <span className="text-[11px] font-bold text-slate-800 tracking-tight text-center max-w-[40vw] truncate leading-normal m-0 p-0 block uppercase">
                  {title}
                </span>
              </div>

              {/* Right Side - Absolute Positioned */}
              <div className="absolute right-6 h-full flex items-center gap-3">
                <button
                  onClick={() =>
                    window.scrollTo({ top: 0, behavior: "smooth" })
                  }
                  className="p-2 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-all md:hidden flex items-center justify-center"
                  title="Nach oben"
                >
                  <ArrowUp className="w-5 h-5" />
                </button>

                <button
                  onClick={() => {
                    setIsShareModalOpen(true);
                    trackEvent("blog_post_sticky_share_clicked", { url });
                  }}
                  className="inline-flex items-center gap-2.5 px-5 py-2 border border-slate-200 hover:border-slate-300 hover:bg-slate-50 rounded-full text-slate-600 hover:text-slate-900 transition-all text-[10px] font-bold uppercase tracking-[0.1em] leading-none"
                >
                  <Share2 className="w-4 h-4" />
                  <span className="hidden xs:inline">Teilen</span>
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <ShareModal
        isOpen={isShareModalOpen}
        onClose={() => setIsShareModalOpen(false)}
        url={url}
        title={title}
      />
    </>
  );
}
