'use client';
import { useSearchParams } from 'next/navigation';
import { Icon } from '@/lib/icons';
import { useGo, type RouteName } from '@/lib/router';
import { useAuth } from './AuthProvider';
import { NotificationsBell } from './NotificationsBell';

export function Logo({ h = 24, onClick }: { h?: number; onClick?: () => void }) {
  return (
    <img
      className="nav-logo"
      src="/assets/darsouk-logo.png"
      alt="Darsouk"
      style={{ height: h }}
      onClick={onClick}
    />
  );
}

export function Nav() {
  const { route, go } = useGo();
  const { user } = useAuth();
  const on = (n: string) => (route.name === n ? 'on' : '');
  const initial = (user?.first || user?.email || '?').charAt(0).toUpperCase();
  return (
    <div className="nav">
      <div className="nav-in">
        <button className="nav-burger" onClick={() => go('search')}><Icon name="menu" size={20} /></button>
        <Logo onClick={() => go('home')} />
        <div className="nav-links">
          <a className={on('search')} onClick={() => go('search')}>Explorer</a>
          <a className={on('annonces')} onClick={() => go('annonces')}>Annonces</a>
          <a className={on('category')} onClick={() => go('category', { cat: 'restaurants' })}>Catégories</a>
          <a className={on('villes')} onClick={() => go('villes')}>Villes</a>
        </div>
        <div className="nav-right">
          <span className="nav-pro" onClick={() => go('pro')}><Icon name="store" size={17} stroke={1.8} />Pour les pros</span>
          <span className="nav-pro" onClick={() => go('compte', { tab: 'messages' })}><Icon name="message" size={17} stroke={1.8} />Messages</span>
          {user && <NotificationsBell />}
          {user ? (
            <span
              className="nav-cta-text row gap8"
              style={{ fontWeight: 600, fontSize: 14, cursor: 'pointer' }}
              onClick={() => go('compte', { tab: 'annonces' })}
            >
              {user.avatar ? (
                // eslint-disable-next-line @next/next/no-img-element
                <img src={user.avatar} alt="" style={{ width: 28, height: 28, borderRadius: 999, objectFit: 'cover' }} />
              ) : (
                <span className="avatar" style={{ background: 'var(--red)', width: 28, height: 28, fontSize: 12 }}>{initial}</span>
              )}
              {user.first || 'Mon compte'}
            </span>
          ) : (
            <>
              <span
                className="nav-cta-text"
                style={{ fontWeight: 600, fontSize: 14, cursor: 'pointer' }}
                onClick={() => go('auth', { mode: 'login' })}
              >
                Connexion
              </span>
              <button className="btn btn-red btn-sm" onClick={() => go('auth', { mode: 'signup' })}>Inscription</button>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export function Tabbar() {
  const { route, go } = useGo();
  const sp = useSearchParams();
  const tab = sp?.get('tab');
  const onCompte = route.name === 'compte';
  const isMsg = onCompte && tab === 'messages';
  const items: Array<[string, string, string, boolean]> = [
    ['home', 'home', 'Accueil', route.name === 'home'],
    ['search', 'search', 'Explorer', route.name === 'search'],
    ['annonces', 'tag', 'Annonces', route.name === 'annonces'],
    ['compte', 'message', 'Messages', isMsg],
    ['compte', 'user', 'Compte', onCompte && !isMsg],
  ];
  return (
    <div className="tabbar">
      <div className="tabbar-in">
        {items.map(([n, ic, lb, active], i) => (
          <div
            key={i}
            className={'tab ' + (active ? 'on' : '')}
            onClick={() => go(n as RouteName, ic === 'message' ? { tab: 'messages' } : n === 'compte' ? { tab: 'annonces' } : {})}
          >
            <Icon name={ic} size={21} stroke={active ? 2.2 : 1.8} />{lb}
          </div>
        ))}
      </div>
    </div>
  );
}

export function Footer() {
  const { go } = useGo();
  type Item = [label: string, run: () => void];
  const col = (h: string, items: Item[]) => (
    <div>
      <h5>{h}</h5>
      <ul>{items.map(([label, run]) => <li key={label}><a onClick={run} style={{ cursor: 'pointer' }}>{label}</a></li>)}</ul>
    </div>
  );
  return (
    <div className="footer">
      <div className="footer-in">
        <div className="footer-grid">
          <div>
            <img src="/assets/darsouk-logo.png" alt="Darsouk" style={{ height: 26, opacity: 0.98, cursor: 'pointer' }} onClick={() => go('home')} />
            <p style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14, lineHeight: 1.6, marginTop: 16, maxWidth: 300 }}>
              La plateforme pour découvrir, réserver et profiter des commerces locaux — en Algérie, et bientôt dans tout le Maghreb.
            </p>
            <div className="row gap8" style={{ marginTop: 18 }}>
              <div className="chip chip-sm" style={{ background: 'rgba(255,255,255,0.08)', color: '#fff', border: 'none' }}>
                <Icon name="globe" size={14} />Algérie
              </div>
            </div>
          </div>
          {col('Découvrir', [
            ['Restaurants', () => go('category', { cat: 'restaurants' })],
            ['Hôtels & Riads', () => go('category', { cat: 'hotels' })],
            ['Cafés', () => go('category', { cat: 'cafes' })],
            ['Beauté', () => go('category', { cat: 'beaute' })],
            ['Hammam & Spa', () => go('category', { cat: 'spa' })],
          ])}
          {col('Darsouk Pro', [
            ['Référencer mon commerce', () => go('pro')],
            ['Tarifs', () => go('pricing')],
            ['Tableau de bord', () => go('pro')],
            ['Centre d’aide', () => go('aide')],
          ])}
          {col('Société', [
            ['À propos', () => go('apropos')],
            ['Villes couvertes', () => go('villes')],
            ['Blog', () => go('apropos')],
            ['Nous contacter', () => go('aide')],
          ])}
        </div>
        <div className="footer-bottom">
          <span>© 2026 Darsouk — Alger, Algérie</span>
          <span className="row gap16 hide-m">
            <a onClick={() => go('apropos')} style={{ cursor: 'pointer' }}>Confidentialité</a>
            <a onClick={() => go('apropos')} style={{ cursor: 'pointer' }}>Conditions</a>
            <a onClick={() => go('apropos')} style={{ cursor: 'pointer' }}>Cookies</a>
          </span>
        </div>
      </div>
    </div>
  );
}