'use client';

import Link from 'next/link';
import Image from 'next/image';
import { useEffect, useRef, useState, type SVGProps } from 'react';
import { useI18n } from './I18nProvider';
import logo from '../../img/logo.png';

type SessionUser = { id: string; email: string; role: string; status: string };

function Icon({ name }: { name: string }) {
  const common: SVGProps<SVGSVGElement> = {
    width: 16,
    height: 16,
    stroke: 'currentColor',
    fill: 'none',
    strokeWidth: 1.6,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
  };
  switch (name) {
    case 'profile':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <circle cx="12" cy="8" r="4" />
          <path d="M5 20c0-3.3 3.1-6 7-6s7 2.7 7 6" />
        </svg>
      );
    case 'list':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <path d="M9 6h11" />
          <path d="M9 12h11" />
          <path d="M9 18h11" />
          <path d="M4 6h0.01" />
          <path d="M4 12h0.01" />
          <path d="M4 18h0.01" />
        </svg>
      );
    case 'plus':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <path d="M12 5v14" />
          <path d="M5 12h14" />
        </svg>
      );
    case 'logout':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <path d="M9 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3" />
          <path d="M16 17l5-5-5-5" />
          <path d="M21 12H9" />
        </svg>
      );
    case 'login':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <path d="M15 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" />
          <path d="M10 17l5-5-5-5" />
          <path d="M15 12H3" />
        </svg>
      );
    case 'users':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <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>
      );
    case 'check':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <path d="M20 6L9 17l-5-5" />
        </svg>
      );
    case 'globe':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <circle cx="12" cy="12" r="9" />
          <path d="M3 12h18" />
          <path d="M12 3a15.3 15.3 0 0 1 4 9 15.3 15.3 0 0 1-4 9 15.3 15.3 0 0 1-4-9 15.3 15.3 0 0 1 4-9z" />
        </svg>
      );
    case 'monitor':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <rect x="3" y="4" width="18" height="14" rx="2" ry="2" />
          <path d="M9 20h6" />
          <path d="M9 14l2-3 2 2 2-4" />
        </svg>
      );
    case 'admin':
      return (
        <svg {...common} viewBox="0 0 24 24" aria-hidden>
          <path d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4z" />
          <path d="M9.5 12.5l1.8 1.8 3.7-3.7" />
        </svg>
      );
    default:
      return null;
  }
}

