import { useState } from 'react';
import { Pressable, Text, TextInput, View } from 'react-native';
import { useAssetOptions, useCreateRequest } from '@/api/exploitation';
import { useTokens } from '@/theme/tokens';
import { BoutonTel, ChoixTel } from './ui';

/** Formulaire « Nouvelle demande » — mêmes champs que la modale de
 *  signalement du web (asset via `/assets/options`, accessible même sans
 *  ASSETS.view ; description ; personne bloquée). Utilisé à la fois par
 *  l'onglet du Demandeur et par le Menu des rôles gestion. */
export function FormulaireDemande({ surSucces }: { surSucces: (id: string) => void }) {
  const t = useTokens();
  const { data: options } = useAssetOptions();
  const creation = useCreateRequest();
  const [assetId, setAssetId] = useState<string | null>(null);
  const [description, setDescription] = useState('');
  const [personneBloquee, setPersonneBloquee] = useState(false);

  const asset = (options ?? []).find((a) => a.id === assetId) ?? null;
  const valide = !!assetId && description.trim().length >= 3;

  const envoyer = () => {
    if (!assetId) return;
    creation.mutate(
      { assetId, description: description.trim(), isPersonTrapped: personneBloquee },
      { onSuccess: (r) => surSucces(r.id) },
    );
  };

  return (
    <View style={{ gap: 12 }}>
      <ChoixTel
        libelle="Équipement"
        requis
        valeur={asset ? { id: asset.id, label: `${asset.reference} — ${asset.siteName}` } : null}
        options={(options ?? []).map((a) => ({ id: a.id, label: `${a.reference} — ${a.siteName}` }))}
        surChoix={setAssetId}
      />
      <View style={{ gap: 4 }}>
        <Text style={{ fontFamily: 'Manrope_700Bold', fontSize: 11, color: t.encre2 }}>
          Description <Text style={{ color: t.danger }}>*</Text>
        </Text>
        <TextInput
          accessibilityLabel="Description du problème"
          placeholder="Ex. : la porte ne se ferme plus au 3ᵉ étage"
          placeholderTextColor={t.encre3}
          multiline
          value={description}
          onChangeText={setDescription}
          style={{
            borderWidth: 1.5,
            borderColor: t.bordureForte,
            borderRadius: 9,
            paddingHorizontal: 10,
            paddingVertical: 9,
            minHeight: 64,
            color: t.encre,
            fontFamily: 'Manrope_600SemiBold',
            fontSize: 13,
            textAlignVertical: 'top',
          }}
        />
      </View>
      <Pressable
        accessibilityRole="switch"
        accessibilityLabel="Une personne est-elle bloquée ?"
        accessibilityState={{ checked: personneBloquee }}
        onPress={() => setPersonneBloquee((v) => !v)}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: personneBloquee ? t.prioBloqueFond : t.surface,
          borderColor: personneBloquee ? t.danger : t.bordure,
          borderWidth: 1,
          borderRadius: 10,
          padding: 12,
        }}
      >
        <Text
          style={{
            fontFamily: 'Manrope_700Bold',
            fontSize: 13,
            color: personneBloquee ? t.danger : t.encre,
          }}
        >
          Une personne est-elle bloquée ?
        </Text>
        <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 13, color: personneBloquee ? t.danger : t.encre3 }}>
          {personneBloquee ? 'OUI' : 'NON'}
        </Text>
      </Pressable>
      {creation.isError ? (
        <Text style={{ color: t.danger, fontFamily: 'Manrope_600SemiBold', fontSize: 12.5 }}>
          {creation.error.message}
        </Text>
      ) : null}
      <BoutonTel
        libelle="Envoyer la demande"
        desactive={!valide || creation.isPending}
        surAppui={envoyer}
      />
    </View>
  );
}
