apps/web/src/components/layout/AcenteSidebar.tsx

'use client';

import { ArrowLeftCircle, BarChart3, FileSignature, Megaphone, MessageSquare } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';

import { ACENTE_SESSION_EVENT, getCurrentAgency } from '@/lib/acente-session';
import { cn } from '@/lib/utils';

const ITEMS = [
  { title: 'Performansım', href: '/acente', icon: BarChart3 },
  { title: 'Sözleşmelerim', href: '/acente/sozlesmeler', icon: FileSignature },
  { title: 'Duyurular', href: '/acente/duyurular', icon: Megaphone },
  { title: 'Geri Bildirim', href: '/acente/geri-bildirim', icon: MessageSquare },
];

export function AcenteSidebar() {
  const pathname = usePathname();
  const [agency, setAgency] = useState(() => getCurrentAgency());

  useEffect(() => {
    function sync() {
      setAgency(getCurrentAgency());
    }
    sync();
    window.addEventListener(ACENTE_SESSION_EVENT, sync);
    window.addEventListener('storage', sync);
    return () => {
      window.removeEventListener(ACENTE_SESSION_EVENT, sync);
      window.removeEventListener('storage', sync);
    };
  }, []);

  const initials = agency.name
    .split(' ')
    .map((p) => p[0])
    .slice(0, 2)
    .join('')
    .toUpperCase();

  return (
    <aside className="ajet-sidebar ajet-sidebar-desktop">
      <div className="ajet-sidebar-head">
        <div className="ajet-sidebar-logo" aria-hidden="true">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/brand/ajet-mark-white.png" alt="" />
        </div>
        <div className="ajet-sidebar-wordmark">
          AJet <span>Acente</span>
        </div>
      </div>

      {/* Agency identity card */}
      <div
        style={{
          margin: '14px 14px 8px',
          padding: '14px 14px',
          background: 'linear-gradient(135deg, rgba(176,239,67,0.10), rgba(0,129,226,0.05))',
          borderRadius: 14,
          border: '1px solid rgba(176,239,67,0.18)',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div
            style={{
              width: 38,
              height: 38,
              borderRadius: 10,
              background: '#B0EF43',
              color: '#00122A',
              display: 'grid',
              placeItems: 'center',
              fontWeight: 900,
              fontSize: 13,
              flexShrink: 0,
            }}
          >
            {initials}
          </div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div
              style={{
                color: '#fff',
                fontSize: 13,
                fontWeight: 800,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
              title={agency.name}
            >
              {agency.name}
            </div>
            <div style={{ color: 'rgba(255,255,255,0.55)', fontSize: 11, fontWeight: 600 }}>
              {agency.code} · {agency.city}
            </div>
          </div>
        </div>
        <div style={{ marginTop: 10, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          <span
            style={{
              fontSize: 10,
              fontWeight: 700,
              padding: '3px 8px',
              borderRadius: 999,
              background: 'rgba(176,239,67,0.2)',
              color: '#B0EF43',
              letterSpacing: '0.04em',
            }}
          >
            {agency.category}
          </span>
          <span
            style={{
              fontSize: 10,
              fontWeight: 700,
              padding: '3px 8px',
              borderRadius: 999,
              background: 'rgba(255,255,255,0.10)',
              color: '#fff',
            }}
          >
            Skor {agency.score}
          </span>
        </div>
      </div>

      <nav className="ajet-sidebar-nav">
        <div className="ajet-sidebar-section">Acente Portalı</div>
        {ITEMS.map((item) => {
          const Icon = item.icon;
          const active =
            pathname === item.href ||
            (item.href !== '/acente' && pathname.startsWith(item.href));
          return (
            <Link
              key={item.href}
              href={item.href}
              className={cn('ajet-nav-item', active && 'active')}
            >
              <Icon className="h-[16px] w-[16px] flex-shrink-0" />
              {item.title}
            </Link>
          );
        })}
      </nav>

      <div className="ajet-sidebar-foot">
        <Link
          href="/"
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: 10,
            padding: '8px 10px',
            borderRadius: 10,
            color: 'rgba(255,255,255,0.7)',
            textDecoration: 'none',
            fontSize: 12,
            fontWeight: 600,
            transition: 'background 120ms ease',
          }}
          onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,0.06)')}
          onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
        >
          <ArrowLeftCircle size={14} />
          AJet Yönetim Paneli
        </Link>
        <div style={{ marginTop: 8, fontSize: 10, color: 'rgba(255,255,255,0.4)', padding: '0 10px' }}>
          AJet Acente Portalı v1
        </div>
      </div>
    </aside>
  );
}