import { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useAuth } from '../context/AuthContext'
import { motion } from 'motion/react'
import { 
  IconTicket, 
  IconDeviceDesktop, 
  IconChartBar, 
  IconCalendar, 
  IconFolders, 
  IconFileText, 
  IconBook, 
  IconSettings,
  IconLogout
} from '@tabler/icons-react'
import { Sidebar, SidebarBody, SidebarLink } from './ModernSidebar'

export default function Navbar() {
  const { user, logout, isAdmin } = useAuth()
  const navigate = useNavigate()
  const [open, setOpen] = useState(false)

  const handleLogout = async () => {
    await logout()
    navigate('/login')
  }

  const links = [
    {
      label: 'Tickets',
      href: '/tickets',
      icon: <IconTicket className="icon" />,
    },
    {
      label: 'Assets',
      href: '/assets',
      icon: <IconDeviceDesktop className="icon" />,
    },
    {
      label: 'Dashboard',
      href: '/dashboard',
      icon: <IconChartBar className="icon" />,
    },
    {
      label: 'Planboard',
      href: '/planboard',
      icon: <IconCalendar className="icon" />,
    },
    {
      label: 'Projects',
      href: '/projects',
      icon: <IconFolders className="icon" />,
    },
    {
      label: 'Reports',
      href: '/reports',
      icon: <IconFileText className="icon" />,
    },
    {
      label: 'Docs',
      href: '/docs',
      icon: <IconBook className="icon" />,
    },
  ]

  // Admin link nur wenn isAdmin
  if (isAdmin) {
    links.push({
      label: 'Admin',
      href: '/admin',
      icon: <IconSettings className="icon" />,
    })
  }

  return (
    <Sidebar open={open} setOpen={setOpen}>
      <SidebarBody className="justify-between gap-10">
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflowX: 'hidden', overflowY: 'auto' }}>
          <Logo />
          <div style={{ marginTop: '2rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
            {links.map((link, idx) => (
              <SidebarLink key={idx} link={link} />
            ))}
          </div>
        </div>
        <div>
          {user ? (
            <>
              <SidebarLink
                link={{
                  label: user.name || user.email,
                  href: '#',
                  icon: (
                    <div style={{
                      height: '28px',
                      width: '28px',
                      borderRadius: '50%',
                      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: 'white',
                      fontSize: '12px',
                      fontWeight: 'bold',
                      flexShrink: 0
                    }}>
                      {(user.name || user.email).charAt(0).toUpperCase()}
                    </div>
                  ),
                }}
              />
              <div onClick={handleLogout} style={{ cursor: 'pointer', marginTop: '0.5rem' }}>
                <SidebarLink
                  link={{
                    label: 'Logout',
                    href: '#',
                    icon: <IconLogout className="icon" />,
                  }}
                />
              </div>
            </>
          ) : (
            <SidebarLink
              link={{
                label: 'Login',
                href: '/login',
                icon: <IconLogout className="icon" />,
              }}
            />
          )}
        </div>
      </SidebarBody>
    </Sidebar>
  )
}

const Logo = () => {
  return (
    <Link
      to="/"
      style={{
        position: 'relative',
        zIndex: 20,
        display: 'flex',
        alignItems: 'center',
        gap: '0.5rem',
        padding: '0.25rem 0',
        fontSize: '0.875rem',
        fontWeight: 'normal',
        color: 'var(--text-color, #333)',
        textDecoration: 'none'
      }}
    >
      <div style={{
        height: '20px',
        width: '24px',
        flexShrink: 0,
        borderRadius: '4px 2px 4px 2px',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
      }} />
      <motion.span
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        style={{
          fontWeight: 500,
          whiteSpace: 'pre',
          color: 'var(--text-color, #333)'
        }}
      >
        Webklar
      </motion.span>
    </Link>
  )
}
