import { router } from 'expo-router';
import { FlatList, Pressable, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { ASSET_STATUS_LABELS, type AssetStatus } from '@siop/shared';
import { useAssets } from '@/api/exploitation';
import { EnteteFiche } from '@/composants/ui';
import { useTokens, type Tokens } from '@/theme/tokens';

/** Ascenseurs — R6.2 (Parc). Le parc complet, déjà préchargé (D1 lecture
 *  locale) — même donnée que le Scanner, présentée en liste plutôt qu'en
 *  résolution QR. Ouvre la fiche R4 telle quelle (écran 5). */
export default function PageAscenseurs() {
  const t = useTokens();
  const { data: assets } = useAssets();
  const appareils = [...(assets ?? [])].sort((a, b) => a.reference.localeCompare(b.reference));

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <View style={{ flex: 1, padding: 14, gap: 10 }}>
        <EnteteFiche titre="Ascenseurs" />
        <FlatList
          data={appareils}
          keyExtractor={(a) => a.id}
          contentContainerStyle={{ gap: 8, paddingBottom: 12 }}
          ListEmptyComponent={
            <Text style={{ color: t.encre3, fontFamily: 'Manrope_600SemiBold', padding: 16, textAlign: 'center' }}>
              Aucun appareil accessible.
            </Text>
          }
          renderItem={({ item: a }) => (
            <Pressable
              accessibilityRole="button"
              onPress={() => router.push(`/ascenseur/${a.id}`)}
              style={{
                backgroundColor: t.surface,
                borderColor: t.bordure,
                borderWidth: 1,
                borderRadius: 12,
                padding: 12,
                gap: 2,
              }}
            >
              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                <Text
                  style={{
                    fontFamily: 'Manrope_700Bold',
                    fontSize: 10.5,
                    letterSpacing: 0.6,
                    textTransform: 'uppercase',
                    color: t.encre2,
                    flex: 1,
                  }}
                >
                  {a.reference}
                </Text>
                <ChipStatutAppareil statut={a.status} t={t} />
              </View>
              <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 14, color: t.encre }}>
                {a.brand} {a.model ?? ''}
              </Text>
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 12, color: t.encre2 }}>
                {a.siteName} — {a.locationName}
              </Text>
            </Pressable>
          )}
        />
      </View>
    </SafeAreaView>
  );
}

function ChipStatutAppareil({ statut, t }: { statut: AssetStatus; t: Tokens }) {
  const enService = statut === 'IN_SERVICE';
  return (
    <Text
      style={{
        fontFamily: 'Manrope_700Bold',
        fontSize: 10.5,
        color: enService ? t.stTermine : t.stAttente,
        backgroundColor: enService ? t.stTermineFond : t.stAttenteFond,
        paddingHorizontal: 8,
        paddingVertical: 2,
        borderRadius: 999,
        overflow: 'hidden',
      }}
    >
      {ASSET_STATUS_LABELS[statut]}
    </Text>
  );
}