"use client";

import React, { useEffect, useState } from "react";
import { useContent } from "./ContentProvider";

export const InteractiveElements: React.FC = () => {
  const { nav } = useContent();
  const [progress, setProgress] = useState(0);
  const [showBackToTop, setShowBackToTop] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY;
      const docHeight =
        document.documentElement.scrollHeight - window.innerHeight;

      if (docHeight > 0) {
        setProgress((scrollTop / docHeight) * 100);
      }

      setShowBackToTop(scrollTop > 300);
    };

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

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  return (
    <>
      {/* Reading Progress Bar */}
      <div
        className="reading-progress-bar"
        style={{
          transform: `scaleX(${progress / 100})`,
          display: "block",
        }}
      />

      {/* Floating Back to Top Button */}
      <button
        onClick={scrollToTop}
        className={`floating-back-to-top ${showBackToTop ? "visible" : ""}`}
        aria-label={nav.backToTop}
        style={{ display: "flex" }}
      >
        <svg
          className="w-5 h-5"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M5 10l7-7m0 0l7 7m-7-7v18"
          />
        </svg>
      </button>
    </>
  );
};