// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   pages/Resto.tsx
// Desc:   Fiche restaurant — panneau synthèse collant (comme la fiche Lou·Ka)
//         + menu complet par sections avec prix, options et badge de CONTEXTE
//         de prix toujours visible (CLAUDE.md §6.2 : un prix sans contexte
//         est inutilisable ; delivery affiché clairement étiqueté).
// ==============================================================================
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import {
  CONTEXT_LABELS, CONTEXT_SHORT, Menu, Restaurant, cuisineLabel, dietLabel,
  fetchRestaurant, fmtDate, fmtPrice, pushRecentUid, sourceName, typeLabel,
} from "../api";
import { IcoCompass } from "../components/Icons";
import { FavButton } from "../favorites";

function MenuBlock({ menu }: { menu: Menu }) {
  const [openSections, setOpenSections] = useState<Set<number>>(
    new Set(menu.sections.map((_, i) => i).slice(0, 4)));
  const toggle = (i: number) => {
    const next = new Set(openSections);
    if (next.has(i)) next.delete(i);
    else next.add(i);
    setOpenSections(next);
  };
  return (
    <section className="menu-block">
      <div className={`ctx-banner ctx-${menu.price_context}`}>
        <b>{CONTEXT_LABELS[menu.price_context] ?? menu.price_context}</b>
        <span>
          source {sourceName(menu.price_source)} · capté le {fmtDate(menu.captured_at)}
          {" · "}{menu.item_count} plats
        </span>
      </div>
      {menu.sections.map((sec, i) => (
        <div className="menu-section" key={`${sec.name}-${i}`}>
          <button className="menu-section-head" onClick={() => toggle(i)}
            aria-expanded={openSections.has(i)}>
            {sec.image && <img className="ms-img" src={sec.image} alt="" loading="lazy" />}
            <h3>{sec.name}</h3>
            <span className="ms-meta">{sec.items.length} · {openSections.has(i) ? "−" : "+"}</span>
          </button>
          {openSections.has(i) && (
            <ul className="menu-items">
              {sec.items.map((it, j) => (
                <li className="menu-item" key={`${it.name}-${j}`}>
                  <div className="mi-row">
                    <div className="mi-main">
                      <div className="mi-line">
                        <span className="mi-name">
                          {it.name}
                          {(it.tags ?? []).map((t) => (
                            <em className={`mi-tag mi-tag-${t}`} key={t}>{dietLabel(t)}</em>
                          ))}
                        </span>
                        <span className="mi-dots" aria-hidden="true" />
                        <span className="mi-price">{fmtPrice(it.price)}</span>
                      </div>
                      {it.description && <p className="mi-desc">{it.description}</p>}
                    </div>
                    {it.image && (
                      <img className="mi-thumb" src={it.image} alt={it.name} loading="lazy" />
                    )}
                  </div>
                  {(it.options ?? []).length > 0 && (
                    <div className="mi-optgroups">
                      {(it.options ?? []).map((op, k) => (
                        <div className="og" key={`${op.group}-${k}`}>
                          <div className="og-head">
                            <span className="og-name">{op.group}</span>
                            <span className={`og-req ${op.required ? "on" : ""}`}>
                              {op.required ? "Choix requis" : "Optionnel"}
                            </span>
                          </div>
                          <div className="og-choices">
                            {op.choices.map((c, m) => (
                              <span className="og-choice" key={`${c.name}-${m}`}>
                                {c.name}
                                {c.price_delta !== 0 && (
                                  <b className={c.price_delta > 0 ? "plus" : "moins"}>
                                    {c.price_delta > 0 ? "+" : "−"}
                                    {Math.abs(c.price_delta).toFixed(2).replace(".", ",")} $
                                  </b>
                                )}
                              </span>
                            ))}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </section>
  );
}

export default function RestoPage() {
  const { uid } = useParams<{ uid: string }>();
  const [resto, setResto] = useState<Restaurant | null>(null);
  const [notFound, setNotFound] = useState(false);
  const [ctx, setCtx] = useState<string | null>(null);

  useEffect(() => {
    if (!uid) return;
    setResto(null);
    setNotFound(false);
    fetchRestaurant(uid)
      .then((r) => {
        setResto(r);
        setCtx(r.menus?.[0]?.price_context ?? null);
        pushRecentUid(r.uid);
      })
      .catch(() => setNotFound(true));
    window.scrollTo({ top: 0 });
  }, [uid]);

  if (notFound) {
    return (
      <div className="notice container">
        <div className="big"><IcoCompass size={40} /></div>
        <h2>Restaurant introuvable</h2>
        <p><Link to="/" className="link-btn">Retour à la recherche</Link></p>
      </div>
    );
  }
  if (!resto) {
    return (
      <div className="container detail">
        <div className="skel"><div className="sk-img" /><div className="sk-line" /><div className="sk-line short" /></div>
      </div>
    );
  }

  const menus = resto.menus ?? [];
  const menu = menus.find((m) => m.price_context === ctx) ?? menus[0] ?? null;

  return (
    <div className="container detail">
      <nav className="crumbs" aria-label="Fil d'Ariane">
        <Link to="/">Restos</Link> ›
        {resto.region && (
          <>
            <Link to={`/?region=${encodeURIComponent(resto.region)}`}>{resto.region}</Link> ›
          </>
        )}
        <span>{resto.name}</span>
      </nav>

      <div className="detail-grid">
        {/* Panneau resto (nom, prix, adresse) EN PREMIER dans le DOM : c'est le
            héro de la fiche — l'ordre du DOM est l'ordre visuel sur mobile
            (standard Groupe Ka « Ordre des sections — pages détail »).
            Sur desktop, le CSS le place explicitement en colonne 2. */}
        <aside className="panel">
          <div className="panel-head">
            {(resto.images ?? [])[0] && (
              <img className="panel-logo" src={resto.images[0]} alt="" loading="lazy" />
            )}
            {resto.price_range && <div className="price">{resto.price_range}</div>}
            <FavButton r={resto} big />
          </div>
          <h1>{resto.name}</h1>
          <div className="loc">
            {resto.address}{resto.address && resto.city ? ", " : ""}{resto.city}
            {resto.postal_code ? ` (${resto.postal_code})` : ""}
          </div>
          <div className="kv">
            <div className="cell">
              <div className="k">Région</div>
              <div className="v">{resto.region || "—"}</div>
            </div>
            <div className="cell">
              <div className="k">Type</div>
              <div className="v">{typeLabel(resto.establishment_type)}</div>
            </div>
            {resto.chain && (
              <div className="cell">
                <div className="k">Chaîne</div>
                <div className="v">{resto.chain}</div>
              </div>
            )}
            <div className="cell">
              <div className="k">Statut</div>
              <div className="v">{resto.status === "open" ? "Ouvert" : "Fermé temporairement"}</div>
            </div>
          </div>
          {resto.cuisines.length > 0 && (
            <>
              <div className="klabel">Cuisines</div>
              <div className="amenity-row">
                {resto.cuisines.map((c) => (
                  <span className="amenity" key={c}>{cuisineLabel(c)}</span>
                ))}
              </div>
            </>
          )}
          {resto.dietary_options.length > 0 && (
            <>
              <div className="klabel">Diètes offertes</div>
              <div className="amenity-row">
                {resto.dietary_options.map((d) => (
                  <span className="amenity" key={d}>{dietLabel(d)}</span>
                ))}
              </div>
            </>
          )}
          {(resto.website || resto.url) && (
            <a className="cta" href={resto.url || resto.website}
              target="_blank" rel="noopener noreferrer">
              Commander / voir chez le resto ↗
            </a>
          )}
          <div className="fine">
            Source : {sourceName(resto.source)} — les prix appartiennent au
            resto et peuvent changer sans préavis.
          </div>
        </aside>

        <div className="detail-main">
          {menus.length > 1 && (
            <div className="view-toggle ctx-toggle" role="tablist" aria-label="Contexte de prix">
              {menus.map((m) => (
                <button key={m.price_context}
                  className={m.price_context === menu?.price_context ? "on" : ""}
                  onClick={() => setCtx(m.price_context)}>
                  {CONTEXT_SHORT[m.price_context] ?? m.price_context}
                </button>
              ))}
            </div>
          )}
          {menu ? <MenuBlock menu={menu} /> : (
            <div className="notice">
              <h2>Menu à venir</h2>
              <p>Ce resto est répertorié ; son menu sera capté à la prochaine synchronisation.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}