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 { useCodexUsage } from "@/hooks/useCodexUsage";
import { SectionCard } from "@/components/SectionCard";
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={["bottom"]}>
      <ScrollView
        className="flex-1 px-4 pt-4"
        refreshControl={
          <RefreshControl
            refreshing={status === "loading"}
            onRefresh={refresh}
            tintColor="#10a37f"
          />
        }
        contentContainerStyle={{ paddingBottom: 32 }}
      >
        {/* Configure */}
        <SectionCard title="Configuration">
          <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">
                <View className="w-2 h-2 rounded-full bg-green-500" />
                <Text className="text-sm text-neutral-700 dark:text-neutral-300">
                  Configured
                </Text>
                {auth.accountId && (
                  <Text className="text-xs text-neutral-400">
                    ({auth.accountId.slice(0, 8)}…)
                  </Text>
                )}
              </View>
              <TouchableOpacity
                onPress={clearAuth}
                className="px-3 py-1.5 rounded-lg bg-neutral-100 dark:bg-neutral-800"
              >
                <Text className="text-sm text-neutral-600 dark:text-neutral-300">
                  Clear
                </Text>
              </TouchableOpacity>
            </View>
          ) : (
            <View>
              <TouchableOpacity
                onPress={importAuthFile}
                className="flex-row items-center justify-center gap-x-2 py-3 px-4 rounded-xl bg-brand-codex"
              >
                <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>
          )}
        </SectionCard>

        {/* Usage */}
        <SectionCard title="Usage">
          {status === "idle" && !auth && (
            <Text className="text-sm text-neutral-400 text-center py-4">
              Import your auth.json to see usage
            </Text>
          )}
          {status === "loading" && (
            <ActivityIndicator color="#10a37f" className="py-4" />
          )}
          {status === "error" && error && (
            <ErrorMessage message={error} />
          )}
          {status === "success" && usage && (
            <View>
              {/* Plan badge */}
              <View className="flex-row items-center mb-4">
                <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-2 p-3 rounded-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700">
                <Text className="text-xs font-semibold uppercase tracking-widest text-neutral-400 mb-2">
                  Credits
                </Text>
                {usage.credits.unlimited ? (
                  <Text className="text-sm font-medium text-green-600 dark:text-green-400">
                    Unlimited
                  </Text>
                ) : 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>
          )}
        </SectionCard>
      </ScrollView>
    </SafeAreaView>
  );
}