codexbar-mobile/app/(tabs)/codex.tsx

import {
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  RefreshControl,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { MaterialIcons } from "@expo/vector-icons";
import { useCodexUsage } from "@/hooks/useCodexUsage";
import { UsageStat } from "@/components/UsageStat";
import { ErrorMessage } from "@/components/ErrorMessage";
import { windowLabel } from "@/lib/timeUtils";

export default function CodexTab() {
  const { auth, usage, status, error, importAuthFile, refresh, clearAuth } =
    useCodexUsage();

  return (
    <SafeAreaView
      className="flex-1 bg-neutral-50 dark:bg-neutral-950"
      edges={["top", "bottom"]}
    >
      <ScrollView
        className="flex-1"
        contentContainerStyle={{ paddingHorizontal: 16, paddingBottom: 32 }}
        refreshControl={
          <RefreshControl
            refreshing={status === "loading"}
            onRefresh={refresh}
            tintColor="#10a37f"
          />
        }
      >
        {/* Header */}
        <View className="flex-row items-center gap-x-3 py-5">
          <View
            className="w-9 h-9 rounded-xl items-center justify-center"
            style={{ backgroundColor: "#10a37f22" }}
          >
            <MaterialIcons name="auto-awesome" size={18} color="#10a37f" />
          </View>
          <View>
            <Text className="text-xl font-bold text-neutral-900 dark:text-white tracking-tight">
              Codex CLI
            </Text>
            <Text className="text-xs text-neutral-400 mt-0.5">
              Rate limits & credits
            </Text>
          </View>
        </View>

        {/* Configuration card */}
        <View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4 mb-4">
          <Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 mb-3">
            Configuration
          </Text>
          <ErrorMessage message={error && status === "idle" ? error : null} />
          {auth ? (
            <View className="flex-row items-center justify-between">
              <View className="flex-row items-center gap-x-2.5">
                <View className="w-2 h-2 rounded-full bg-green-500" />
                <Text className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
                  Connected
                </Text>
                {auth.accountId && (
                  <Text className="text-xs text-neutral-400 dark:text-neutral-500 font-mono">
                    {auth.accountId.slice(0, 10)}…
                  </Text>
                )}
              </View>
              <TouchableOpacity
                onPress={clearAuth}
                className="px-3 py-1.5 rounded-lg bg-neutral-100 dark:bg-neutral-800"
              >
                <Text className="text-xs font-medium text-neutral-500 dark:text-neutral-400">
                  Clear
                </Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View>
              <TouchableOpacity
                onPress={importAuthFile}
                className="flex-row items-center justify-center gap-x-2 py-3.5 px-4 rounded-xl"
                style={{ backgroundColor: "#10a37f" }}
              >
                <MaterialIcons name="upload-file" size={16} color="white" />
                <Text className="text-white font-semibold text-sm">
                  Import auth.json
                </Text>
              </TouchableOpacity>
              <Text className="text-xs text-neutral-400 text-center mt-2">
                Located at ~/.codex/auth.json
              </Text>
            </View>
          )}
        </View>

        {/* Usage card */}
        <View className="bg-white dark:bg-neutral-900 rounded-2xl border border-neutral-200 dark:border-neutral-800 p-4">
          <Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 mb-3">
            Usage
          </Text>

          {status === "idle" && !auth && (
            <View className="items-center py-8">
              <MaterialIcons name="insert-chart-outlined" size={32} color="#d4d4d4" />
              <Text className="text-sm text-neutral-400 text-center mt-3">
                Import auth.json to see your rate limits
              </Text>
            </View>
          )}
          {status === "loading" && (
            <ActivityIndicator color="#10a37f" style={{ marginVertical: 24 }} />
          )}
          {status === "error" && error && <ErrorMessage message={error} />}
          {status === "success" && usage && (
            <View>
              {/* Plan badge */}
              <View className="flex-row items-center mb-5">
                <View className="px-2.5 py-1 rounded-full bg-green-100 dark:bg-green-900/40">
                  <Text className="text-xs font-semibold text-green-700 dark:text-green-300 capitalize">
                    {usage.plan_type}
                  </Text>
                </View>
              </View>

              <UsageStat
                label={`Primary (${windowLabel(usage.rate_limit.primary_window.limit_window_seconds)})`}
                percent={usage.rate_limit.primary_window.used_percent}
                resetAtSeconds={usage.rate_limit.primary_window.reset_at}
              />
              <UsageStat
                label={`Secondary (${windowLabel(usage.rate_limit.secondary_window.limit_window_seconds)})`}
                percent={usage.rate_limit.secondary_window.used_percent}
                resetAtSeconds={usage.rate_limit.secondary_window.reset_at}
              />

              {/* Credits */}
              <View className="mt-1 p-3.5 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-700">
                <Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 mb-2">
                  Credits
                </Text>
                {usage.credits.unlimited ? (
                  <View className="flex-row items-center gap-x-2">
                    <MaterialIcons name="all-inclusive" size={16} color="#10a37f" />
                    <Text className="text-sm font-semibold text-green-600 dark:text-green-400">
                      Unlimited
                    </Text>
                  </View>
                ) : usage.credits.has_credits ? (
                  <Text className="text-sm font-semibold text-neutral-900 dark:text-white">
                    ${Number(usage.credits.balance).toFixed(2)} remaining
                  </Text>
                ) : (
                  <Text className="text-sm text-neutral-400">No credits</Text>
                )}
              </View>
            </View>
          )}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}