import { Tabs } from 'expo-router';
import { Text, type ColorValue } from 'react-native';
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();
  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} />,
        }}
      />
    </Tabs>
  );
}