timmy-tower/artifacts/mobile/app/(tabs)/matrix.tsx

import { Feather } from "@expo/vector-icons";
import React, { useRef, useState } from "react";
import {
  ActivityIndicator,
  Platform,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
import { WebView } from "react-native-webview";
import { useSafeAreaInsets } from "react-native-safe-area-context";

import { Colors } from "@/constants/colors";

const C = Colors.dark;

function getMatrixUrl(): string {
  const domain = process.env.EXPO_PUBLIC_DOMAIN ?? "";
  if (!domain) return "http://localhost:8080/";
  const stripped = domain.replace(/^https?:\/\//, "").replace(/\/$/, "");
  const proto = stripped.startsWith("localhost") ? "http" : "https";
  return `${proto}://${stripped}/`;
}

export default function MatrixScreen() {
  const insets = useSafeAreaInsets();
  const topPad = Platform.OS === "web" ? 67 : insets.top;
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const webviewRef = useRef<WebView | null>(null);
  const matrixUrl = getMatrixUrl();

  if (Platform.OS === "web") {
    return (
      <View style={[styles.container, { paddingTop: topPad }]}>
        <View style={styles.header}>
          <Text style={styles.title}>The Matrix</Text>
          <Text style={styles.subtitle}>Timmy's 3D command center</Text>
        </View>
        <View style={styles.webContainer}>
          <iframe
            src={matrixUrl}
            style={{ width: "100%", height: "100%", border: "none", borderRadius: 12 }}
            allow="autoplay"
            title="The Matrix"
          />
        </View>
      </View>
    );
  }

  return (
    <View style={[styles.container, { paddingTop: topPad }]}>
      <View style={styles.header}>
        <View>
          <Text style={styles.title}>The Matrix</Text>
          <Text style={styles.subtitle}>Timmy's 3D command center</Text>
        </View>
        <Pressable
          onPress={() => {
            setError(false);
            setLoading(true);
            webviewRef.current?.reload();
          }}
          style={styles.reloadBtn}
        >
          <Feather name="refresh-cw" size={18} color={C.textSecondary} />
        </Pressable>
      </View>

      <View style={styles.webContainer}>
        {loading && !error ? (
          <View style={styles.loadingOverlay}>
            <ActivityIndicator size="large" color={C.matrixGreen} />
            <Text style={styles.loadingText}>Loading The Matrix</Text>
          </View>
        ) : null}

        {error ? (
          <View style={styles.errorContainer}>
            <Feather name="wifi-off" size={40} color={C.textMuted} />
            <Text style={styles.errorTitle}>Matrix Unreachable</Text>
            <Text style={styles.errorSubtitle}>
              The API server may not be running
            </Text>
            <Pressable
              onPress={() => {
                setError(false);
                setLoading(true);
                webviewRef.current?.reload();
              }}
              style={styles.retryBtn}
            >
              <Text style={styles.retryText}>Retry</Text>
            </Pressable>
          </View>
        ) : (
          <WebView
            ref={webviewRef}
            source={{ uri: matrixUrl }}
            style={[styles.webview, loading && styles.hidden]}
            onLoadEnd={() => setLoading(false)}
            onError={() => {
              setLoading(false);
              setError(true);
            }}
            onHttpError={() => {
              setLoading(false);
              setError(true);
            }}
            javaScriptEnabled
            allowsInlineMediaPlayback
            mediaPlaybackRequiresUserAction={false}
            startInLoadingState={false}
          />
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: C.background,
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
    paddingHorizontal: 24,
    paddingTop: 12,
    paddingBottom: 16,
  },
  title: {
    fontSize: 28,
    fontFamily: "Inter_700Bold",
    color: C.text,
    letterSpacing: -0.5,
  },
  subtitle: {
    fontSize: 13,
    fontFamily: "Inter_400Regular",
    color: C.textSecondary,
    marginTop: 2,
  },
  reloadBtn: {
    width: 40,
    height: 40,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 20,
    backgroundColor: C.surface,
    borderWidth: 1,
    borderColor: C.border,
    marginTop: 4,
  },
  webContainer: {
    flex: 1,
    marginHorizontal: 16,
    marginBottom: 16,
    borderRadius: 16,
    overflow: "hidden",
    backgroundColor: "#000",
    borderWidth: 1,
    borderColor: C.border,
  },
  webview: {
    flex: 1,
    backgroundColor: "#000",
  },
  hidden: {
    opacity: 0,
    position: "absolute",
    width: 1,
    height: 1,
  },
  loadingOverlay: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    gap: 16,
    backgroundColor: "#000",
  },
  loadingText: {
    fontSize: 14,
    fontFamily: "Inter_400Regular",
    color: C.matrixGreen,
    letterSpacing: 1,
  },
  errorContainer: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    gap: 12,
    backgroundColor: "#000",
    paddingHorizontal: 32,
  },
  errorTitle: {
    fontSize: 20,
    fontFamily: "Inter_600SemiBold",
    color: C.text,
    marginTop: 8,
  },
  errorSubtitle: {
    fontSize: 14,
    fontFamily: "Inter_400Regular",
    color: C.textSecondary,
    textAlign: "center",
  },
  retryBtn: {
    marginTop: 8,
    paddingHorizontal: 24,
    paddingVertical: 12,
    backgroundColor: C.surface,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: C.border,
  },
  retryText: {
    fontSize: 14,
    fontFamily: "Inter_600SemiBold",
    color: C.text,
  },
});