'use client';
import { useRef, useState } from 'react';
import { Icon } from '@/lib/icons';
import { SearchBar } from '@/components/SearchBar';
import { ListingCard } from '@/components/ListingCard';
import { AdCard } from '@/components/AdCard';
import { CATS, type Listing, type Ad } from '@/lib/data';
import { useGo } from '@/lib/router';

function ImgTile({ src, h, label }: { src: string; h: number; label: string }) {
  return (
    <div className="ph" style={{ height: h, borderRadius: 18, padding: 0, overflow: 'hidden', position: 'relative' }}>
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img src={src} alt={label} loading="eager" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      <div className="ph-label">{label}</div>
    </div>
  );
}

function HeroCollage3D() {
  const ref = useRef<HTMLDivElement>(null);
  const [t, setT] = useState({ rx: 0, ry: 0 });
  const onMove = (e: React.MouseEvent) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    setT({ rx: -py * 14, ry: px * 18 });
  };
  const reset = () => setT({ rx: 0, ry: 0 });
  const layer = (z: number): React.CSSProperties => ({
    transform: `translateZ(${z}px)`,
    transition: 'transform .4s cubic-bezier(0.22,1,0.36,1)',
  });
  return (
    <div className="hero-collage" ref={ref} onMouseMove={onMove} onMouseLeave={reset} style={{ perspective: 1100 }}>
      <div
        className="collage-stage"
        style={{
          transform: `rotateX(${t.rx}deg) rotateY(${t.ry}deg)`,
          transformStyle: 'preserve-3d',
          transition: 'transform .25s cubic-bezier(0.22,1,0.36,1)',
          width: '100%',
          height: '100%',
          position: 'relative',
        }}
      >
        <div className="pc" style={{ left: 0, top: '8%', width: '62%', ...layer(20) }}>
          <ImgTile src="/images/restaurant.webp" h={300} label="Restaurant" />
        </div>
        <div className="pc" style={{ right: 0, top: 0, width: '54%', ...layer(62) }}>
          <ImgTile src="/images/riad.avif" h={200} label="Riad" />
        </div>
        <div className="pc" style={{ right: '2%', bottom: 0, width: '58%', ...layer(42) }}>
          <ImgTile src="/images/spa.jpg" h={185} label="Spa" />
        </div>
        <div className="hero-float" style={layer(110)}>
          <div style={{ width: 40, height: 40, borderRadius: 12, background: 'var(--teal)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Icon name="verified" size={22} stroke={1.6} />
          </div>
          <div>
            <div className="h4">Réservé !</div>
            <div className="tiny">Confirmation immédiate</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export function HomeClient({ popular, fresh, ads }: { popular: Listing[]; fresh: Listing[]; ads: Ad[] }) {
  const { go } = useGo();
  return (
    <div>
      <div className="wrap">
        <div className="hero">
          <div>
            <div className="hero-badge"><span className="dot"></span>+ 5 200 commerces vérifiés en Algérie</div>
            <h1 className="h1" style={{ marginTop: 20 }}>
              Toute votre ville,<br />
              <span style={{ color: 'var(--red)' }}>réservée en un clic.</span>
            </h1>
            <p className="lead" style={{ marginTop: 16, maxWidth: 440 }}>
              Restaurants, hôtels, salons, cafés… Découvrez les meilleures adresses près de chez vous, à Alger et partout en Algérie — et réservez en quelques secondes.
            </p>
            <div style={{ marginTop: 24 }}><SearchBar /></div>
            <div className="pop-chips">
              <span className="small">Populaire :</span>
              {['Brunch à Alger', 'Hammam & spa', 'Tables en terrasse', 'Coiffure mariage'].map((t) => (
                <span key={t} className="pc" onClick={() => go('search', { q: t })}>{t}</span>
              ))}
            </div>
          </div>
          <HeroCollage3D />
        </div>
      </div>

      <div className="wrap section" style={{ paddingTop: 8 }}>
        <div className="between" style={{ marginBottom: 18 }}>
          <h2 className="h2">Explorez par catégorie</h2>
          <a className="row gap8" style={{ fontWeight: 600, fontSize: 14, cursor: 'pointer' }} onClick={() => go('search')}>
            Tout voir <Icon name="arrowRight" size={17} stroke={1.8} />
          </a>
        </div>
        <div className="cat-rail">
          {CATS.map((c) => (
            <div key={c.key} className="cat-tile" onClick={() => go('category', { cat: c.key })}>
              <div className="cat-ic"><Icon name={c.icon} size={28} stroke={1.7} /></div>
              <div className="cat-nm">{c.name}</div>
            </div>
          ))}
        </div>
      </div>

      {popular.length > 0 && (
        <div className="wrap section" style={{ paddingTop: 8 }}>
          <div className="between" style={{ marginBottom: 20 }}>
            <div>
              <div className="eyebrow">Tendances</div>
              <h2 className="h2" style={{ marginTop: 6 }}>Commerces populaires</h2>
            </div>
            <a className="row gap8" style={{ fontWeight: 600, fontSize: 14, cursor: 'pointer' }} onClick={() => go('search')}>
              Tout voir <Icon name="arrowRight" size={17} stroke={1.8} />
            </a>
          </div>
          <div className="grid cols-4">{popular.map((d, i) => <ListingCard key={d.id} d={d} idx={i} />)}</div>
        </div>
      )}

      <div className="wrap section">
        <div className="steps">
          {(
            [
              ['search', 'Cherchez', 'Filtrez par catégorie, quartier et budget pour trouver l’adresse idéale.'],
              ['calendar', 'Réservez', 'Choisissez votre créneau et confirmez en ligne, sans appel téléphonique.'],
              ['sparkles', 'Profitez', 'Présentez-vous, profitez — et partagez votre avis avec la communauté.'],
            ] as const
          ).map((s, i) => (
            <div className="step" key={i}>
              <div className="row between" style={{ alignItems: 'flex-start' }}>
                <div className="step-n">{i + 1}</div>
                <Icon name={s[0]} size={22} stroke={1.7} style={{ color: 'var(--muted)' }} />
              </div>
              <h3 className="h3" style={{ marginTop: 16 }}>{s[1]}</h3>
              <p className="body" style={{ marginTop: 8 }}>{s[2]}</p>
            </div>
          ))}
        </div>
      </div>

      {fresh.length > 0 && (
        <div className="wrap section" style={{ paddingTop: 8 }}>
          <div className="between" style={{ marginBottom: 20 }}>
            <div>
              <div className="eyebrow">Nouveau</div>
              <h2 className="h2" style={{ marginTop: 6 }}>Récemment ajoutés</h2>
            </div>
          </div>
          <div className="grid cols-4">{fresh.map((d, i) => <ListingCard key={d.id} d={d} idx={i + 1} />)}</div>
        </div>
      )}

      {ads.length > 0 && (
        <div className="wrap section" style={{ paddingTop: 8 }}>
          <div className="between" style={{ marginBottom: 20 }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--teal)' }}>Occasion</div>
              <h2 className="h2" style={{ marginTop: 6 }}>Dernières annonces</h2>
            </div>
            <div className="row gap12">
              <button className="btn btn-soft btn-sm hide-m" onClick={() => go('post')}>
                <Icon name="plus" size={16} stroke={2.5} />Déposer une annonce
              </button>
              <a className="row gap8" style={{ fontWeight: 600, fontSize: 14, cursor: 'pointer' }} onClick={() => go('annonces')}>
                Toutes les annonces <Icon name="arrowRight" size={17} stroke={1.8} />
              </a>
            </div>
          </div>
          <div className="grid cols-4">
            {ads.map((d, i) => <AdCard key={d.id} d={d} idx={i} />)}
          </div>
        </div>
      )}

      <div className="wrap section">
        <div className="pro-band">
          <div className="pro-stats">
            {(
              [
                ['5 200+', 'Commerces vérifiés'],
                ['48', 'Villes couvertes'],
                ['210k', 'Réservations / mois'],
                ['4.8/5', 'Note moyenne'],
              ] as const
            ).map((s, i) => (
              <div className="pro-stat" key={i}>
                <div className="v">{s[0]}</div>
                <div className="l">{s[1]}</div>
              </div>
            ))}
          </div>
          <button className="btn btn-red btn-lg" onClick={() => go('pricing')}>Référencer mon commerce</button>
        </div>
      </div>
    </div>
  );
}