// FOOTPASS v2 · AUTORISATIONS · territoires (cascade Monde → Continent → Pays → Championnat → Club)
// Pas de texte libre : une liste fixe, vérifiable sans ambiguïté (spec périmètre).
// Cartes championnat : monogramme + teinte générique (aucun logo de marque).

// ── Arbre des territoires ──
window.MD_TREE = {
  label: 'Monde', code: 'MON', hue: 200, sub: '211 fédérations',
  kids: [
    {
      label: 'Europe', code: 'UEFA', hue: 250, sub: '55 pays', logo: 'uefa',
      kids: [
        {
          label: 'France', code: 'FR', hue: 250, sub: '2 championnats pro',
          kids: [
            { label: 'Ligue 1', full: 'France · Ligue 1', code: 'L1', hue: 75, sub: 'D1 · 18 clubs', logo: 'ligue1',
              kids: [
                { label: 'AS Monaco', code: 'ASM', hue: 25, sub: 'Ligue 1' },
                { label: 'FC Nantes', code: 'FCN', hue: 110, sub: 'Ligue 1', logo: 'fc-nantes' },
                { label: 'Olympique de Marseille', code: 'OM', hue: 220, sub: 'Ligue 1' },
              ] },
            { label: 'Ligue 2', full: 'France · Ligue 2', code: 'L2', hue: 75, sub: 'D2 · 20 clubs' },
          ],
        },
        {
          label: 'Espagne', code: 'ES', hue: 40, sub: '2 championnats pro',
          kids: [
            { label: 'LaLiga', full: 'Espagne · LaLiga', code: 'LL', hue: 40, sub: 'D1 · 20 clubs',
              kids: [
                { label: 'Real Madrid', code: 'RMA', hue: 85, sub: 'LaLiga' },
                { label: 'Betis Séville', code: 'BET', hue: 140, sub: 'LaLiga' },
              ] },
          ],
        },
        {
          label: 'Angleterre', code: 'EN', hue: 345, sub: '2 championnats pro',
          kids: [
            { label: 'Premier League', full: 'Angleterre · Premier League', code: 'PL', hue: 310, sub: 'D1 · 20 clubs',
              kids: [
                { label: 'Manchester United', code: 'MUN', hue: 25, sub: 'Premier League' },
                { label: 'Liverpool FC', code: 'LIV', hue: 15, sub: 'Premier League' },
              ] },
            { label: 'Championship', full: 'Angleterre · Championship', code: 'CH', hue: 310, sub: 'D2 · 24 clubs' },
          ],
        },
        {
          label: 'Portugal', code: 'PT', hue: 140, sub: '1 championnat pro',
          kids: [
            { label: 'Liga Portugal', full: 'Portugal · Liga Portugal', code: 'LP', hue: 140, sub: 'D1 · 18 clubs',
              kids: [{ label: 'FC Porto', code: 'POR', hue: 240, sub: 'Liga Portugal' }] },
          ],
        },
        {
          label: 'Allemagne', code: 'DE', hue: 0, sub: '2 championnats pro',
          kids: [
            { label: 'Bundesliga', full: 'Allemagne · Bundesliga', code: 'BUN', hue: 0, sub: 'D1 · 18 clubs' },
          ],
        },
      ],
    },
    { label: 'Amérique du Sud', code: 'SUD', hue: 160, sub: 'CONMEBOL · 10 pays' },
    { label: 'Amérique du Nord', code: 'NRD', hue: 190, sub: 'CONCACAF · 41 pays' },
    { label: 'Afrique', code: 'AFR', hue: 60, sub: 'CAF · 54 pays' },
    { label: 'Asie & Océanie', code: 'ASI', hue: 290, sub: 'AFC + OFC · 58 pays' },
  ],
};

// terr (chaîne) → méta { code, hue } · index à plat de l'arbre
window.MD_TERR_META = (() => {
  const out = {};
  const walk = (n, d) => { out[n.full || n.label] = { code: n.code, hue: n.hue, tier: Math.min(d, 4), logo: n.logo || null, sub: n.sub || '' }; (n.kids || []).forEach((k) => walk(k, d + 1)); };
  walk(window.MD_TREE, 0);
  return out;
})();

