"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion } from "framer-motion";

interface SidebarSection {
  title: string;
  items: { label: string; href: string }[];
}

const sections: SidebarSection[] = [
  {
    title: "Erste Schritte",
    items: [
      { label: "Erstes Modell drucken", href: "/guides/erstes-modell-drucken" },
      { label: "Druckbett leveln", href: "/guides/druckbett-leveln-z-offset" },
      { label: "Erste Schicht kalibrieren", href: "/guides/erste-schicht-kalibrieren" },
    ],
  },
  {
    title: "Materialien",
    items: [
      { label: "PLA perfekt einstellen", href: "/guides/pla-perfekt-einstellen" },
      { label: "PETG ohne Frust", href: "/guides/petg-ohne-frust" },
      { label: "TPU drucken", href: "/guides/tpu-drucken" },
      { label: "ASA/ABS Grundlagen", href: "/guides/asa-abs-grundlagen" },
      { label: "Nylon (PA) drucken", href: "/guides/nylon-pa-drucken" },
      { label: "Carbon & Glasfaser", href: "/guides/carbon-fiber-glasfaser-filamente" },
    ],
  },
  {
    title: "Fehlerbehebung",
    items: [
      { label: "Stringing reduzieren", href: "/guides/stringing-reduzieren" },
      { label: "Warping vermeiden", href: "/guides/warping-vermeiden" },
      { label: "Unterextrusion beheben", href: "/guides/unterextrusion-beheben" },
      { label: "Layer Separation", href: "/guides/layer-separation-beheben" },
      { label: "Elefantenfuss beheben", href: "/guides/elefantenfuss-beheben" },
      { label: "Verstopfte Duese", href: "/guides/verstopfte-duese-diagnose-reinigung" },
    ],
  },
  {
    title: "Kalibrierung",
    items: [
      { label: "Retraction kalibrieren", href: "/guides/retraction-kalibrieren" },
      { label: "Flow-Rate & E-Steps", href: "/guides/flow-rate-e-steps-kalibrieren" },
      { label: "Pressure Advance", href: "/guides/pressure-advance-kalibrieren" },
      { label: "Input Shaping", href: "/guides/input-shaping-kalibrieren" },
      { label: "Temperaturturm", href: "/guides/temperaturturm-kalibrieren" },
      { label: "Speed Tower", href: "/guides/speed-tower-druckgeschwindigkeit" },
    ],
  },
  {
    title: "Slicer",
    items: [
      { label: "OrcaSlicer Guide", href: "/guides/guide-orcaslicer-einsteiger" },
      { label: "Cura Tipps", href: "/guides/guide-cura-tipps" },
      { label: "Bambu Studio", href: "/guides/guide-bambu-studio" },
      { label: "PrusaSlicer", href: "/guides/guide-prusaslicer" },
      { label: "Slicer-Profil optimieren", href: "/guides/slicer-profil-optimieren" },
    ],
  },
  {
    title: "Fortgeschritten",
    items: [
      { label: "Adaptive Layer Height", href: "/guides/adaptive-layer-height" },
      { label: "Modifier Meshes", href: "/guides/modifier-meshes-paint-on-supports" },
      { label: "Ironing", href: "/guides/ironing-top-oberflaechen" },
      { label: "Fuzzy Skin", href: "/guides/fuzzy-skin-strukturierte-oberflaechen" },
      { label: "Multi-Material / AMS", href: "/guides/multi-material-ams" },
      { label: "Klipper Grundlagen", href: "/guides/klipper-grundlagen-ersteinrichtung" },
    ],
  },
];

export const Sidebar = () => {
  const pathname = usePathname();

  return (
    <aside className="hidden lg:block w-64 shrink-0 border-r border-border bg-sidebar-bg overflow-y-auto h-[calc(100vh-4rem)] sticky top-16">
      <nav className="p-4 space-y-6">
        {sections.map((section) => (
          <div key={section.title}>
            <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
              {section.title}
            </h3>
            <ul className="space-y-0.5">
              {section.items.map((item) => {
                const isActive = pathname === item.href;
                return (
                  <li key={item.href}>
                    <Link
                      href={item.href}
                      className={`block px-3 py-1.5 rounded-md text-sm transition-colors relative ${
                        isActive
                          ? "bg-accent/10 text-accent font-medium"
                          : "text-muted-foreground hover:text-foreground hover:bg-surface-hover"
                      }`}
                    >
                      {isActive && (
                        <motion.div
                          layoutId="sidebar-active"
                          className="absolute left-0 top-0 bottom-0 w-0.5 bg-accent rounded-full"
                        />
                      )}
                      {item.label}
                    </Link>
                  </li>
                );
              })}
            </ul>
          </div>
        ))}
      </nav>
    </aside>
  );
};
