import { Link, useLocation } from 'react-router-dom'
import { useI18n } from '../../i18n/useI18n'
import { useAuth } from '../../hooks/useAuth'

interface SidebarProps {
  projectId?: string
}

export function Sidebar({ projectId }: SidebarProps) {
  const { t } = useI18n()
  const { user } = useAuth()
  const location = useLocation()

  const isActive = (path: string) => location.pathname === path || location.pathname.startsWith(path + '/')

  return (
    <nav className="sidebar">
      <Link to="/dashboard" className="sidebar-brand">
        <span className="brand-icon">R</span>
        <span className="brand-text">
          TheRoad
          <small>Scene Lab</small>
        </span>
      </Link>

      <div className="sidebar-nav">
        {!projectId ? (
          <>
            <Link
              to="/dashboard"
              className={`nav-item${isActive('/dashboard') ? ' active' : ''}`}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="7" height="7" />
                <rect x="14" y="3" width="7" height="7" />
                <rect x="3" y="14" width="7" height="7" />
                <rect x="14" y="14" width="7" height="7" />
              </svg>
              {t('nav.dashboard')}
            </Link>

            {user?.role === 'admin' && (
              <>
                <div className="nav-section-label">{t('nav.admin')}</div>
                <Link
                  to="/admin/users"
                  className={`nav-item${isActive('/admin/users') ? ' active' : ''}`}
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                    <circle cx="9" cy="7" r="4" />
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                  </svg>
                  {t('nav.users')}
                </Link>
                <Link
                  to="/admin/activity"
                  className={`nav-item${isActive('/admin/activity') ? ' active' : ''}`}
                >
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
                  </svg>
                  {t('nav.activity')}
                </Link>
              </>
            )}
          </>
        ) : (
          <>
            <Link
              to={`/projects/${projectId}`}
              className={`nav-item${location.pathname === `/projects/${projectId}` ? ' active' : ''}`}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10" />
                <line x1="12" y1="8" x2="12" y2="12" />
                <line x1="12" y1="16" x2="12.01" y2="16" />
              </svg>
              {t('nav.project.overview')}
            </Link>
            <Link
              to={`/projects/${projectId}/members`}
              className={`nav-item${isActive(`/projects/${projectId}/members`) ? ' active' : ''}`}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                <circle cx="9" cy="7" r="4" />
                <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                <path d="M16 3.13a4 4 0 0 1 0 7.75" />
              </svg>
              {t('nav.project.members')}
            </Link>
            <Link
              to={`/projects/${projectId}/activity`}
              className={`nav-item${isActive(`/projects/${projectId}/activity`) ? ' active' : ''}`}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
              </svg>
              {t('nav.project.activity')}
            </Link>
            <Link
              to={`/projects/${projectId}/episodes`}
              className={`nav-item${isActive(`/projects/${projectId}/episodes`) ? ' active' : ''}`}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                <polyline points="14 2 14 8 20 8" />
              </svg>
              {t('nav.project.episodes')}
            </Link>
            <Link
              to={`/projects/${projectId}/entities`}
              className={`nav-item${isActive(`/projects/${projectId}/entities`) ? ' active' : ''}`}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="3" />
                <path d="M19.07 4.93a10 10 0 0 1 0 14.14" />
                <path d="M4.93 4.93a10 10 0 0 0 0 14.14" />
              </svg>
              {t('nav.project.entities')}
            </Link>
            <Link
              to={`/projects/${projectId}/images`}
              className={`nav-item${isActive(`/projects/${projectId}/images`) ? ' active' : ''}`}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
                <circle cx="8.5" cy="8.5" r="1.5" />
                <polyline points="21 15 16 10 5 21" />
              </svg>
              {t('nav.project.images')}
            </Link>
            <Link
              to={`/projects/${projectId}/export`}
              className={`nav-item${isActive(`/projects/${projectId}/export`) ? ' active' : ''}`}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                <polyline points="7 10 12 15 17 10" />
                <line x1="12" y1="15" x2="12" y2="3" />
              </svg>
              {t('nav.project.export')}
            </Link>
          </>
        )}
      </div>

      <div className="sidebar-footer">
        <span className="version-tag">TheRoad Scene Lab v0.1</span>
      </div>
    </nav>
  )
}