'use client';

import { useCallback, useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { TesseraLogo } from '@/components/brand/tessera-logo';
import { useSidebarStore } from '@/lib/stores/sidebar-store';
import { useMarketplaceStore } from '@/lib/stores/marketplace-store';
import { SidebarSearch } from '@/components/layout/sidebar-search';
import { AppVersionBadge } from '@/components/layout/app-version-badge';

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';

interface SidebarModule {
  id: string;
  slug: string;
  name: string;
  category: string;
}

export function Sidebar() {
  const t = useTranslations('sidebar');
  const tCommon = useTranslations('common');
  const { isCollapsed, isMobileOpen, toggle, setMobileOpen } = useSidebarStore();
  const [activeModules, setActiveModules] = useState<SidebarModule[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
  const [openCategories, setOpenCategories] = useState<Set<string>>(new Set());
  const pathname = usePathname();
  const sidebarRefreshKey = useMarketplaceStore((s) => s.sidebarRefreshKey);

  const isActive = (href: string) => {
    if (href === '/') return pathname === '/';
    return pathname.startsWith(href);
  };

  const linkClass = (href: string) =>
    `flex items-center gap-3 rounded-md px-2 py-2 text-sm transition-colors ${
      isActive(href)
        ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
        : 'text-sidebar-foreground hover:bg-muted'
    }`;

  const fetchActiveModules = useCallback(async () => {
    try {
      const res = await fetch(`${API_URL}/modules/active`, {
        credentials: 'include',
      });
      if (res.ok) {
        setActiveModules(await res.json());
      }
    } catch {
      // silently fail
    }
  }, []);

  // Befund 17 (quick-260921-gof): sidebarRefreshKey ist der Auffrisch-
  // Ausloeser aus dem Marketplace-Speicher — ohne ihn erscheint ein frisch
  // aktiviertes Modul in der Seitenleiste erst nach einem Neuladen der
  // Seite, die Navigation liefe also dem Berechtigungsstand hinterher.
  // biome-ignore lint/correctness/useExhaustiveDependencies: sidebarRefreshKey ist der Auffrisch-Ausloeser aus dem Marketplace-Speicher - ohne ihn liefe die Navigation dem Berechtigungsstand hinterher.
  useEffect(() => {
    fetchActiveModules();
  }, [fetchActiveModules, sidebarRefreshKey]);

  const toggleCategory = (cat: string) => {
    setOpenCategories((prev) => {
      const next = new Set(prev);
      if (next.has(cat)) next.delete(cat);
      else next.add(cat);
      return next;
    });
  };

  const filteredCategories = useMemo(() => {
    const categories = new Map<string, SidebarModule[]>();
    for (const mod of activeModules) {
      const cat = mod.category || 'other';
      if (!categories.has(cat)) categories.set(cat, []);
      categories.get(cat)!.push(mod);
    }

    if (!searchQuery) return Array.from(categories.entries());

    const q = searchQuery.toLowerCase();
    const result: [string, SidebarModule[]][] = [];
    for (const [cat, mods] of categories.entries()) {
      if (cat.toLowerCase().includes(q)) {
        result.push([cat, mods]);
      } else {
        const filtered = mods.filter((m) => m.name.toLowerCase().includes(q));
        if (filtered.length > 0) result.push([cat, filtered]);
      }
    }
    return result;
  }, [activeModules, searchQuery]);

  const sidebarContent = (
    <div className="flex h-full flex-col bg-sidebar">
      <nav className="flex-1 overflow-y-auto p-3">
        <ul className="flex flex-col gap-1">
          <li>
            <Link href="/" className={linkClass('/')} aria-label={t('dashboard')}>
              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
                <rect x="3" y="3" width="7" height="7" />
                <rect x="14" y="3" width="7" height="7" />
                <rect x="14" y="14" width="7" height="7" />
                <rect x="3" y="14" width="7" height="7" />
              </svg>
              {!isCollapsed && <span className="truncate">{t('dashboard')}</span>}
            </Link>
          </li>
          <li>
            <Link href="/marketplace" className={linkClass('/marketplace')} aria-label={t('marketplace')}>
              <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
                <circle cx="9" cy="21" r="1" />
                <circle cx="20" cy="21" r="1" />
                <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
              </svg>
              {!isCollapsed && <span className="truncate">{t('marketplace')}</span>}
            </Link>
          </li>
        </ul>

        {!isCollapsed && (
          <>
            <div className="mt-4">
              <SidebarSearch value={searchQuery} onChange={setSearchQuery} />
            </div>

            <div className="mt-2">
              <div className="px-2 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                {t('categories.label')}
              </div>
              <div className="mt-1">
                {activeModules.length === 0 ? (
                  <div className="px-2 py-2 text-sm text-muted-foreground">
                    {t('categories.empty')}
                  </div>
                ) : filteredCategories.length === 0 ? (
                  <div className="px-2 py-2 text-sm text-muted-foreground">
                    {t('noResults')}
                  </div>
                ) : (
                  <ul className="flex flex-col gap-1">
                    {filteredCategories.map(([category, mods]) => (
                      <li key={category}>
                        <button
                          type="button"
                          onClick={() => toggleCategory(category)}
                          className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs font-medium transition-colors ${
                            isActive(`/modules/${category}`)
                              ? 'bg-sidebar-accent text-sidebar-accent-foreground'
                              : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                          }`}
                        >
                          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
                            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
                          </svg>
                          <span className="capitalize">{category.replace(/-/g, ' ')}</span>
                          <span className="ml-auto flex items-center gap-1.5">
                            <span className="text-[10px] text-muted-foreground/60">{mods.length}</span>
                            <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${openCategories.has(category) ? 'rotate-180' : ''}`}>
                              <polyline points="6 9 12 15 18 9" />
                            </svg>
                          </span>
                        </button>
                        {openCategories.has(category) && (
                          <ul className="ml-5 flex flex-col gap-0.5">
                            {mods.map((mod) => (
                              <li key={mod.id}>
                                <Link
                                  href={`/modules/${category}/${mod.slug}`}
                                  className={`block rounded-md px-2 py-1 text-xs transition-colors ${
                                    isActive(`/modules/${category}/${mod.slug}`)
                                      ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
                                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                                  }`}
                                >
                                  {mod.name}
                                </Link>
                              </li>
                            ))}
                          </ul>
                        )}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>
          </>
        )}
      </nav>

      <div className="hidden md:block border-t border-sidebar-border p-2">
        <button
          type="button"
          onClick={toggle}
          className="flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-sm text-sidebar-foreground hover:bg-muted transition-colors"
          aria-label={isCollapsed ? t('expand') : t('collapse')}
        >
          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`shrink-0 transition-transform duration-200 ${isCollapsed ? 'rotate-180' : ''}`}>
            <polyline points="15 18 9 12 15 6" />
          </svg>
          {!isCollapsed && <span className="truncate">{t('collapse')}</span>}
        </button>
      </div>

      {/* Versionszeile (quick-260914-ku1): bewusst ohne `hidden md:block`, damit
          auch die mobile Schublade sie zeigt; eingeklappt nichts (Muster oben). */}
      {!isCollapsed && (
        <div className="border-t border-sidebar-border px-4 py-2">
          <AppVersionBadge />
        </div>
      )}
    </div>
  );

  return (
    <>
      <aside
        className="fixed left-0 top-[var(--header-height)] z-30 hidden h-[calc(100vh-var(--header-height))] border-r border-sidebar-border transition-all duration-200 md:block"
        style={{
          width: isCollapsed
            ? 'var(--sidebar-width-collapsed)'
            : 'var(--sidebar-width)',
        }}
      >
        {sidebarContent}
      </aside>

      {isMobileOpen && (
        <div className="fixed inset-0 z-40 md:hidden">
          <div
            className="fixed inset-0 bg-black/50"
            onClick={() => setMobileOpen(false)}
            aria-hidden="true"
          />
          <aside className="fixed left-0 top-0 z-50 h-full w-[var(--sidebar-width)] bg-sidebar shadow-lg">
            <div className="flex h-[var(--header-height)] items-center justify-between border-b border-sidebar-border px-4">
              <TesseraLogo
                      variant="horizontal"
                      size={28}
                      // Gelb traegt nur auf dunklem Grund: gemessen 13,1:1 im dunklen
                      // Erscheinungsbild gegen 1,26:1 im hellen (WCAG verlangt 3:1 fuer
                      // grossen fetten Text). Im hellen Modus erbt der Schriftzug daher
                      // die Vordergrundfarbe, im dunklen steht die Markenfarbe.
                      wordmarkClassName="dark:text-primary"
                    />
              <button
                type="button"
                onClick={() => setMobileOpen(false)}
                aria-label={tCommon('close')}
                className="rounded-md p-2 text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
              >
                <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <line x1="18" y1="6" x2="6" y2="18" />
                  <line x1="6" y1="6" x2="18" y2="18" />
                </svg>
              </button>
            </div>
            {sidebarContent}
          </aside>
        </div>
      )}
    </>
  );
}