/**
 * La pagina di partenza: il menù in basso. Su iPhone è la tab bar di sistema
 * (la capsula di vetro di iOS 26), con Ricette, Categorie, Impostazioni e la
 * lente; su Android la barra in basso di Material, senza la lente, perché lì
 * la ricerca sta in cima alla pagina. Le differenze le decide logica-menu.ts.
 *
 * Le icone: su iPhone i simboli di Apple (SF Symbols), su Android immagini,
 * perché la libreria lì non ha i simboli Material; le immagini vengono dai
 * glifi Material di @expo/vector-icons (assets/menu/).
 *
 * La ricetta, la modifica e l'anteprima di un import sono pagine della pila
 * principale, sopra questa: aprendole il menù sparisce, come in WhatsApp
 * dentro una chat.
 *
 * `@react-navigation/bottom-tabs/unstable`: la parte nativa è segnata così da
 * React Navigation. Con iOS 27 la lente resterebbe dentro la capsula invece
 * che nel suo cerchio: la stacca la patch di react-native-screens in
 * `patches/`, finché la libreria non lo fa da sola (docs/BUILD.md, «La lente
 * di Cerca staccata»).
 */
import { Platform } from 'react-native';
import { createNativeBottomTabNavigator } from '@react-navigation/bottom-tabs/unstable';
import type { NativeBottomTabIcon } from '@react-navigation/bottom-tabs/unstable';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import type { ParametriMenu } from '../navigazione.ts';
import { useApp } from '../contesto.ts';
import { conSezioneCerca, iconeDiSistema, tintaInattivaMenu } from '../logica-menu.ts';
import { useColori } from '../tema.ts';
import Cerca from './Cerca.tsx';
import GestioneCategorie from './GestioneCategorie.tsx';
import Impostazioni from './Impostazioni.tsx';
import SezioneRicette from './SezioneRicette.tsx';

// `sf-symbols-typescript` è solo una dipendenza transitiva di bottom-tabs, non
// una nostra: non la si importa direttamente. Il tipo si ricava da quello che
// bottom-tabs espone già.
type SFSymbol = Extract<NativeBottomTabIcon, { type: 'sfSymbol' }>['name'];

const Menu = createNativeBottomTabNavigator<ParametriMenu>();

/**
 * La sezione Cerca è una pila di sistema, non la nostra: il campo di ricerca
 * di iOS (headerSearchBarOptions, in Cerca.tsx) vive nell'intestazione nativa,
 * e serve `headerLargeTitle` per farlo comparire come nell'app Foto. Altrove
 * l'intestazione è la nostra Barra.tsx.
 */
const PilaCerca = createNativeStackNavigator<{ Ricerca: undefined }>();

function SezioneCerca() {
  const { testo } = useApp();
  const colori = useColori();
  return (
    <PilaCerca.Navigator>
      <PilaCerca.Screen
        name="Ricerca"
        component={Cerca}
        options={{
          title: testo('cerca.titolo'),
          headerLargeTitle: true,
          headerTransparent: true,
          headerTintColor: colori.testo,
          contentStyle: { backgroundColor: colori.fondo },
        }}
      />
    </PilaCerca.Navigator>
  );
}

const ANDROID = {
  ricette: require('../../../assets/menu/ricette.png'),
  categorie: require('../../../assets/menu/categorie.png'),
  impostazioni: require('../../../assets/menu/impostazioni.png'),
};

/** Il simbolo di Apple su iPhone, l'immagine su Android: decide iconeDiSistema() in logica-menu.ts. */
function icona(simbolo: SFSymbol, immagine: number): NativeBottomTabIcon {
  return iconeDiSistema(Platform.OS) ? { type: 'sfSymbol', name: simbolo } : { type: 'image', source: immagine };
}

export default function Principale() {
  const { testo } = useApp();
  const colori = useColori();
  return (
    <Menu.Navigator
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: colori.accento,
        // Su Android la barra prende ora i colori dell'app (tema di
        // NavigationContainer, in App.tsx): col tema scuro il tinte di
        // sistema per le voci non scelte era troppo simile al fondo scuro
        // della barra. `testoTenue` è già verificato sopra `superficie`.
        // Su iPhone tintaInattivaMenu() lascia `undefined`: la capsula di
        // vetro ha già il suo colore adattivo di sistema, che imporne uno
        // nostro sostituirebbe.
        tabBarInactiveTintColor: tintaInattivaMenu(Platform.OS, colori.testoTenue),
        tabBarMinimizeBehavior: 'onScrollDown',
        tabBarLabelVisibilityMode: 'labeled',
      }}
    >
      <Menu.Screen
        name="Ricette"
        component={SezioneRicette}
        options={{ title: testo('menu.ricette'), tabBarIcon: icona('book', ANDROID.ricette) }}
      />
      <Menu.Screen
        name="Categorie"
        component={GestioneCategorie}
        options={{ title: testo('menu.categorie'), tabBarIcon: icona('folder', ANDROID.categorie) }}
      />
      <Menu.Screen
        name="Impostazioni"
        component={Impostazioni}
        options={{ title: testo('menu.impostazioni'), tabBarIcon: icona('gearshape', ANDROID.impostazioni) }}
      />
      {conSezioneCerca(Platform.OS) && (
        <Menu.Screen name="Cerca" component={SezioneCerca} options={{ tabBarSystemItem: 'search' }} />
      )}
    </Menu.Navigator>
  );
}