import React, { useState, useEffect } from 'react';
import clsx from 'clsx';
import { NavLink, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useUIStore } from '@/store/uiStore';

interface NavLeaf {
  to: string;
  labelKey: string;
}

interface NavTreeItem {
  labelKey: string;
  icon: React.ReactNode;
  children: NavLeaf[];
}

interface NavSingleItem {
  to: string;
  labelKey: string;
  icon: React.ReactNode;
}

const navIcon = (path: string) => (
  <svg className="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={path} />
  </svg>
);

const chevronIcon = (expanded: boolean) => (
  <svg
    className={clsx('w-4 h-4 flex-shrink-0 transition-transform duration-200', expanded ? 'rotate-90' : '')}
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
    aria-hidden="true"
  >
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
  </svg>
);

const singleItems: NavSingleItem[] = [
  { to: '/dashboard', labelKey: 'nav.dashboard', icon: navIcon('M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6') },
  { to: '/contacts', labelKey: 'nav.contacts', icon: navIcon('M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6-3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z') },
];

const treeItems: NavTreeItem[] = [
  {
    labelKey: 'nav.calendar',
    icon: navIcon('M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'),
    children: [
      { to: '/calendar', labelKey: 'nav.calendar' },
      { to: '/calendar/kanban', labelKey: 'nav.calendarKanban' },
    ],
  },
  {
    labelKey: 'nav.files',
    icon: navIcon('M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'),
    children: [
      { to: '/dms', labelKey: 'nav.files' },
      { to: '/dms/trash', labelKey: 'nav.filesTrash' },
    ],
  },
  {
    labelKey: 'nav.email',
    icon: navIcon('M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'),
    children: [
      { to: '/mail', labelKey: 'nav.email' },
      { to: '/mail/settings', labelKey: 'nav.emailSettings' },
    ],
  },
];

const bottomItems: NavSingleItem[] = [
  { to: '/ai-assistant', labelKey: 'nav.aiAssistant', icon: navIcon('M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z') },
];

export function Sidebar() {
  const { t } = useTranslation();
  const { sidebarOpen, setSidebarOpen } = useUIStore();
  const location = useLocation();

  const initialExpanded = treeItems
    .filter((item) => item.children.some((child) => location.pathname.startsWith(child.to)))
    .map((item) => item.labelKey);
  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set(initialExpanded));

  useEffect(() => {
    setExpandedItems((prev) => {
      const next = new Set(prev);
      treeItems.forEach((item) => {
        const isActive = item.children.some((child) => location.pathname.startsWith(child.to));
        if (isActive) next.add(item.labelKey);
      });
      return next;
    });
  }, [location.pathname]);

  const toggleExpand = (labelKey: string) => {
    setExpandedItems((prev) => {
      const next = new Set(prev);
      if (next.has(labelKey)) next.delete(labelKey);
      else next.add(labelKey);
      return next;
    });
  };

  const isChildActive = (children: NavLeaf[]) =>
    children.some((child) => location.pathname.startsWith(child.to));

  return (
    <>
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-secondary-900/50 z-30 md:hidden"
          onClick={() => setSidebarOpen(false)}
          aria-hidden="true"
          data-testid="sidebar-overlay"
        />
      )}
      <aside
        className={clsx(
          'fixed md:static inset-y-0 left-0 z-40 w-56 bg-secondary-900 text-secondary-300',
          'flex flex-col transition-transform motion-safe:duration-300',
          sidebarOpen ? 'translate-x-0' : '-translate-x-full md:hidden'
        )}
        aria-label="Seitenleiste Navigation"
        data-testid="sidebar"
      >
        <div className="h-[58px] flex items-center px-4 border-b border-secondary-700">
          <span className="text-xl font-bold text-white">leocrm</span>
        </div>
        <nav className="flex-1 overflow-y-auto py-4" aria-label="Hauptnavigation">
          <ul className="space-y-1 px-2">
            {singleItems.map((item) => (
              <li key={item.to}>
                <NavLink
                  to={item.to}
                  className={({ isActive }) =>
                    clsx(
                      'flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                      'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                      isActive
                        ? 'bg-primary-600 text-white'
                        : 'hover:bg-secondary-800 hover:text-white'
                    )
                  }
                  aria-label={t(item.labelKey)}
                >
                  {item.icon}
                  <span className="truncate">{t(item.labelKey)}</span>
                </NavLink>
              </li>
            ))}

            {treeItems.map((item) => {
              const expanded = expandedItems.has(item.labelKey);
              const childActive = isChildActive(item.children);
              return (
                <li key={item.labelKey}>
                  <div
                    className={clsx(
                      'flex items-center gap-2 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                      'motion-safe:transition-colors cursor-pointer select-none',
                      childActive
                        ? 'text-white'
                        : 'text-secondary-300 hover:bg-secondary-800 hover:text-white'
                    )}
                    onClick={() => toggleExpand(item.labelKey)}
                    role="button"
                    tabIndex={0}
                    aria-expanded={expanded}
                    aria-label={t(item.labelKey)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter' || e.key === ' ') {
                        e.preventDefault();
                        toggleExpand(item.labelKey);
                      }
                    }}
                  >
                    {item.icon}
                    <span className="flex-1 truncate">{t(item.labelKey)}</span>
                    {chevronIcon(expanded)}
                  </div>
                  {expanded && (
                    <ul className="mt-1 ml-4 space-y-1 border-l border-secondary-700 pl-2" role="group">
                      {item.children.map((child) => (
                        <li key={child.to}>
                          <NavLink
                            to={child.to}
                            className={({ isActive }) =>
                              clsx(
                                'flex items-center gap-2 px-3 py-2 rounded-md text-sm min-h-touch',
                                'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                                isActive
                                  ? 'bg-primary-600 text-white font-medium'
                                  : 'text-secondary-400 hover:bg-secondary-800 hover:text-white'
                              )
                            }
                            aria-label={t(child.labelKey)}
                          >
                            <span className="truncate">{t(child.labelKey)}</span>
                          </NavLink>
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              );
            })}

            {bottomItems.map((item) => (
              <li key={item.to}>
                <NavLink
                  to={item.to}
                  className={({ isActive }) =>
                    clsx(
                      'flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch',
                      'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
                      isActive
                        ? 'bg-primary-600 text-white'
                        : 'hover:bg-secondary-800 hover:text-white'
                    )
                  }
                  aria-label={t(item.labelKey)}
                >
                  {item.icon}
                  <span className="truncate">{t(item.labelKey)}</span>
                </NavLink>
              </li>
            ))}
          </ul>
        </nav>
      </aside>
    </>
  );
}