Simpl-Resultat/src/components/settings/DocsContent.tsx

import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import {
  Rocket,
  LayoutDashboard,
  Upload,
  ArrowLeftRight,
  Tags,
  SlidersHorizontal,
  PiggyBank,
  BarChart3,
  Wallet,
  Settings,
  Lightbulb,
  ListChecks,
  Footprints,
  Printer,
  Users,
} from "lucide-react";

const SECTIONS = [
  { key: "gettingStarted", icon: Rocket },
  { key: "profiles", icon: Users },
  { key: "dashboard", icon: LayoutDashboard },
  { key: "import", icon: Upload },
  { key: "transactions", icon: ArrowLeftRight },
  { key: "categories", icon: Tags },
  { key: "adjustments", icon: SlidersHorizontal },
  { key: "budget", icon: PiggyBank },
  { key: "reports", icon: BarChart3 },
  { key: "balance", icon: Wallet },
  { key: "settings", icon: Settings },
] as const;

export default function DocsContent() {
  const { t } = useTranslation();
  const location = useLocation();
  const sectionRefs = useRef<Record<string, HTMLElement | null>>({});
  const [activeSection, setActiveSection] = useState<string>(SECTIONS[0].key);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            setActiveSection(entry.target.id);
          }
        }
      },
      { rootMargin: "-30% 0px -60% 0px", threshold: 0 },
    );

    for (const { key } of SECTIONS) {
      const el = sectionRefs.current[key];
      if (el) observer.observe(el);
    }

    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    const hash = location.hash.replace("#", "");
    if (hash && sectionRefs.current[hash]) {
      requestAnimationFrame(() => {
        sectionRefs.current[hash]?.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      });
    }
  }, [location.hash]);

  const scrollToSection = (key: string) => {
    sectionRefs.current[key]?.scrollIntoView({
      behavior: "smooth",
      block: "start",
    });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between gap-3">
        <h2 className="text-xl font-semibold">{t("docs.title")}</h2>
        <button
          onClick={() => window.print()}
          className="print:hidden flex items-center gap-2 px-3 py-2 text-sm rounded-lg bg-[var(--card)] border border-[var(--border)] text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--muted)] transition-colors"
          title={t("docs.print")}
        >
          <Printer size={16} />
          {t("docs.print")}
        </button>
      </div>

      <nav
        className="print:hidden bg-[var(--card)] border border-[var(--border)] rounded-xl p-3"
        aria-label={t("docs.title")}
      >
        <ul className="flex flex-wrap gap-1">
          {SECTIONS.map(({ key, icon: Icon }) => (
            <li key={key}>
              <button
                onClick={() => scrollToSection(key)}
                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs transition-colors ${
                  activeSection === key
                    ? "bg-[var(--primary)] text-white font-medium"
                    : "text-[var(--muted-foreground)] hover:bg-[var(--border)] hover:text-[var(--foreground)]"
                }`}
              >
                <Icon size={13} />
                {t(`docs.${key}.title`)}
              </button>
            </li>
          ))}
        </ul>
      </nav>

      {SECTIONS.map(({ key, icon: Icon }) => (
        <section
          key={key}
          id={key}
          ref={(el) => {
            sectionRefs.current[key] = el;
          }}
          className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-6 space-y-4 scroll-mt-4"
        >
          <div className="flex items-center gap-3">
            <div className="w-9 h-9 rounded-lg bg-[var(--primary)]/10 flex items-center justify-center text-[var(--primary)]">
              <Icon size={20} />
            </div>
            <h3 className="text-lg font-semibold">{t(`docs.${key}.title`)}</h3>
          </div>

          <p className="text-[var(--muted-foreground)]">
            {t(`docs.${key}.overview`)}
          </p>

          <div>
            <h4 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)] mb-2">
              <ListChecks size={14} />
              {t("docs.features")}
            </h4>
            <ul className="space-y-1">
              {(
                t(`docs.${key}.features`, { returnObjects: true }) as string[]
              ).map((item, i) => (
                <li key={i} className="flex items-start gap-2 text-sm">
                  <span className="text-[var(--primary)] mt-0.5 shrink-0">
                    &bull;
                  </span>
                  {item}
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)] mb-2">
              <Footprints size={14} />
              {key === "gettingStarted"
                ? t("docs.quickStart")
                : t("docs.howTo")}
            </h4>
            <ol className="space-y-1 list-decimal list-inside">
              {(
                t(`docs.${key}.steps`, { returnObjects: true }) as string[]
              ).map((item, i) => (
                <li key={i} className="text-sm">
                  {item}
                </li>
              ))}
            </ol>
          </div>

          <div className="bg-[var(--background)] rounded-lg p-4">
            <h4 className="flex items-center gap-2 text-sm font-semibold uppercase tracking-wider text-[var(--muted-foreground)] mb-2">
              <Lightbulb size={14} />
              {t("docs.tipsHeader")}
            </h4>
            <ul className="space-y-1">
              {(
                t(`docs.${key}.tips`, { returnObjects: true }) as string[]
              ).map((item, i) => (
                <li
                  key={i}
                  className="flex items-start gap-2 text-sm text-[var(--muted-foreground)]"
                >
                  <Lightbulb
                    size={13}
                    className="text-[var(--primary)] mt-0.5 shrink-0"
                  />
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </section>
      ))}
    </div>
  );
}