// ── Échelle de portée (une couleur = une étendue de pouvoir, du plus large au plus étroit) ──
// Indigo intense = Monde ; s'éclaircit et se désature vers le Club. Distinct du vert/ambre des familles.
const TERR_TIER = [
  { key: 'world',     L: 0.55, C: 0.17, H: 266 },
  { key: 'continent', L: 0.59, C: 0.14, H: 262 },
  { key: 'country',   L: 0.62, C: 0.11, H: 256 },
  { key: 'league',    L: 0.60, C: 0.08, H: 252 },
  { key: 'club',      L: 0.58, C: 0.05, H: 250 },
];
// Glyphe de catégorie · générique, AUCUN logo de marque
// (Monde = globe · Continent = globe régional · Pays = drapeau · Championnat/Club = écusson)
function TerrGlyph({ tier, s = 10 }) {
  const p = { width: s, height: s, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (tier === 'world') return <svg {...p}><circle cx="8" cy="8" r="6"></circle><path d="M2 8h12M8 2c2 2 2 10 0 12M8 2c-2 2-2 10 0 12"></path></svg>;
  if (tier === 'continent') return <svg {...p}><circle cx="8" cy="8" r="6"></circle><path d="M2.4 6.2h11.2M3 10.2h10"></path></svg>;
  if (tier === 'country') return <svg {...p}><path d="M4 2.6v11"></path><path d="M4 3.2h7.6l-1.6 2.3 1.6 2.3H4" fill="currentColor" stroke="none"></path></svg>;
  return <svg {...p}><path d="M8 2.2l4.4 1.5v3.8c0 2.9-1.9 4.7-4.4 5.9C5.5 12.2 3.6 10.4 3.6 7.5V3.7L8 2.2z"></path></svg>;
}
// Drapeaux nationaux (symboles publics, libres) · pour le tier « pays »
const MD_FLAGS = { FR: '🇫🇷', ES: '🇪🇸', EN: '🇬🇧', PT: '🇵🇹', DE: '🇩🇪', IT: '🇮🇹', BE: '🇧🇪', NL: '🇳🇱' };
// ── Pastille territoire (glyphe + code, teintés par portée) ──
function MdTerr({ t, big }) {
  const tx = window.TX || ((s) => s);
  const m = window.MD_TERR_META[t] || { code: String(t || '').slice(0, 3).toUpperCase(), tier: 2 };
  const c = TERR_TIER[Math.min(m.tier == null ? 2 : m.tier, 4)];
  const flag = MD_FLAGS[m.code];
  const tint = { background: `oklch(${c.L} ${c.C} ${c.H} / 0.15)`, color: `oklch(${c.L} ${c.C} ${c.H})` };
  return (
    <em className={`md-terr tier-${c.key} ${big ? 'big' : ''}`}>
      {m.logo
        ? <i className="md-terr-logo"><img src={(window.FP_LOGO_DATA || {})[m.logo]} alt="" /></i>
        : flag
          ? <i style={tint}><span className="md-terr-flag">{flag}</span><span className="md-terr-code">{m.code}</span></i>
          : <i style={tint}><TerrGlyph tier={c.key} s={big ? 12 : 9} /><span className="md-terr-code">{m.code}</span></i>}
      {tx(t)}
    </em>
  );
}

// ── Sélecteur en cascade (nouvelle autorisation) ──
// Fil d'Ariane cliquable + grille de cartes championnat · la sélection = le nœud courant.
function MdTerrPicker({ value, onChange }) {
  const { useState: useStateTp } = React;
  const tx = window.TX || ((s) => s);
  const [path, setPath] = useStateTp([window.MD_TREE]);
  const cur = path[path.length - 1];
  const pick = (node) => {
    onChange(node.full || node.label);
    if (node.kids && node.kids.length) setPath([...path, node]);
  };
  const backTo = (i) => { const np = path.slice(0, i + 1); setPath(np); onChange(np[np.length - 1].full || np[np.length - 1].label); };
  return (
    <div className="md-terrpick">
      <div className="md-crumbs">
        {path.map((n, i) => (
          <React.Fragment key={n.label}>
            {i ? <i className="md-chain-arr"><MdArrow s={9} /></i> : null}
            <button className={`md-crumb ${i === path.length - 1 ? 'on' : ''}`} onClick={() => backTo(i)}>{tx(n.label)}</button>
          </React.Fragment>
        ))}
      </div>
      <div className="md-leagues">
        {(cur.kids || []).map((n) => {
          const selected = value === (n.full || n.label);
          return (
            <button key={n.label} className={`md-league ${selected ? 'on' : ''}`} onClick={() => pick(n)}>
              <i className="md-league-badge" style={{ background: `oklch(0.72 0.13 ${n.hue} / 0.15)`, color: `oklch(0.8 0.12 ${n.hue})` }}>{n.code}</i>
              <b>{tx(n.label)}</b>
              <em>{tx(n.sub || '')}</em>
              {n.kids && n.kids.length ? <span className="md-league-more"><MdArrow s={10} /></span> : null}
            </button>
          );
        })}
      </div>
      <div className="md-terrsel">
        <span>{tx('Périmètre choisi')}</span>
        <MdTerr t={value} big />
      </div>
    </div>
  );
}

Object.assign(window, { MdTerr, MdTerrPicker });