import { useCallback, useMemo, useRef, useState } from "react";
import { Alert, Pressable, Text, TextInput, View } from "react-native";
import { StyleSheet, UnistylesRuntime, useUnistyles } from "react-native-unistyles";
import { BottomSheetTextInput } from "@gorhom/bottom-sheet";
import { Link2 } from "lucide-react-native";
import { useDaemonRegistry, type HostProfile } from "@/contexts/daemon-registry-context";
import { normalizeHostPort } from "@/utils/daemon-endpoints";
import { DaemonConnectionTestError, testDaemonEndpointConnection } from "@/utils/test-daemon-connection";
import { AdaptiveModalSheet } from "./adaptive-modal-sheet";

const styles = StyleSheet.create((theme) => ({
  field: {
    gap: theme.spacing[2],
  },
  label: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.sm,
    fontWeight: theme.fontWeight.medium,
  },
  input: {
    backgroundColor: theme.colors.surface2,
    borderRadius: theme.borderRadius.lg,
    paddingHorizontal: theme.spacing[4],
    paddingVertical: theme.spacing[3],
    color: theme.colors.foreground,
    borderWidth: 1,
    borderColor: theme.colors.border,
  },
  actions: {
    flexDirection: "row",
    gap: theme.spacing[3],
    marginTop: theme.spacing[2],
  },
  button: {
    flex: 1,
    paddingVertical: theme.spacing[3],
    borderRadius: theme.borderRadius.lg,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: theme.colors.surface2,
  },
  primaryButton: {
    backgroundColor: theme.colors.palette.blue[500],
  },
  buttonText: {
    color: theme.colors.foreground,
    fontWeight: theme.fontWeight.semibold,
  },
  primaryButtonText: {
    color: theme.colors.palette.white,
  },
  helper: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.sm,
  },
  error: {
    color: theme.colors.destructive,
    fontSize: theme.fontSize.sm,
  },
  connectRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    gap: theme.spacing[2],
  },
}));

function isHostPortOnly(raw: string): boolean {
  return !raw.includes("://") && !raw.includes("/");
}

function normalizeTransportMessage(message: string | null | undefined): string | null {
  if (!message) return null;
  const trimmed = message.trim();
  if (!trimmed) return null;
  return trimmed;
}

function formatTechnicalTransportDetails(details: Array<string | null>): string | null {
  const unique = Array.from(
    new Set(
      details
        .map((value) => normalizeTransportMessage(value))
        .filter((value): value is string => Boolean(value))
        .map((value) => value.trim())
        .filter((value) => value.length > 0)
    )
  );

  if (unique.length === 0) return null;

  const allGeneric = unique.every((value) => {
    const lower = value.toLowerCase();
    return lower === "transport error" || lower === "transport closed";
  });

  if (allGeneric) {
    return `${unique[0]} (no additional details provided)`;
  }

  return unique.join(" — ");
}

function buildConnectionFailureCopy(endpoint: string, error: unknown): { title: string; detail: string | null; raw: string | null } {
  const title = `We failed to connect to ${endpoint}.`;

  const raw = (() => {
    if (error instanceof DaemonConnectionTestError) {
      return (
        formatTechnicalTransportDetails([error.reason, error.lastError]) ??
        normalizeTransportMessage(error.message)
      );
    }
    if (error instanceof Error) {
      return normalizeTransportMessage(error.message);
    }
    return null;
  })();

  const rawLower = raw?.toLowerCase() ?? "";
  let detail: string | null = null;

  if (rawLower.includes("timed out")) {
    detail = "Connection timed out. Check the host/port and your network.";
  } else if (
    rawLower.includes("econnrefused") ||
    rawLower.includes("connection refused") ||
    rawLower.includes("err_connection_refused")
  ) {
    detail = "Connection was refused. Is the daemon running on that host and port?";
  } else if (rawLower.includes("enotfound") || rawLower.includes("not found")) {
    detail = "Host not found. Check the hostname and try again.";
  } else if (rawLower.includes("ehostunreach") || rawLower.includes("host is unreachable")) {
    detail = "Host is unreachable. Check your network and firewall.";
  } else if (rawLower.includes("certificate") || rawLower.includes("tls") || rawLower.includes("ssl")) {
    detail = "TLS/certificate error. This app expects a daemon reachable over the local network or via relay.";
  } else if (raw) {
    detail = "Unable to connect. Check the host/port and that the daemon is reachable.";
  } else {
    detail = "Unable to connect. Check the host/port and that the daemon is reachable.";
  }

  return { title, detail, raw };
}

