'use client'

import { useState } from 'react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'
{{#IF_DESIGN_FRAMER_MOTION}}
import { motion, AnimatePresence } from 'framer-motion'
{{/IF_DESIGN_FRAMER_MOTION}}

/**
 * Sidebar — Collapsible navigation
 * Generated by Traqr Init ({{DESIGN_FLAVOR}} flavor). Edit freely.
 *
 * TODO: Replace placeholder nav items with your actual routes.
 */

interface NavItem {
  label: string
  href: string
  icon?: React.ReactNode
}

interface NavSection {
  title: string
  items: NavItem[]
}

// TODO: Replace with your actual navigation structure
const navSections: NavSection[] = [
  {
    title: 'Main',
    items: [
      { label: 'Dashboard', href: '/' },
      { label: 'Settings', href: '/settings' },
    ],
  },
  // TODO: Add more sections as needed
]

interface SidebarProps {
  onClose?: () => void
}

export function Sidebar({ onClose }: SidebarProps) {
  const pathname = usePathname()
  const [expandedSections, setExpandedSections] = useState<Set<string>>(
    new Set(navSections.map((s) => s.title))
  )

  function toggleSection(title: string) {
    setExpandedSections((prev) => {
      const next = new Set(prev)
      if (next.has(title)) {
        next.delete(title)
      } else {
        next.add(title)
      }
      return next
    })
  }

  return (
    <aside className="flex h-full w-64 flex-col border-r border-design-border bg-design-card">
      {/* Header */}
      <div className="flex h-14 items-center justify-between border-b border-design-border px-4">
        <Link href="/" className="text-lg font-bold text-design-primary design-transition hover:opacity-80">
          {{DESIGN_APP_DISPLAY_NAME}}
        </Link>
        {onClose && (
          <button
            onClick={onClose}
            className="text-design-muted hover:text-design-fg design-transition lg:hidden"
            aria-label="Close sidebar"
          >
            <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        )}
      </div>

      {/* Navigation */}
      <nav className="flex-1 overflow-y-auto p-3">
        {navSections.map((section) => {
          const isExpanded = expandedSections.has(section.title)
          return (
            <div key={section.title} className="mb-2">
              <button
                onClick={() => toggleSection(section.title)}
                className="flex w-full items-center justify-between px-2 py-1.5 text-xs font-semibold uppercase tracking-wider text-design-muted hover:text-design-fg design-transition"
              >
                {section.title}
                <svg
                  className={`h-3.5 w-3.5 design-transition ${isExpanded ? 'rotate-0' : '-rotate-90'}`}
                  fill="none"
                  viewBox="0 0 24 24"
                  strokeWidth={2}
                  stroke="currentColor"
                >
                  <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
              </button>

{{#IF_DESIGN_FRAMER_MOTION}}
              <AnimatePresence initial={false}>
                {isExpanded && (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: 'auto', opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ type: 'spring', stiffness: {{DESIGN_SPRING_STIFFNESS}}, damping: {{DESIGN_SPRING_DAMPING}} }}
                    className="overflow-hidden"
                  >
                    <div className="mt-1 space-y-0.5">
                      {section.items.map((item) => {
                        const isActive = pathname === item.href
                        return (
                          <Link
                            key={item.href}
                            href={item.href}
                            onClick={onClose}
                            className={`flex items-center gap-2 {{DESIGN_RADIUS_MD}} px-3 py-2 text-sm design-transition ${
                              isActive
                                ? 'bg-design-primary/10 text-design-primary font-medium'
                                : 'text-design-muted hover:bg-design-border/50 hover:text-design-fg'
                            }`}
                          >
                            {item.icon}
                            {item.label}
                          </Link>
                        )
                      })}
                    </div>
                  </motion.div>
                )}
              </AnimatePresence>
{{/IF_DESIGN_FRAMER_MOTION}}

              {isExpanded && (
                <div className="mt-1 space-y-0.5">
                  {section.items.map((item) => {
                    const isActive = pathname === item.href
                    return (
                      <Link
                        key={item.href}
                        href={item.href}
                        onClick={onClose}
                        className={`flex items-center gap-2 {{DESIGN_RADIUS_MD}} px-3 py-2 text-sm design-transition ${
                          isActive
                            ? 'bg-design-primary/10 text-design-primary font-medium'
                            : 'text-design-muted hover:bg-design-border/50 hover:text-design-fg'
                        }`}
                      >
                        {item.icon}
                        {item.label}
                      </Link>
                    )
                  })}
                </div>
              )}
            </div>
          )
        })}
      </nav>

      {/* Footer / User area */}
      <div className="border-t border-design-border p-3">
        {/* TODO: Add user profile, sign out, theme toggle here */}
        <div className="flex items-center gap-2 {{DESIGN_RADIUS_MD}} px-3 py-2 text-sm text-design-muted">
          <div className="h-8 w-8 {{DESIGN_RADIUS_MD}} bg-design-primary/20 flex items-center justify-center text-design-primary font-medium">
            U
          </div>
          <span>User</span>
        </div>
      </div>
    </aside>
  )
}