import { router, useLocalSearchParams } from 'expo-router';
import { useState } from 'react';
import { ScrollView, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import {
  BILAN_FIELD_LABELS,
  BILAN_FIELDS,
  REQUIRED_BILAN_FIELDS,
  type BilanField,
  type ReportUpsert,
} from '@siop/shared';
import { useQueryClient } from '@tanstack/react-query';
import { useReferenceValues, useWorkOrder } from '@/api/exploitation';
import { useHorsLigne } from '@/auth/session';
import { BoutonTel, Carte, ChoixTel, EnteteFiche } from '@/composants/ui';
import { enfilerBilan, enfilerTransition } from '@/file/actions';
import { useTokens } from '@/theme/tokens';

/** Écran 3 de la maquette R4 : le bilan codé R2 au pouce — 3 champs requis,
 *  garde visible et bloquante. Depuis R4.3, bilan et clôture partent EN
 *  FILE (D1) : hors-ligne, l'OT passe localement à « Terminé (en file) »
 *  et le serveur tranchera au rejeu (verrou D2 si l'OT a bougé). */

type ChampBilanId =
  | 'doorStateId'
  | 'cabinPositionId'
  | 'anomalyId'
  | 'externalCauseId'
  | 'actionTakenId'
  | 'componentConcernedId';

const CHAMP_VERS_ID: Record<BilanField, ChampBilanId> = {
  DOOR_STATE: 'doorStateId',
  CABIN_POSITION: 'cabinPositionId',
  ANOMALY: 'anomalyId',
  EXTERNAL_CAUSE: 'externalCauseId',
  ACTION_TAKEN: 'actionTakenId',
  COMPONENT_CONCERNED: 'componentConcernedId',
};
const CHAMP_VERS_VALEUR = {
  DOOR_STATE: 'doorState',
  CABIN_POSITION: 'cabinPosition',
  ANOMALY: 'anomaly',
  EXTERNAL_CAUSE: 'externalCause',
  ACTION_TAKEN: 'actionTaken',
  COMPONENT_CONCERNED: 'componentConcerned',
} as const;

export default function PageCloture() {
  const t = useTokens();
  const horsLigne = useHorsLigne();
  const { id } = useLocalSearchParams<{ id: string }>();
  const { data: ot } = useWorkOrder(id);
  const { data: valeurs } = useReferenceValues();
  const queryClient = useQueryClient();
  const [choix, setChoix] = useState<Partial<Record<BilanField, string | null>>>({});

  if (!ot) return null;

  const optionsDe = (champ: BilanField) =>
    (valeurs ?? []).filter((v: { field: string; isActive: boolean }) => v.field === champ && v.isActive);

  /** Valeur affichée : le choix local s'il existe, sinon le bilan serveur. */
  const valeurDe = (champ: BilanField): { id: string; label: string } | null => {
    if (champ in choix) {
      const vid = choix[champ];
      if (!vid) return null;
      const v = (valeurs ?? []).find((x) => x.id === vid);
      return v ? { id: v.id, label: v.label } : null;
    }
    return ot.report?.[CHAMP_VERS_VALEUR[champ]] ?? null;
  };

  const enregistrer = () => {
    const corps: ReportUpsert = {};
    const labels: Parameters<typeof enfilerBilan>[3] = {};
    for (const champ of BILAN_FIELDS) {
      if (champ in choix) {
        corps[CHAMP_VERS_ID[champ]] = choix[champ] ?? null;
        labels[CHAMP_VERS_ID[champ]] = valeurDe(champ);
      }
    }
    enfilerBilan(queryClient, ot, corps, labels);
  };

  const cloturer = () => {
    enregistrer();
    enfilerTransition(queryClient, ot, 'DONE');
    router.replace(`/ot/${id}`);
  };

  const manquants = REQUIRED_BILAN_FIELDS.filter((c) => !valeurDe(c));

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
      <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
        <EnteteFiche titre={`Clôturer ${ot.reference}`} />
        <Carte titre="Bilan d'intervention — requis pour clôturer">
          <View style={{ gap: 10 }}>
            {[0, 2, 4].map((rang) => (
              <View key={rang} style={{ flexDirection: 'row', gap: 8 }}>
                {[BILAN_FIELDS[rang]!, BILAN_FIELDS[rang + 1]!].map((champ) => (
                  <ChoixTel
                    key={champ}
                    libelle={BILAN_FIELD_LABELS[champ]}
                    requis={REQUIRED_BILAN_FIELDS.includes(champ)}
                    valeur={valeurDe(champ)}
                    options={optionsDe(champ)}
                    surChoix={(vid) => setChoix((c) => ({ ...c, [champ]: vid }))}
                  />
                ))}
              </View>
            ))}
          </View>
          {manquants.length ? (
            <Text style={{ color: t.alerte, fontFamily: 'Manrope_600SemiBold', fontSize: 12 }}>
              ⚠ {manquants.map((c) => `« ${BILAN_FIELD_LABELS[c]} »`).join(', ')}{' '}
              {manquants.length > 1 ? 'manquent' : 'manque'} — la clôture restera bloquée (même garde
              que le web).
            </Text>
          ) : null}
        </Carte>

        <BoutonTel
          libelle="Enregistrer le bilan"
          variante="contour"
          surAppui={() => {
            enregistrer();
            router.replace(`/ot/${id}`);
          }}
        />
        <BoutonTel
          libelle={
            manquants.length
              ? 'Clôturer (bilan incomplet)'
              : horsLigne
                ? 'Clôturer — partira à la synchro'
                : "Clôturer l'intervention"
          }
          variante={manquants.length ? 'gris' : 'vert'}
          desactive={manquants.length > 0}
          surAppui={cloturer}
        />
        {horsLigne ? (
          <Text style={{ color: t.stAttente, fontFamily: 'Manrope_600SemiBold', fontSize: 12 }}>
            Hors-ligne : la clôture est enregistrée sur le téléphone et sera rejouée telle quelle
            au retour du réseau. Si l’OT a changé entre-temps, VOUS trancherez (écran Synchro).
          </Text>
        ) : null}
      </ScrollView>
    </SafeAreaView>
  );
}