tv-control/mobile/src/instanceUrl.tsx

import * as SecureStore from "expo-secure-store";
import React, {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useState,
} from "react";
import {
  ActivityIndicator,
  KeyboardAvoidingView,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { colors } from "./styles";

const STORE_KEY = "instance_url";

// ─── Context ──────────────────────────────────────────────────────────────────

interface InstanceUrlContextValue {
  baseUrl: string;
  /** Call to clear the stored URL and re-show the setup screen. */
  resetUrl: () => void;
}

const InstanceUrlContext = createContext<InstanceUrlContextValue | null>(null);

export function useBaseUrl(): InstanceUrlContextValue {
  const ctx = useContext(InstanceUrlContext);
  if (!ctx) throw new Error("useBaseUrl must be used inside <InstanceUrlProvider>");
  return ctx;
}

// ─── Validation helper ────────────────────────────────────────────────────────

async function validateUrl(url: string): Promise<void> {
  const trimmed = url.replace(/\/+$/, "");
  const res = await fetch(`${trimmed}/pull_full`, { method: "POST" });
  if (!res.ok) throw new Error(`Server returned ${res.status}`);
  const data = await res.json();
  if (typeof data !== "object" || data === null || !("state" in data)) {
    throw new Error("Unexpected response format");
  }
}

// ─── Setup screen ─────────────────────────────────────────────────────────────

function SetupScreen({ onSaved }: { onSaved: (url: string) => void }) {
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSave = async () => {
    const trimmed = input.trim().replace(/\/+$/, "");
    if (!trimmed) {
      setError("Please enter a URL.");
      return;
    }
    setError(null);
    setLoading(true);
    try {
      await validateUrl(trimmed);
      await SecureStore.setItemAsync(STORE_KEY, trimmed);
      onSaved(trimmed);
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : String(e);
      setError(`Could not connect: ${msg}`);
    } finally {
      setLoading(false);
    }
  };

  return (
    <KeyboardAvoidingView
      style={styles.screen}
      behavior={Platform.OS === "ios" ? "padding" : undefined}
    >
      <View style={styles.card}>
        <Text style={styles.title}>Server Setup</Text>
        <Text style={styles.body}>
          Enter your instance URL to get started. The app will verify it before
          saving.
        </Text>

        <TextInput
          style={[styles.input, !!error && styles.inputError]}
          placeholder="https://your-instance/api/exec/…"
          placeholderTextColor={colors.textMuted}
          autoCapitalize="none"
          autoCorrect={false}
          keyboardType="url"
          value={input}
          onChangeText={(t) => { setInput(t); setError(null); }}
          editable={!loading}
        />

        {error && <Text style={styles.errorText}>{error}</Text>}

        <TouchableOpacity
          style={[styles.button, loading && styles.buttonDisabled]}
          onPress={handleSave}
          disabled={loading}
          activeOpacity={0.8}
        >
          {loading ? (
            <ActivityIndicator color="#fff" />
          ) : (
            <Text style={styles.buttonText}>Validate &amp; Save</Text>
          )}
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
}

// ─── Provider ─────────────────────────────────────────────────────────────────

export function InstanceUrlProvider({ children }: { children: React.ReactNode }) {
  const [baseUrl, setBaseUrl] = useState<string | null>(null); // null = loading
  const [configured, setConfigured] = useState(false);

  // Load from storage on mount
  useEffect(() => {
    SecureStore.getItemAsync(STORE_KEY)
      .then((stored) => {
        if (stored) {
          setBaseUrl(stored);
          setConfigured(true);
        } else {
          setBaseUrl(""); // not configured
          setConfigured(false);
        }
      })
      .catch(() => {
        setBaseUrl("");
        setConfigured(false);
      });
  }, []);

  const resetUrl = useCallback(async () => {
    await SecureStore.deleteItemAsync(STORE_KEY);
    setBaseUrl("");
    setConfigured(false);
  }, []);

  const handleSaved = useCallback((url: string) => {
    setBaseUrl(url);
    setConfigured(true);
  }, []);

  // Still loading from storage
  if (baseUrl === null) {
    return (
      <View style={styles.screen}>
        <ActivityIndicator size="large" color={colors.accent} />
      </View>
    );
  }

  if (!configured) {
    return <SetupScreen onSaved={handleSaved} />;
  }

  return (
    <InstanceUrlContext.Provider value={{ baseUrl: baseUrl!, resetUrl }}>
      {children}
    </InstanceUrlContext.Provider>
  );
}

// ─── Styles ───────────────────────────────────────────────────────────────────

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: colors.bg,
    alignItems: "center",
    justifyContent: "center",
    padding: 24,
  },
  card: {
    backgroundColor: colors.surface,
    borderRadius: 16,
    padding: 24,
    width: "100%",
    maxWidth: 480,
  },
  title: {
    fontSize: 32,
    fontWeight: "800",
    color: colors.textPrimary,
    marginTop: 8,
    marginBottom: 8,
  },
  body: {
    color: colors.textSecondary,
    fontSize: 14,
    lineHeight: 20,
    marginBottom: 20,
  },
  input: {
    backgroundColor: colors.bg,
    borderWidth: 1,
    borderColor: colors.border,
    borderRadius: 8,
    color: colors.textPrimary,
    fontSize: 14,
    paddingHorizontal: 12,
    paddingVertical: 10,
    marginBottom: 12,
  },
  inputError: {
    borderColor: "#e55",
  },
  errorText: {
    color: "#e55",
    fontSize: 13,
    marginBottom: 12,
  },
  button: {
    backgroundColor: colors.accent,
    borderRadius: 8,
    paddingVertical: 12,
    alignItems: "center",
  },
  buttonDisabled: {
    opacity: 0.5,
  },
  buttonText: {
    color: "#fff",
    fontWeight: "600",
    fontSize: 15,
  },
});