import { useAtomValue } from "@effect/atom-react";
import type {
  EnvironmentId,
  ProviderConsumeResetCreditOutcome,
  ProviderInstanceId,
  ServerProvider,
  ServerProviderResetCredits,
  ServerProviderUsageWindow,
  UsageLimitSourceAccount,
  UsageProviderKind,
} from "@t3tools/contracts";
import {
  collectLimitSources,
  collectLimitsGroups,
  elapsedShare,
  formatDuration,
  formatResetsIn,
  limitsNotice,
  paceOf,
  providerLimitsLabel,
} from "@t3tools/shared/usageLimits";
import { type ReactNode, useState } from "react";
import { Alert, Pressable, View } from "react-native";

import { AppText as Text } from "../../components/AppText";
import { ProviderIcon } from "../../components/ProviderIcon";
import { environmentPresentations } from "../../state/presentation";
import { serverEnvironment } from "../../state/server";
import { useAtomCommand } from "../../state/use-atom-command";
import { SettingsSection } from "../settings/components/SettingsSection";
import { useProviderColors } from "./usageProviders";

const PACE_LABEL = { ahead: "ahead of pace", on: "on pace", under: "under pace" } as const;
const DRIVER_LABEL: Partial<Record<string, string>> = { codex: "Codex", claudeAgent: "Claude" };

type Driver = ServerProvider["driver"];

/** The series colour the usage chart uses for this driver, so the two views read as one. */
function useBarColor(driver: Driver): string | null {
  const colors = useProviderColors();
  const kind: UsageProviderKind | null =
    driver === "codex" ? "codex" : driver === "claudeAgent" ? "claude" : null;
  return kind ? colors[kind] : null;
}

/**
 * One window as a bar spanning its whole duration: the fill is quota spent,
 * the hairline is how far into the window the clock is. Pace sits under the
 * left edge, the countdown under the right, so a row reads in one glance.
 */
function WindowRow(props: {
  readonly window: ServerProviderUsageWindow;
  readonly color: string | null;
  readonly now: number;
}) {
  const { window, now } = props;
  const used = Math.round(Math.max(0, Math.min(100, window.usedPercent)));
  const elapsed = elapsedShare(window, now);
  const pace = paceOf(window, now);
  const resetsIn = formatResetsIn(window, now);
  return (
    <View className="gap-1">
      <View className="flex-row items-baseline justify-between gap-3">
        <Text className="text-sm text-foreground">{window.label}</Text>
        <Text className="text-sm font-t3-medium tabular-nums text-foreground">{used}%</Text>
      </View>
      <View className="h-3 justify-center">
        <View className="h-1.5 flex-row overflow-hidden rounded-full bg-subtle">
          <View
            className={
              used >= 90
                ? "h-full rounded-full bg-destructive"
                : used >= 70
                  ? "h-full rounded-full bg-warning"
                  : "h-full rounded-full bg-foreground"
            }
            style={[
              { flex: used },
              used < 70 && props.color ? { backgroundColor: props.color } : null,
            ]}
          />
          <View style={{ flex: 100 - used }} />
        </View>
        {elapsed !== null ? (
          <View
            className="absolute top-0 bottom-0 w-px bg-foreground"
            style={{ left: `${elapsed * 100}%`, opacity: 0.6 }}
          />
        ) : null}
      </View>
      {pace || resetsIn ? (
        <View className="flex-row justify-between gap-3">
          <Text className="text-xs text-foreground-tertiary">{pace ? PACE_LABEL[pace] : ""}</Text>
          <Text className="text-xs tabular-nums text-foreground-tertiary">{resetsIn ?? ""}</Text>
        </View>
      ) : null}
    </View>
  );
}

