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

import {
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  TextInput,
  ActivityIndicator,
  RefreshControl,
  KeyboardAvoidingView,
  Platform,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { useClaudeUsage } from "@/hooks/useClaudeUsage";
import { SectionCard } from "@/components/SectionCard";
import { UsageStat } from "@/components/UsageStat";
import { ErrorMessage } from "@/components/ErrorMessage";

export default function ClaudeTab() {
  const {
    sessionKey,
    pendingKey,
    setPendingKey,
    usage,
    status,
    error,
    saveKey,
    refresh,
    clearKey,
  } = useClaudeUsage();

  const canSave = pendingKey.trim().startsWith("sk-ant-");

  return (
    <SafeAreaView className="flex-1 bg-neutral-50 dark:bg-neutral-950" edges={["bottom"]}>
      <KeyboardAvoidingView
        className="flex-1"
        behavior={Platform.OS === "ios" ? "padding" : "height"}
      >
        <ScrollView
          className="flex-1 px-4 pt-4"
          keyboardShouldPersistTaps="handled"
          refreshControl={
            <RefreshControl
              refreshing={status === "loading"}
              onRefresh={refresh}
              tintColor="#d97706"
            />
          }
          contentContainerStyle={{ paddingBottom: 32 }}
        >
          {/* Configure */}
          <SectionCard title="Configuration">
            <ErrorMessage
              message={error && (status === "idle" || status === "error") ? error : null}
            />
            {sessionKey ? (
              <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>
                </View>
                <TouchableOpacity
                  onPress={clearKey}
                  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>
                <TextInput
                  value={pendingKey}
                  onChangeText={setPendingKey}
                  placeholder="sk-ant-..."
                  placeholderTextColor="#a3a3a3"
                  autoCapitalize="none"
                  autoCorrect={false}
                  className="border border-neutral-200 dark:border-neutral-700 rounded-xl px-3 py-2.5 text-sm text-neutral-900 dark:text-white bg-white dark:bg-neutral-800 mb-3"
                />
                <TouchableOpacity
                  onPress={saveKey}
                  disabled={!canSave}
                  className={`py-3 px-4 rounded-xl ${
                    canSave ? "bg-amber-500" : "bg-neutral-200 dark:bg-neutral-700"
                  }`}
                >
                  <Text
                    className={`text-center font-semibold text-sm ${
                      canSave ? "text-white" : "text-neutral-400"
                    }`}
                  >
                    Save Session Key
                  </Text>
                </TouchableOpacity>
                <Text className="text-xs text-neutral-400 mt-2">
                  Chrome DevTools → Application → Cookies → claude.ai → sessionKey
                </Text>
              </View>
            )}
          </SectionCard>

          {/* Usage */}
          <SectionCard title="Usage">
            {status === "idle" && !sessionKey && (
              <Text className="text-sm text-neutral-400 text-center py-4">
                Enter your Claude session key to see usage
              </Text>
            )}
            {status === "loading" && (
              <ActivityIndicator color="#d97706" className="py-4" />
            )}
            {status === "error" && error && <ErrorMessage message={error} />}
            {status === "success" && usage && (
              <View>
                <UsageStat
                  label="5-hour window"
                  percent={usage.five_hour.utilization}
                  resetAtISO={usage.five_hour.resets_at}
                />

                <UsageStat
                  label="7-day window"
                  percent={usage.seven_day.utilization}
                  resetAtISO={usage.seven_day.resets_at}
                />

                {(usage.seven_day_sonnet || usage.seven_day_opus) && (
                  <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-3">
                      By Model (7-day)
                    </Text>
                    {usage.seven_day_sonnet && (
                      <UsageStat
                        label="Sonnet"
                        percent={usage.seven_day_sonnet.utilization}
                      />
                    )}
                    {usage.seven_day_opus && (
                      <UsageStat
                        label="Opus"
                        percent={usage.seven_day_opus.utilization}
                      />
                    )}
                  </View>
                )}
              </View>
            )}
          </SectionCard>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}