export default function NavBar() {
  const { t, locale, setLocale } = useI18n();
  const [user, setUser] = useState<SessionUser | null>(null);
  const [pendingCount, setPendingCount] = useState<number>(0);
  const [adminMenuOpen, setAdminMenuOpen] = useState(false);
  const adminMenuRef = useRef<HTMLDivElement | null>(null);

  async function loadUser() {
    try {
      const res = await fetch('/api/auth/me', { cache: 'no-store' });
      const data = await res.json();
      if (data.user) setUser(data.user);
      else setUser(null);
    } catch (e) {
      setUser(null);
    }
  }

  useEffect(() => {
    loadUser();
  }, []);

  useEffect(() => {
    if (!user) setAdminMenuOpen(false);
  }, [user]);

  useEffect(() => {
    const role = user?.role;
    const canSeeApprovals = role === 'ADMIN' || role === 'LISTING_MODERATOR' || role === 'USER_MODERATOR';
    if (!canSeeApprovals) {
      setPendingCount(0);
      return;
    }
    fetch('/api/admin/pending/count', { cache: 'no-store' })
      .then((res) => res.json())
      .then((data) => {
        if (data && typeof data.total === 'number') setPendingCount(data.total);
      })
      .catch(() => setPendingCount(0));
  }, [user]);

  async function logout() {
    try {
      await fetch('/api/auth/logout', { method: 'POST' });
    } catch (e) {
      // ignore
    }
    setUser(null);
  }

  const isAdmin = user?.role === 'ADMIN';
  const isListingMod = user?.role === 'LISTING_MODERATOR';
  const isUserMod = user?.role === 'USER_MODERATOR';
  const showApprovals = Boolean(user && (isAdmin || isListingMod || isUserMod));
  const showAdminMenu = Boolean(user && (showApprovals || isAdmin));

  useEffect(() => {
    if (!adminMenuOpen) return;
    const onMouseDown = (e: MouseEvent) => {
      const target = e.target as Node | null;
      if (target && adminMenuRef.current && !adminMenuRef.current.contains(target)) {
        setAdminMenuOpen(false);
      }
    };
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setAdminMenuOpen(false);
    };
    document.addEventListener('mousedown', onMouseDown);
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('mousedown', onMouseDown);
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [adminMenuOpen]);

  return (
    <header style={{ padding: '12px 20px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        <Link href="/" className="brand">
          <Image src={logo} alt="Lomavuokraus.fi logo" width={34} height={48} priority style={{ width: 34, height: 'auto' }} />
          <span className="brand-text">{t('brand')}</span>
        </Link>
        <Link href="/listings" className="button secondary">
          <Icon name="list" /> {t('navBrowse')}
        </Link>
      </div>
      <nav style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {user ? (
          <>
            <span style={{ fontSize: 12, color: '#444', border: '1px solid #ddd', borderRadius: 12, padding: '4px 10px' }}>
              {user.email} · {user.role}
            </span>
            <Link href="/me" className="button secondary">
              <Icon name="profile" /> {t('navProfile')}
            </Link>
            <Link href="/listings/mine" className="button secondary">
              <Icon name="list" /> {t('navMyListings')}
            </Link>
            <Link href="/listings/new" className="button secondary">
              <Icon name="plus" /> {t('navNewListing')}
            </Link>
            {showAdminMenu ? (
              <div className="nav-admin" ref={adminMenuRef}>
                <button
                  type="button"
                  className="button secondary"
                  aria-haspopup="menu"
                  aria-expanded={adminMenuOpen}
                  onClick={() => setAdminMenuOpen((v) => !v)}
                >
                  <Icon name="admin" /> {t('navAdmin')}
                  {showApprovals && pendingCount > 0 ? (
                    <span className="nav-admin-badge" aria-label={t('approvalsPending', { count: pendingCount })}>
                      {t('approvalsBadge', { count: pendingCount })}
                    </span>
                  ) : null}
                </button>
                {adminMenuOpen ? (
                  <div className="nav-admin-menu" role="menu" aria-label={t('navAdmin')}>
                    {showApprovals ? (
                      <Link href="/admin/pending" className="nav-admin-item button secondary" role="menuitem" onClick={() => setAdminMenuOpen(false)}>
                        <Icon name="check" /> {t('navApprovals')}
                        {pendingCount > 0 ? (
                          <span className="nav-admin-badge" aria-label={t('approvalsPending', { count: pendingCount })}>
                            {t('approvalsBadge', { count: pendingCount })}
                          </span>
                        ) : null}
                      </Link>
                    ) : null}
                    {isAdmin ? (
                      <Link href="/admin/users" className="nav-admin-item button secondary" role="menuitem" onClick={() => setAdminMenuOpen(false)}>
                        <Icon name="users" /> {t('navUsers')}
                      </Link>
                    ) : null}
                    {isAdmin ? (
                      <Link href="/admin/monitor" className="nav-admin-item button secondary" role="menuitem" onClick={() => setAdminMenuOpen(false)}>
                        <Icon name="monitor" /> {t('navMonitoring')}
                      </Link>
                    ) : null}
                  </div>
                ) : null}
              </div>
            ) : null}
            <button className="button secondary" onClick={logout}>
              <Icon name="logout" /> {t('navLogout')}
            </button>
          </>
        ) : (
          <>
            <Link href="/auth/login" className="button secondary">
              <Icon name="login" /> {t('navLogin')}
            </Link>
            <Link href="/auth/register" className="button">
              <Icon name="plus" /> {t('navSignup')}
            </Link>
          </>
        )}
        <label className="language-wrapper">
          <select
            aria-label={t('navLanguage')}
            value={locale}
            onChange={(e) => setLocale(e.target.value as any)}
            className="language-select"
          >
            <option value="fi">🇫🇮 Suomi</option>
            <option value="sv">🇸🇪 Svenska</option>
            <option value="en">🇬🇧 English</option>
          </select>
        </label>
      </nav>
    </header>
  );
}