/** One account: icon, name and plan on a single line, then its windows. */
function AccountLimits(props: {
  readonly driver: Driver;
  readonly label: string;
  readonly instanceLabel: string;
  readonly detail: string | undefined;
  readonly limits: ServerProvider["usageLimits"];
  readonly now: number;
  readonly first: boolean;
  readonly footer?: ReactNode;
}) {
  const { limits, now } = props;
  const color = useBarColor(props.driver);
  if (!limits) return null;
  const notice = limitsNotice(limits);
  return (
    <View className={props.first ? "gap-3 p-4" : "gap-3 border-t border-border-subtle p-4"}>
      <View className="flex-row items-center gap-2">
        <ProviderIcon provider={props.driver} size={16} />
        <View className="min-w-0 flex-1 flex-row items-baseline gap-2">
          <Text className="text-base font-t3-medium text-foreground">{props.label}</Text>
          {props.instanceLabel !== props.label ? (
            <Text className="shrink text-xs text-foreground-tertiary" numberOfLines={1}>
              · {props.instanceLabel}
            </Text>
          ) : null}
          {props.detail ? (
            <Text className="shrink text-sm text-foreground-muted" numberOfLines={1}>
              · {props.detail}
            </Text>
          ) : null}
        </View>
      </View>
      {notice ? (
        <Text className="text-sm text-foreground-muted">{notice}</Text>
      ) : (
        <View className="gap-3">
          {limits.windows.map((window) => (
            <WindowRow key={window.id} window={window} color={color} now={now} />
          ))}
        </View>
      )}
      {props.footer}
    </View>
  );
}

const OUTCOME_TEXT: Record<ProviderConsumeResetCreditOutcome, string> = {
  reset: "Reset applied. Your windows have cleared.",
  nothingToReset: "Nothing to reset right now.",
  noCredit: "No reset credit left.",
  alreadyRedeemed: "That credit was already redeemed.",
};

/**
 * Banked reset credits with a confirmed redeem action. Redeeming spends a
 * credit the provider granted the user, so it goes through the native
 * confirm alert rather than firing on a bare tap.
 */
function ResetCredits(props: {
  readonly environmentId: EnvironmentId;
  readonly instanceId: ProviderInstanceId;
  readonly credits: ServerProviderResetCredits;
  readonly now: number;
}) {
  const { environmentId, instanceId, credits, now } = props;
  const consume = useAtomCommand(serverEnvironment.consumeResetCredit, {
    reportFailure: false,
  });
  const [busy, setBusy] = useState(false);
  const [status, setStatus] = useState<string | null>(null);
  if (credits.availableCount === 0 && status === null) return null;

  const expiresIn = credits.nextExpiresAt
    ? formatDuration(Date.parse(credits.nextExpiresAt) - now)
    : null;
  const summary =
    credits.availableCount === 0
      ? "No reset credits banked"
      : `${credits.availableCount} ${credits.availableCount === 1 ? "reset credit" : "reset credits"} banked${
          expiresIn ? ` · next expires in ${expiresIn}` : ""
        }`;

  const redeem = async () => {
    setBusy(true);
    setStatus(null);
    const result = await consume({ environmentId, input: { instanceId } });
    setBusy(false);
    if (result._tag === "Success") {
      setStatus(OUTCOME_TEXT[result.value.outcome]);
      return;
    }
    setStatus(
      "error" in result.cause && result.cause.error instanceof Error
        ? result.cause.error.message
        : "Could not use the reset credit.",
    );
  };

  const confirm = () => {
    Alert.alert(
      "Use a reset credit?",
      "This redeems one credit on your account and clears the current rate-limit windows. It cannot be undone.",
      [
        { text: "Cancel", style: "cancel" },
        { text: "Use credit", onPress: () => void redeem() },
      ],
    );
  };

  return (
    <View className="flex-row flex-wrap items-center gap-x-3 gap-y-1">
      <Text className="text-xs tabular-nums text-foreground-tertiary">{summary}</Text>
      {credits.availableCount > 0 ? (
        <Pressable
          accessibilityRole="button"
          accessibilityState={{ disabled: busy }}
          disabled={busy}
          onPress={confirm}
          className="rounded-full bg-subtle-strong px-3 py-1.5"
        >
          <Text className="text-sm font-t3-medium text-foreground">
            {busy ? "Using credit…" : "Use a reset credit"}
          </Text>
        </Pressable>
      ) : null}
      {status ? <Text className="text-sm text-foreground">{status}</Text> : null}
    </View>
  );
}

function ProviderLimits(props: {
  readonly provider: ServerProvider;
  readonly environmentId: EnvironmentId;
  readonly now: number;
  readonly first: boolean;
}) {
  const { provider, environmentId, now } = props;
  const credits = provider.usageLimits?.resetCredits;
  return (
    <AccountLimits
      driver={provider.driver}
      label={DRIVER_LABEL[provider.driver] ?? String(provider.driver)}
      instanceLabel={providerLimitsLabel(provider, (driver) => DRIVER_LABEL[driver])}
      detail={provider.auth.label}
      limits={provider.usageLimits}
      now={now}
      first={props.first}
      footer={
        credits ? (
          <ResetCredits
            environmentId={environmentId}
            instanceId={provider.instanceId}
            credits={credits}
            now={now}
          />
        ) : undefined
      }
    />
  );
}

