import { Tabs } from 'expo-router';
import { Text, type ColorValue } from 'react-native';
import { useAssets, useReferenceValues } from '@/api/exploitation';
import { useFile } from '@/file/store';
import { useTokens } from '@/theme/tokens';

/** La tabbar de la maquette R4. Les onglets à venir restent visibles
 *  (périmètre annoncé, même patron que la sidebar web) mais mènent à un
 *  écran « disponible en R4.x ». */

function Pic({ glyphe, couleur }: { glyphe: string; couleur: ColorValue }) {
  return <Text style={{ fontSize: 17, color: couleur, lineHeight: 20 }}>{glyphe}</Text>;
}

export default function CoquilleTabs() {
  const t = useTokens();
  const file = useFile();
  const conflits = file.some((s) => s.statut === 'CONFLIT');
  // D1 « lecture locale » : le parc (scan D4) et les référentiels du bilan
  // se préchargent dès l'entrée — le sous-sol n'attend pas qu'on y pense.
  useAssets();
  useReferenceValues();
  return (
    <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: t.primaire,
        tabBarInactiveTintColor: t.encre3,
        tabBarStyle: { backgroundColor: t.surface, borderTopColor: t.bordure },
        tabBarLabelStyle: { fontFamily: 'Manrope_700Bold', fontSize: 10 },
        sceneStyle: { backgroundColor: t.fond },
      }}
    >
      <Tabs.Screen
        name="journee"
        options={{
          title: 'Ma journée',
          tabBarIcon: ({ color }) => <Pic glyphe="☰" couleur={color} />,
        }}
      />
      <Tabs.Screen
        name="scanner"
        options={{
          title: 'Scanner',
          tabBarIcon: ({ color }) => <Pic glyphe="▣" couleur={color} />,
        }}
      />
      <Tabs.Screen
        name="preventif"
        options={{
          title: 'Préventif',
          tabBarIcon: ({ color }) => <Pic glyphe="✓" couleur={color} />,
        }}
      />
      <Tabs.Screen
        name="synchro"
        options={{
          title: 'Synchro',
          tabBarIcon: ({ color }) => <Pic glyphe="⇅" couleur={color} />,
          tabBarBadge: file.length || undefined,
          tabBarBadgeStyle: {
            backgroundColor: conflits ? t.prioBloque : t.stAttente,
            color: '#fff',
            fontFamily: 'Manrope_800ExtraBold',
            fontSize: 10,
          },
        }}
      />
    </Tabs>
  );
}