import React, { useRef, useState } from 'react';
import {
  Alert,
  Animated,
  Keyboard,
  KeyboardAvoidingView,
  Platform,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from 'react-native';
import CustomDialog from '../../../../shared/components/ui/CustomDialog';
import { submitVisitReport } from '../../utils/visits.submit';
import { INTEREST_STATES } from '../../constants/visits.constants';
import useAutreVisitForm from '../../hooks/useAutreVisitForm';
import { formatElapsedTime } from '../../utils/visits.helpers';
import {
  validateProposedMedicines,
  validateVisitNotes,
} from '../../utils/visits.validation';
import InterestedMedicinesSection from './InterestedMedicinesSection';
import ProposedMedicinesSection from './ProposedMedicinesSection';
import VisitImagePicker from './VisitImagePicker';
import VisitAudioRecorder from './VisitAudioRecorder';
import VisitHistoryButton from '../history/VisitHistoryButton';

type AutreViewProps = {
  listing: any;
  elapsed?: number;
  adminPending?: boolean;
  visitType?: string;
  user_accompagnant_id?: number | null;
  userPos?: {
    latitude: number;
    longitude: number;
  } | null;
  hasTicket?: boolean;
  isFar?: boolean;
  farReason?: string | null;
  farExplanation?: string;
  onValidated?: () => Promise<void> | void;
};

const AutreView = ({
  listing,
  elapsed = 0,
  adminPending = false,
  visitType,
  user_accompagnant_id,
  userPos,
  hasTicket,
  isFar = false,
  farReason,
  farExplanation,
  onValidated,
}: AutreViewProps) => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  const {
    validated,
    setValidated,
    displayedTime,
    interlocuteur,
    setInterlocuteur,
    role,
    setRole,
    proposedMeds,
    proposedInput,
    setProposedInput,
    showSuggestions,
    setShowSuggestions,
    filteredProducts,
    addProposedMed,
    removeProposedMed,
    interestedMed,
    setInterestedMed,
    selectedEtat,
    setSelectedEtat,
    showEtatList,
    setShowEtatList,
    resultList,
    addResult,
    removeResult,
    notes,
    setNotes,
    imageUri,
    pickImage,
    audioUri,
    audioDuration,
    isRecording,
    isPaused,
    pauseRecording,
    resumeRecording,
    recordingSeconds,
    startRecording,
    stopRecording,
    removeAudio,
    clearLocalForm,
  } = useAutreVisitForm(listing.id, elapsed);

  const [dialogVisible, setDialogVisible] = useState(false);
  const [dialogConfig, setDialogConfig] = useState({
    title: '',
    message: '',
    type: 'info' as 'info' | 'success' | 'warning',
    confirmText: 'Oui',
    cancelText: 'Non',
    onConfirm: () => {},
    onCancel: () => {},
  });

  const showSuggestionsAnimated = () => {
    setShowSuggestions(true);
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 150,
      useNativeDriver: true,
    }).start();
  };

  const hideSuggestions = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 100,
      useNativeDriver: true,
    }).start(() => setShowSuggestions(false));

    Keyboard.dismiss();
  };

  const handleAddProposed = (name: string) => {
    const result = addProposedMed(name);

    if (result?.error === 'MAX_REACHED') {
      setDialogConfig({
        title: 'Limite atteinte ⚠️',
        message:
          'Vous ne pouvez pas proposer plus de 4 produits.\n\nVeuillez prioriser les produits les plus pertinents.',
        type: 'warning',
        confirmText: 'Compris',
        cancelText: '',
        onConfirm: () => setDialogVisible(false),
        onCancel: () => setDialogVisible(false),
      });
      setDialogVisible(true);
    }
  };

  const validateForm = () => {
    const notesError = validateVisitNotes(notes);
    if (notesError) {
      setDialogConfig({
        title: 'Notes insuffisantes ⚠️',
        message: notesError,
        type: 'warning',
        confirmText: 'OK',
        cancelText: '',
        onConfirm: () => setDialogVisible(false),
        onCancel: () => setDialogVisible(false),
      });
      setDialogVisible(true);
      return false;
    }

    const medsError = validateProposedMedicines(proposedMeds);
    if (medsError) {
      setDialogConfig({
        title: 'Produits présentés ⚠️',
        message: medsError,
        type: 'warning',
        confirmText: 'OK',
        cancelText: '',
        onConfirm: () => setDialogVisible(false),
        onCancel: () => setDialogVisible(false),
      });
      setDialogVisible(true);
      return false;
    }

    return true;
  };

  const successMessage = (result: Awaited<ReturnType<typeof submitVisit>>) => {
    if (result.report === 'queued') {
      return 'Hors connexion : les informations sont enregistrées sur le téléphone et seront envoyées automatiquement dès le retour du réseau.';
    }
    if (result.audio === 'queued') {
      return "Les informations sont enregistrées. L'audio sera envoyé automatiquement dès que possible.";
    }
    return adminPending
      ? 'Les informations ont été enregistrées. Validation admin en cours.'
      : 'Les informations ont été enregistrées avec succès.';
  };

  const submitVisit = () => {
    const payload: Record<string, any> = {
      listing_id: listing.id,
      visite_type: visitType,
      user_accompagnant_id,
      admin_pending: adminPending,
      user_position: userPos,
      has_ticket: hasTicket,
      interlocuteur: listing.type !== 'prive' ? interlocuteur : undefined,
      role: listing.type !== 'prive' ? role : undefined,
      elapsed_time: displayedTime,
      proposed_meds: proposedMeds,
      results: resultList,
      notes,
      status: isFar ? 'distante' : 'valide',
      ...(isFar ? { far_reason: farReason, far_explanation: farExplanation } : {}),
    };

    // GPS toujours joint (cache prêt), jamais bloquant ; hors-ligne => file d'attente automatique
    return submitVisitReport({
      listingId: listing.id,
      payload,
      imageUri,
      audioUri,
      audioDuration,
    });
  };

  const handleValidate = async () => {
    if (!validateForm()) return;

    setDialogConfig({
      title: 'Confirmer la validation',
      message: 'Voulez-vous valider cette visite ?',
      type: 'info',
      confirmText: 'Oui',
      cancelText: 'Non',
      onConfirm: async () => {
        setDialogVisible(false);

        try {
          const result = await submitVisit();
          await clearLocalForm();

          setValidated(true);

          setDialogConfig({
            title: 'Visite validée ✅',
            message: successMessage(result),
            type: 'success',
            confirmText: 'OK',
            cancelText: '',
            onConfirm: async () => {
              setDialogVisible(false);
              await onValidated?.();
            },
            onCancel: () => setDialogVisible(false),
          });

          setTimeout(() => setDialogVisible(true), 200);
        } catch (error: any) {
          setDialogConfig({
            title: 'Erreur réseau ⚠️',
            message:
              error?.response?.data?.message ||
              'Impossible d’enregistrer cette visite.',
            type: 'warning',
            confirmText: 'OK',
            cancelText: '',
            onConfirm: () => setDialogVisible(false),
            onCancel: () => setDialogVisible(false),
          });

          setDialogVisible(true);
        }
      },
      onCancel: () => setDialogVisible(false),
    });

    setDialogVisible(true);
  };

  return (
    <TouchableWithoutFeedback
      onPress={() => {
        hideSuggestions();
        setShowEtatList(false);
      }}
    >
      <SafeAreaView style={styles.safe}>
      

        <KeyboardAvoidingView
          behavior={Platform.OS === 'android' ? undefined : 'padding'}
          style={{ flex: 1 }}
        >
          <ScrollView
            contentContainerStyle={styles.content}
            keyboardShouldPersistTaps="handled"
          >
            <View style={styles.titleRow}>
              <Text style={[styles.title, { flex: 1, marginBottom: 0 }]}>{listing.title}</Text>
              <VisitHistoryButton listingId={listing.id} />
            </View>

            {listing.type.toLowerCase() !== 'prive' && (
              <>
                <Text style={styles.label}>👤 Professionnel de santé rencontré </Text>
                <TextInput
                  placeholder="Nom de la personne rencontrée"
                  style={styles.input}
                  value={interlocuteur}
                  onChangeText={setInterlocuteur}
                />

                <Text style={[styles.label, { marginTop: 8 }]}>🎓 Statut</Text>
                <TextInput
                  placeholder="Qualité (ex : qualité du praticien)"
                  style={styles.input}
                  value={role}
                  onChangeText={setRole}
                />
              </>
            )}


              <ProposedMedicinesSection
                title="💊 Produits présentés"
                proposedMeds={proposedMeds}
                proposedInput={proposedInput}
                onChangeInput={setProposedInput}
                onFocusInput={showSuggestionsAnimated}
                showSuggestions={showSuggestions}
                fadeAnim={fadeAnim}
                filteredProducts={filteredProducts}
                onAdd={handleAddProposed}
                onRemove={removeProposedMed}
                placeholder="Ajouter un produit pharmaceutique"
              />

       

            <Text style={styles.sectionTitle}>📝 Notes</Text>
            <TextInput
              placeholder="Ajouter des remarques..."
              style={[styles.input, styles.notesInput]}
              value={notes}
              onChangeText={setNotes}
              multiline
            />

            <VisitImagePicker imageUri={imageUri} onPickImage={pickImage} />

            <VisitAudioRecorder
              audioUri={audioUri}
              audioDuration={audioDuration}
              isRecording={isRecording}
              isPaused={isPaused}
              recordingSeconds={recordingSeconds}
              onStart={startRecording}
              onPause={pauseRecording}
              onResume={resumeRecording}
              onStop={stopRecording}
              onRemove={removeAudio}
            />
          </ScrollView>

          <View style={styles.footer}>
            <TouchableOpacity style={styles.validateBtn} onPress={handleValidate}>
              <Text style={styles.validateText}>Valider la visite</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>

        <CustomDialog
          visible={dialogVisible}
          title={dialogConfig.title}
          message={dialogConfig.message}
          confirmText={dialogConfig.confirmText}
          cancelText={dialogConfig.cancelText}
          onConfirm={dialogConfig.onConfirm}
          onCancel={dialogConfig.onCancel}
        />
      </SafeAreaView>
    </TouchableWithoutFeedback>
  );
};