/** Emails stay off the phone screen; the plan and driver identify the row. */
function SourceAccountLimits(props: {
  readonly account: UsageLimitSourceAccount;
  readonly now: number;
  readonly first: boolean;
}) {
  const { account } = props;
  return (
    <AccountLimits
      driver={account.driver}
      label={DRIVER_LABEL[account.driver] ?? String(account.driver)}
      instanceLabel="CLI Proxy"
      detail={account.plan}
      limits={account.usageLimits}
      now={props.now}
      first={props.first}
    />
  );
}

/**
 * Re-probes every provider (and usage-limit source) on each connected
 * environment; the fresh snapshots then arrive over the config stream.
 * Countdowns and pace anchor to `now` rather than ticking, so a refresh also
 * re-anchors the clock: quota and elapsed time move together, or not at all.
 * Environments whose probe failed are named, since their rows keep showing
 * the previous quota with nothing else to say so.
 */
export function useRefreshLimits() {
  const presentations = useAtomValue(environmentPresentations.presentationsAtom);
  const refreshProviders = useAtomCommand(serverEnvironment.refreshProviders, {
    reportFailure: false,
  });
  const [now, setNow] = useState(() => Date.now());
  const [refreshing, setRefreshing] = useState(false);
  const [failedLabels, setFailedLabels] = useState<readonly string[]>([]);
  // Always toggles `refreshing`, even with nothing to probe: Android's
  // RefreshControl keeps its spinner up until it sees true then false.
  const refresh = async () => {
    const connected = [...presentations].filter(
      ([, presentation]) => presentation.connection.phase === "connected",
    );
    setRefreshing(true);
    try {
      const results = await Promise.all(
        connected.map(([environmentId]) => refreshProviders({ environmentId, input: {} })),
      );
      setFailedLabels(
        connected
          .filter((_, index) => results[index]?._tag === "Failure")
          .map(([, presentation]) => presentation.entry.target.label),
      );
    } finally {
      setNow(Date.now());
      setRefreshing(false);
    }
  };
  return { now, refreshing, failedLabels, refresh };
}

/**
 * Subscription quota windows from every connected environment's providers,
 * read from the config each environment already streams.
 */
export function UsageLimitsSection(props: {
  readonly now: number;
  readonly failedLabels: readonly string[];
}) {
  const { now } = props;
  const presentations = useAtomValue(environmentPresentations.presentationsAtom);
  const groups = collectLimitsGroups(presentations);
  const sources = collectLimitSources(presentations);

  if (groups.length === 0 && sources.length === 0) {
    return (
      <Text className="py-16 text-center text-base text-foreground-muted">
        No provider on a connected environment reports subscription limits.
      </Text>
    );
  }

  return (
    <>
      {props.failedLabels.length > 0 ? (
        <View className="rounded-[16px] border-continuous bg-card px-4 py-3">
          <Text className="text-sm text-foreground-muted">
            {props.failedLabels.join(", ")} could not refresh limits. Showing the last known values.
          </Text>
        </View>
      ) : null}
      {groups.map((group) => (
        <SettingsSection
          key={group.environmentId}
          title={group.environmentLabel ?? "Providers"}
          card
        >
          {group.providers.map((provider, index) => (
            <ProviderLimits
              key={provider.instanceId}
              provider={provider}
              environmentId={group.environmentId}
              now={now}
              first={index === 0}
            />
          ))}
        </SettingsSection>
      ))}
      {sources.map((source) => (
        <SettingsSection key={source.key} card>
          {source.error ? (
            <Text className="p-4 text-sm text-foreground-muted">{source.error}</Text>
          ) : source.accounts.length === 0 ? (
            <Text className="p-4 text-sm text-foreground-muted">
              {source.hiddenAccountCount > 0
                ? "All accounts are shown by connected providers."
                : "No accounts reported."}
            </Text>
          ) : (
            source.accounts.map((account, index) => (
              <SourceAccountLimits
                key={account.id}
                account={account}
                now={now}
                first={index === 0}
              />
            ))
          )}
        </SettingsSection>
      ))}
    </>
  );
}