import { View, Text } from "react-native";

const ERROR_MESSAGES: Record<string, string> = {
  TOKEN_EXPIRED: "Your session token has expired. Please reconfigure.",
  MISSING_ACCESS_TOKEN: "auth.json is missing the accessToken field.",
  INVALID_JSON: "The selected file is not valid JSON.",
  NO_ORGS_FOUND: "No Claude organizations found for this session key.",
  INVALID_CODEX_RESPONSE:
    "Codex returned an unexpected response. The app was kept safe from invalid data.",
  INVALID_CLAUDE_RESPONSE:
    "Claude returned an unexpected usage response. The app was kept safe from invalid data.",
  INVALID_CLAUDE_ORGS_RESPONSE:
    "Claude returned an unexpected organizations response.",
  UNKNOWN_ERROR: "An unknown error occurred. Try refreshing.",
};

function humanize(code: string): string {
  if (code.startsWith("HTTP_ERROR_")) {
    const status = code.replace("HTTP_ERROR_", "");
    if (status === "429") return "Rate limited by the server. Try again shortly.";
    if (status === "500" || status === "502" || status === "503")
      return `Server error (${status}). The service may be down.`;
    return `Unexpected server response (HTTP ${status}).`;
  }
  if (
    code === "Network request failed" ||
    code.includes("fetch") ||
    code.includes("network")
  ) {
    return "Network error. Check your internet connection and try again.";
  }
  return ERROR_MESSAGES[code] ?? `Unexpected error: ${code}`;
}

interface ErrorMessageProps {
  message: string | null;
}

export function ErrorMessage({ message }: ErrorMessageProps) {
  if (!message) return null;

  return (
    <View className="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-xl px-3 py-2.5 mb-3">
      <Text className="text-sm text-red-700 dark:text-red-300">{humanize(message)}</Text>
    </View>
  );
}