export interface AddHostModalProps {
  visible: boolean;
  onClose: () => void;
  onSaved?: (profile: HostProfile) => void;
}

export function AddHostModal({ visible, onClose, onSaved }: AddHostModalProps) {
  const { theme } = useUnistyles();
  const { addDaemon } = useDaemonRegistry();
  const isMobile =
    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";

  const InputComponent = useMemo(() => (isMobile ? BottomSheetTextInput : TextInput), [isMobile]);
  const labelInputRef = useRef<TextInput>(null);
  const hostInputRef = useRef<TextInput>(null);

  const [label, setLabel] = useState("");
  const [endpointRaw, setEndpointRaw] = useState("");
  const [isSaving, setIsSaving] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  const handleClose = useCallback(() => {
    if (isSaving) return;
    setLabel("");
    setEndpointRaw("");
    setErrorMessage("");
    onClose();
  }, [isSaving, onClose]);

  const handleSave = useCallback(async () => {
    if (isSaving) return;

    const raw = endpointRaw.trim();
    if (!raw) {
      setErrorMessage("Host is required");
      return;
    }
    if (!isHostPortOnly(raw)) {
      setErrorMessage("Enter host:port only (no ws://, no /ws)");
      return;
    }

    let endpoint: string;
    try {
      endpoint = normalizeHostPort(raw);
    } catch (error) {
      const message = error instanceof Error ? error.message : "Invalid host:port";
      setErrorMessage(message);
      return;
    }

    try {
      setIsSaving(true);
      setErrorMessage("");

      await testDaemonEndpointConnection(endpoint);

      const profile = await addDaemon({
        label: label.trim(),
        endpoints: [endpoint],
      });

      onSaved?.(profile);
      handleClose();
    } catch (error) {
      const { title, detail, raw } = buildConnectionFailureCopy(endpoint, error);
      const combined =
        raw && detail && raw !== detail
          ? `${title}\n${detail}\nDetails: ${raw}`
          : detail
            ? `${title}\n${detail}`
            : title;
      setErrorMessage(combined);
      if (!isMobile) {
        // Desktop/web: also surface it as a dialog for quick visibility.
        Alert.alert("Connection failed", combined);
      }
    } finally {
      setIsSaving(false);
    }
  }, [addDaemon, endpointRaw, handleClose, isMobile, isSaving, label, onSaved]);

  return (
    <AdaptiveModalSheet title="Direct connection" visible={visible} onClose={handleClose} testID="add-host-modal">
      <Text style={styles.helper}>Connect to a daemon by entering host:port.</Text>

      <View style={styles.field}>
        <Text style={styles.label}>Label (optional)</Text>
        <InputComponent
          ref={labelInputRef as any}
          value={label}
          onChangeText={setLabel}
          placeholder="My Host"
          placeholderTextColor={theme.colors.foregroundMuted}
          style={styles.input}
          autoCapitalize="none"
          autoCorrect={false}
          editable={!isSaving}
          returnKeyType="next"
          blurOnSubmit={false}
          onSubmitEditing={() => hostInputRef.current?.focus()}
        />
      </View>

      <View style={styles.field}>
        <Text style={styles.label}>Host</Text>
        <InputComponent
          ref={hostInputRef as any}
          value={endpointRaw}
          onChangeText={setEndpointRaw}
          placeholder="host:6767"
          placeholderTextColor={theme.colors.foregroundMuted}
          style={styles.input}
          autoCapitalize="none"
          autoCorrect={false}
          keyboardType="url"
          editable={!isSaving}
          returnKeyType="done"
          onSubmitEditing={() => void handleSave()}
        />
        {errorMessage ? <Text style={styles.error}>{errorMessage}</Text> : null}
      </View>

      <View style={styles.actions}>
        <Pressable style={styles.button} onPress={handleClose} disabled={isSaving}>
          <Text style={styles.buttonText}>Cancel</Text>
        </Pressable>
        <Pressable
          style={[styles.button, styles.primaryButton, isSaving ? { opacity: 0.7 } : null]}
          onPress={() => void handleSave()}
          disabled={isSaving}
        >
          <View style={styles.connectRow}>
            <Link2 size={16} color={theme.colors.palette.white} />
            <Text style={[styles.buttonText, styles.primaryButtonText]}>
              {isSaving ? "Connecting..." : "Connect & Save"}
            </Text>
          </View>
        </Pressable>
      </View>
    </AdaptiveModalSheet>
  );
}