import { useLocalSearchParams } from 'expo-router';
import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useCocheChecklist, useWorkOrder } from '@/api/exploitation';
import { useHorsLigne } from '@/auth/session';
import { EnteteFiche } from '@/composants/ui';
import { prochainEtat, progression } from '@/lib/checklist';
import { useTokens } from '@/theme/tokens';

/** Écran 6 de la maquette R4 : la grille au pouce. Appui simple = coche,
 *  appui long = non-applicable. En R4.2 chaque coche part immédiatement à
 *  l'API (hors-ligne : lecture seule — la file individuelle arrive en R4.3). */
export default function PageGrille() {
  const t = useTokens();
  const horsLigne = useHorsLigne();
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data: ot } = useWorkOrder(id);
  const coche = useCocheChecklist(id);

  if (!ot) return null;
  const { faits, total, pct } = progression(ot.checklist);

  const basculer = (itemId: string, etat: Parameters<typeof prochainEtat>[0], versNA = false) => {
    if (horsLigne) return;
    coche.mutate(
      { itemId, state: versNA ? (etat === 'NA' ? 'PENDING' : 'NA') : prochainEtat(etat) },
      { onError: (e) => Alert.alert('Coche refusée', e.message) },
    );
  };

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
        <EnteteFiche
          titre={`Grille — ${ot.assetReference}`}
          apres={
            <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 13, color: t.encre2 }}>
              {faits}/{total}
            </Text>
          }
        />
        <View style={{ height: 8, borderRadius: 999, backgroundColor: t.surface2, overflow: 'hidden' }}>
          <View
            style={{ width: `${Math.round(pct * 100)}%`, height: '100%', backgroundColor: t.succes }}
          />
        </View>
        {horsLigne ? (
          <View
            style={{
              backgroundColor: t.stAttenteFond,
              borderColor: t.stAttente,
              borderWidth: 1,
              borderRadius: 10,
              padding: 9,
            }}
          >
            <Text style={{ color: t.stAttente, fontFamily: 'Manrope_700Bold', fontSize: 12 }}>
              ⚠ Hors-ligne — les coches en file arrivent en R4.3 ; pour l’instant la grille est en
              lecture.
            </Text>
          </View>
        ) : null}
        {ot.checklist.map((item) => (
          <Pressable
            key={item.id}
            accessibilityRole="checkbox"
            aria-checked={item.state === 'DONE'}
            accessibilityLabel={item.label}
            disabled={horsLigne || coche.isPending}
            onPress={() => basculer(item.id, item.state)}
            onLongPress={() => basculer(item.id, item.state, true)}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 10,
              backgroundColor: t.surface,
              borderColor: t.bordure,
              borderWidth: 1,
              borderRadius: 10,
              paddingHorizontal: 12,
              paddingVertical: 11,
            }}
          >
            <View
              style={{
                width: 22,
                height: 22,
                borderRadius: 6,
                borderWidth: 2,
                borderColor: item.state === 'DONE' ? t.succes : t.bordureForte,
                backgroundColor: item.state === 'DONE' ? t.succes : 'transparent',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              {item.state === 'DONE' ? (
                <Text style={{ color: '#fff', fontSize: 13, fontFamily: 'Manrope_800ExtraBold' }}>✓</Text>
              ) : item.state === 'NA' ? (
                <Text style={{ color: t.encre3, fontSize: 10, fontFamily: 'Manrope_800ExtraBold' }}>NA</Text>
              ) : null}
            </View>
            <Text
              style={{
                flex: 1,
                fontFamily: 'Manrope_600SemiBold',
                fontSize: 13,
                color: item.state === 'PENDING' ? t.encre : t.encre2,
              }}
            >
              {item.label}
            </Text>
            {item.doneBy ? (
              <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 10.5, color: t.encre3 }}>
                {item.doneBy.displayName.split(' ')[0]}
              </Text>
            ) : null}
          </Pressable>
        ))}
        <Text style={{ color: t.encre3, fontFamily: 'Manrope_400Regular', fontSize: 11.5 }}>
          Appui simple : cocher / décocher · appui long : non-applicable.
        </Text>
      </ScrollView>
    </SafeAreaView>
  );
}