export default AutreView;

const styles = StyleSheet.create({
  titleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  safe: {
    flex: 1,
    backgroundColor: '#F8F9FA',
  },
  timerHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#E8F0FE',
    paddingVertical: 8,
    marginHorizontal: 10,
    marginTop: 8,
    borderRadius: 10,
  },
  timerText: {
    color: '#1A73E8',
    fontWeight: '700',
    fontSize: 15,
    marginLeft: 6,
  },
  content: {
    padding: 16,
    paddingBottom: 120,
  },
  title: {
    fontWeight: '500',
    fontSize: 20,
    marginBottom: 16,
    color: '#202124',
  },
  sectionTitle: {
    marginTop: 20,
    fontWeight: '700',
    fontSize: 15,
    color: '#202124',
  },
  label: {
    marginTop: 12,
    fontWeight: '600',
    color: '#5F6368',
  },
  input: {
    borderWidth: 1,
    borderColor: '#DADCE0',
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 14,
    marginTop: 6,
    color: '#202124',
  },
  notesInput: {
    height: 80,
    textAlignVertical: 'top',
  },
  footer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#FFFFFF',
    padding: 16,
    borderTopWidth: 1,
    borderTopColor: '#DADCE0',
  },
  validateBtn: {
    backgroundColor: '#1A73E8',
    borderRadius: 100,
    paddingVertical: 14,
    alignItems: 'center',
  },
  validateText: {
    color: '#FFFFFF',
    fontWeight: '500',
    fontSize: 16,
  },
});