import React, { useState } from "react";
import {
  ActivityIndicator,
  Alert,
  Image,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from "react-native";
import { CameraView, type BarcodeScanningResult, useCameraPermissions } from "expo-camera";
import type { SavedInstance } from "../../core/instancesService";

type Props = {
  appDisplayName: string;
  brandColor: string;
  logoUrl: string | null;
  instanceUrl: string;
  onboardingError: string | null;
  validatingInstance: boolean;
  onChangeInstanceUrl: (value: string) => void;
  onSaveEnvironment: () => void;
  onScanPayload: (raw: string) => Promise<void>;
  savedInstances: SavedInstance[];
  onSelectInstance: (entry: SavedInstance) => void;
  onRemoveInstance: (baseUrl: string) => void;
};

export default function OnboardingScreen(props: Readonly<Props>) {
  const {
    appDisplayName,
    brandColor,
    logoUrl,
    instanceUrl,
    onboardingError,
    validatingInstance,
    onChangeInstanceUrl,
    onSaveEnvironment,
    onScanPayload,
    savedInstances,
    onSelectInstance,
    onRemoveInstance,
  } = props;

  const confirmRemove = (entry: SavedInstance) => {
    Alert.alert(
      "Retirer cette instance ?",
      `${entry.app_name || entry.base_url} sera retiree de la liste. Tu pourras la rajouter via QR/lien.`,
      [
        { text: "Annuler", style: "cancel" },
        { text: "Retirer", style: "destructive", onPress: () => onRemoveInstance(entry.base_url) },
      ]
    );
  };

  const [showQrScanner, setShowQrScanner] = useState(false);
  const [qrLocked, setQrLocked] = useState(false);
  const [cameraPermission, requestCameraPermission] = useCameraPermissions();

  const openScanner = async () => {
    if (!cameraPermission?.granted) {
      const permission = await requestCameraPermission();
      if (!permission.granted) {
        return;
      }
    }
    setQrLocked(false);
    setShowQrScanner(true);
  };

  const onBarcodeScanned = async (event: BarcodeScanningResult) => {
    if (qrLocked) {
      return;
    }
    setQrLocked(true);
    await onScanPayload(event.data);
  };

  return (
    <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">
      {logoUrl ? <Image source={{ uri: logoUrl }} style={styles.brandLogo} /> : null}
      <Text style={[styles.title, { color: brandColor }]}>{appDisplayName}</Text>
      <Text style={styles.subtitle}>
        Renseigne l'URL mobile de ton instance ou scanne le QR code de l'admin.
      </Text>

      {savedInstances.length > 0 ? (
        <View style={styles.savedBlock}>
          <Text style={styles.savedTitle}>Mes instances</Text>
          {savedInstances.map((entry) => (
            <View key={entry.base_url} style={[styles.savedRow, { borderLeftColor: entry.primary_color || brandColor }]}>
              <Pressable
                style={styles.savedMain}
                onPress={() => onSelectInstance(entry)}
                disabled={validatingInstance}
              >
                <Text style={styles.savedName}>{entry.app_name || entry.base_url}</Text>
                <Text style={styles.savedSub} numberOfLines={1}>
                  {entry.last_email ? `${entry.last_email} · ` : ""}
                  {entry.base_url}
                </Text>
              </Pressable>
              <Pressable style={styles.savedRemove} onPress={() => confirmRemove(entry)} hitSlop={8}>
                <Text style={styles.savedRemoveText}>✕</Text>
              </Pressable>
            </View>
          ))}
          <Text style={styles.savedHint}>Ou ajoute une nouvelle instance ci-dessous.</Text>
        </View>
      ) : null}

      <TextInput
        style={styles.input}
        placeholder="https://instance.example.com/api/mobile"
        value={instanceUrl}
        autoCapitalize="none"
        autoCorrect={false}
        keyboardType="url"
        onChangeText={onChangeInstanceUrl}
      />

      {onboardingError ? <Text style={styles.error}>{onboardingError}</Text> : null}

      <View style={styles.actions}>
        <Pressable
          style={[styles.secondaryButton, validatingInstance && styles.buttonDisabled]}
          onPress={openScanner}
          disabled={validatingInstance}
        >
          <Text style={styles.secondaryButtonText}>Scanner QR</Text>
        </Pressable>
        <Pressable
          style={[styles.primaryButton, { backgroundColor: brandColor }, validatingInstance && styles.buttonDisabled]}
          onPress={onSaveEnvironment}
          disabled={validatingInstance}
        >
          <Text style={styles.primaryButtonText}>
            {validatingInstance ? "Validation..." : "Enregistrer URL"}
          </Text>
        </Pressable>
      </View>

      {validatingInstance ? (
        <View style={styles.inlineLoader}>
          <ActivityIndicator size="small" />
          <Text style={styles.mutedText}>Validation de l'instance...</Text>
        </View>
      ) : null}

      {showQrScanner ? (
        <View style={styles.qrScannerWrap}>
          <CameraView
            style={styles.qrScanner}
            facing="back"
            onBarcodeScanned={onBarcodeScanned}
            barcodeScannerSettings={{ barcodeTypes: ["qr"] }}
          />
          <Pressable
            style={styles.secondaryButton}
            onPress={() => {
              setQrLocked(false);
              setShowQrScanner(false);
            }}
          >
            <Text style={styles.secondaryButtonText}>Fermer le scanner</Text>
          </Pressable>
        </View>
      ) : null}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { gap: 12, padding: 16 },
  title: { fontSize: 22, fontWeight: "700" },
  subtitle: { color: "#6a7a96" },
  savedBlock: { gap: 8 },
  savedTitle: { fontSize: 14, fontWeight: "800", color: "#16325c" },
  savedRow: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#ffffff",
    borderWidth: 1,
    borderColor: "#d8e4f6",
    borderLeftWidth: 4,
    borderRadius: 10,
    paddingVertical: 10,
    paddingHorizontal: 12,
    gap: 8,
  },
  savedMain: { flex: 1, gap: 2 },
  savedName: { fontSize: 15, fontWeight: "700", color: "#16325c" },
  savedSub: { fontSize: 12, color: "#6a7a96" },
  savedRemove: {
    width: 30,
    height: 30,
    borderRadius: 15,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#f1f5f9",
  },
  savedRemoveText: { color: "#64748b", fontWeight: "800", fontSize: 13 },
  savedHint: { fontSize: 12, color: "#6a7a96", marginTop: 2 },
  brandLogo: { width: 56, height: 56, borderRadius: 10, backgroundColor: "#f1f5f9" },
  input: {
    borderWidth: 1,
    borderColor: "#c5d2e5",
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 10,
    backgroundColor: "#fbfdff",
  },
  error: { color: "#b00020" },
  actions: { flexDirection: "row", gap: 10 },
  primaryButton: { flex: 1, borderRadius: 10, alignItems: "center", paddingVertical: 10 },
  primaryButtonText: { color: "#ffffff", fontWeight: "700" },
  secondaryButton: {
    flex: 1,
    backgroundColor: "#edf3ff",
    borderRadius: 10,
    alignItems: "center",
    paddingVertical: 10,
  },
  secondaryButtonText: { color: "#1e56a8", fontWeight: "600" },
  buttonDisabled: { opacity: 0.5 },
  inlineLoader: { flexDirection: "row", alignItems: "center", gap: 8 },
  mutedText: { color: "#6a7a96" },
  qrScannerWrap: {
    borderWidth: 1,
    borderColor: "#d8e4f6",
    borderRadius: 10,
    overflow: "hidden",
    backgroundColor: "#f8fbff",
    gap: 8,
    paddingBottom: 8,
  },
  qrScanner: { width: "100%", minHeight: 260 },
});