import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import * as Clipboard from 'expo-clipboard';
import { Stack, useLocalSearchParams } from 'expo-router';
import { useMemo, useState } from 'react';
import { Pressable, ScrollView, Text, TextInput, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { LineTrendChart } from '@/src/components/line-trend-chart';
import { getDashboardSnapshot, getUsageStats, getUser, listUserApiKeys, updateUserBalance } from '@/src/services/admin';
import type { AdminApiKey, BalanceOperation } from '@/src/types/admin';

const colors = {
  page: '#f4efe4',
  card: '#fbf8f2',
  text: '#16181a',
  subtext: '#6f665c',
  border: '#e7dfcf',
  primary: '#1d5f55',
  dark: '#1b1d1f',
  errorBg: '#f7e1d6',
  errorText: '#a4512b',
  muted: '#f7f1e6',
};

type RangeKey = '24h' | '7d' | '30d';

const RANGE_OPTIONS: Array<{ key: RangeKey; label: string }> = [
  { key: '24h', label: '24H' },
  { key: '7d', label: '7D' },
  { key: '30d', label: '30D' },
];

function getDateRange(rangeKey: RangeKey) {
  const end = new Date();
  const start = new Date();

  if (rangeKey === '24h') {
    start.setHours(end.getHours() - 23, 0, 0, 0);
  } else if (rangeKey === '30d') {
    start.setDate(end.getDate() - 29);
  } else {
    start.setDate(end.getDate() - 6);
  }

  const toDate = (value: Date) => value.toISOString().slice(0, 10);

  return {
    start_date: toDate(start),
    end_date: toDate(end),
    granularity: rangeKey === '24h' ? ('hour' as const) : ('day' as const),
  };
}

function getErrorMessage(error: unknown) {
  if (error instanceof Error && error.message) {
    switch (error.message) {
      case 'BASE_URL_REQUIRED':
        return '请先到服务器页填写服务地址。';
      case 'ADMIN_API_KEY_REQUIRED':
        return '请先到服务器页填写 Admin Token。';
      default:
        return error.message;
    }
  }

  return '加载失败，请稍后重试。';
}

function formatMoney(value?: number | null) {
  return `$${Number(value ?? 0).toFixed(2)}`;
}

function formatUsageCost(stats?: { total_account_cost?: number | null; total_actual_cost?: number | null; total_cost?: number | null }) {
  const value = Number(stats?.total_account_cost ?? stats?.total_actual_cost ?? stats?.total_cost ?? 0);
  return `$${value.toFixed(4)}`;
}

function formatTokenValue(value?: number | null) {
  const number = Number(value ?? 0);
  if (number >= 1_000_000_000) return `${(number / 1_000_000_000).toFixed(2)}B`;
  if (number >= 1_000_000) return `${(number / 1_000_000).toFixed(2)}M`;
  if (number >= 1_000) return `${(number / 1_000).toFixed(2)}K`;
  return new Intl.NumberFormat('en-US').format(number);
}


function formatQuota(quotaUsed?: number | null, quota?: number | null) {
  const used = Number(quotaUsed ?? 0);
  const limit = Number(quota ?? 0);

  if (limit <= 0) {
    return '∞';
  }

  return `${used} / ${limit}`;
}

function formatTime(value?: string | null) {
  if (!value) return '--';

  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;

  const year = date.getFullYear();
  const month = `${date.getMonth() + 1}`.padStart(2, '0');
  const day = `${date.getDate()}`.padStart(2, '0');
  const hours = `${date.getHours()}`.padStart(2, '0');
  const minutes = `${date.getMinutes()}`.padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}`;
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <View
      style={{
        backgroundColor: colors.card,
        borderRadius: 16,
        padding: 16,
        marginBottom: 12,
        borderWidth: 1,
        borderColor: colors.border,
      }}
    >
      <Text style={{ fontSize: 18, fontWeight: '700', color: colors.text }}>{title}</Text>
      <View style={{ marginTop: 12 }}>{children}</View>
    </View>
  );
}

function GridField({ label, value }: { label: string; value: string }) {
  return (
    <View
      style={{
        width: '48.5%',
        backgroundColor: colors.muted,
        borderRadius: 12,
        paddingHorizontal: 12,
        paddingVertical: 12,
        borderWidth: 1,
        borderColor: colors.border,
      }}
    >
      <Text style={{ fontSize: 12, color: colors.subtext }}>{label}</Text>
      <Text style={{ marginTop: 6, fontSize: 15, fontWeight: '600', color: colors.text }}>{value}</Text>
    </View>
  );
}

function MetricCard({ label, value }: { label: string; value: string }) {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: colors.muted,
        borderRadius: 12,
        paddingHorizontal: 12,
        paddingVertical: 12,
        borderWidth: 1,
        borderColor: colors.border,
      }}
    >
      <Text style={{ fontSize: 12, color: colors.subtext }}>{label}</Text>
      <Text style={{ marginTop: 6, fontSize: 16, fontWeight: '700', color: colors.text }}>{value}</Text>
    </View>
  );
}

function StatusBadge({ text }: { text: string }) {
  const normalized = text.toLowerCase();
  const backgroundColor = normalized === 'active' ? '#dff4ea' : normalized === 'inactive' ? '#ece5da' : '#f7e1d6';
  const color = normalized === 'active' ? '#17663f' : normalized === 'inactive' ? '#6f665c' : '#a4512b';

  return (
    <View style={{ backgroundColor, borderRadius: 999, paddingHorizontal: 10, paddingVertical: 6 }}>
      <Text style={{ fontSize: 12, fontWeight: '700', color }}>{text}</Text>
    </View>
  );
}

function CopyInlineButton({ copied, onPress }: { copied: boolean; onPress: () => void }) {
  return (
    <Pressable
      onPress={onPress}
      style={{
        marginLeft: 8,
        backgroundColor: copied ? '#dff4ea' : '#e7dfcf',
        borderRadius: 999,
        paddingHorizontal: 10,
        paddingVertical: 6,
      }}
    >
      <Text style={{ fontSize: 11, fontWeight: '700', color: copied ? '#17663f' : '#4e463e' }}>{copied ? '已复制' : '复制'}</Text>
    </Pressable>
  );
}

function KeyItem({ item, copied, onCopy }: { item: AdminApiKey; copied: boolean; onCopy: () => void }) {
  return (
    <View
      style={{
        backgroundColor: colors.muted,
        borderRadius: 14,
        padding: 12,
        borderWidth: 1,
        borderColor: colors.border,
        marginBottom: 10,
      }}
    >
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <View style={{ flex: 1 }}>
          <View style={{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap' }}>
            <Text style={{ fontSize: 15, fontWeight: '700', color: colors.text }}>{item.name || `Key #${item.id}`}</Text>
            <CopyInlineButton copied={copied} onPress={onCopy} />
          </View>
          <Text style={{ marginTop: 4, fontSize: 12, color: colors.subtext }}>{item.group?.name || '未分组'}</Text>
        </View>
        <StatusBadge text={item.status || '--'} />
      </View>

      <Text style={{ marginTop: 10, fontSize: 12, lineHeight: 18, color: colors.text }}>{item.key || '--'}</Text>

      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginTop: 12 }}>
        <View style={{ flex: 1 }}>
          <Text style={{ fontSize: 11, color: colors.subtext }}>已用额度</Text>
          <Text style={{ marginTop: 4, fontSize: 16, fontWeight: '700', color: colors.text }}>{formatQuota(item.quota_used, item.quota)}</Text>
        </View>
        <View style={{ flex: 1, alignItems: 'flex-end' }}>
          <Text style={{ fontSize: 11, color: colors.subtext }}>最后使用时间</Text>
          <Text style={{ marginTop: 4, fontSize: 13, color: colors.subtext }}>{formatTime(item.last_used_at || item.updated_at || item.created_at)}</Text>
        </View>
      </View>
    </View>
  );
}

export default function UserDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const userId = Number(id);
  const queryClient = useQueryClient();

  const [operation, setOperation] = useState<BalanceOperation>('add');
  const [amount, setAmount] = useState('10');
  const [notes, setNotes] = useState('');
  const [formError, setFormError] = useState<string | null>(null);
  const [searchText, setSearchText] = useState('');
  const [copiedKeyId, setCopiedKeyId] = useState<number | null>(null);
  const [rangeKey, setRangeKey] = useState<RangeKey>('7d');
  const range = getDateRange(rangeKey);

  const userQuery = useQuery({
    queryKey: ['user', userId],
    queryFn: () => getUser(userId),
    enabled: Number.isFinite(userId),
  });

  const apiKeysQuery = useQuery({
    queryKey: ['user-api-keys', userId],
    queryFn: () => listUserApiKeys(userId),
    enabled: Number.isFinite(userId),
  });

  const usageStatsQuery = useQuery({
    queryKey: ['usage-stats', 'user', userId, rangeKey, range.start_date, range.end_date],
    queryFn: () => getUsageStats({ ...range, user_id: userId }),
    enabled: Number.isFinite(userId),
  });

  const usageSnapshotQuery = useQuery({
    queryKey: ['usage-snapshot', 'user', userId, rangeKey, range.start_date, range.end_date, range.granularity],
    queryFn: () =>
      getDashboardSnapshot({
        ...range,
        user_id: userId,
        include_stats: false,
        include_trend: true,
        include_model_stats: false,
        include_group_stats: false,
        include_users_trend: false,
      }),
    enabled: Number.isFinite(userId),
  });
;
;

  const balanceMutation = useMutation({
    mutationFn: (payload: { amount: number; notes?: string; operation: BalanceOperation }) =>
      updateUserBalance(userId, {
        balance: payload.amount,
        notes: payload.notes,
        operation: payload.operation,
      }),
    onSuccess: () => {
      setFormError(null);
      setAmount('10');
      setNotes('');
      queryClient.invalidateQueries({ queryKey: ['user', userId] });
      queryClient.invalidateQueries({ queryKey: ['users'] });
    },
    onError: (error) => setFormError(getErrorMessage(error)),
  });

  const user = userQuery.data;
  const apiKeys = apiKeysQuery.data?.items ?? [];

  const filteredApiKeys = useMemo(() => {
    const keyword = searchText.trim().toLowerCase();

    return apiKeys.filter((item) => {
      const haystack = [item.name, item.key, item.group?.name].filter(Boolean).join(' ').toLowerCase();
      return keyword ? haystack.includes(keyword) : true;
    });
  }, [apiKeys, searchText]);
  const trendPoints = (usageSnapshotQuery.data?.trend ?? []).map((item) => ({
    label: rangeKey === '24h' ? item.date.slice(11, 13) : item.date.slice(5, 10),
    value: item.total_tokens,
  }));

  function submitBalance() {
    const numericAmount = Number(amount);

    if (!amount.trim()) {
      setFormError('请输入金额。');
      return;
    }

    if (!Number.isFinite(numericAmount) || numericAmount < 0) {
      setFormError('金额格式不正确。');
      return;
    }

    balanceMutation.mutate({
      amount: numericAmount,
      notes: notes.trim() || undefined,
      operation,
    });
  }

  async function copyKey(item: AdminApiKey) {
    await Clipboard.setStringAsync(item.key || '');
    setCopiedKeyId(item.id);
    setTimeout(() => {
      setCopiedKeyId((current) => (current === item.id ? null : current));
    }, 1500);
  }

  return (
    <>
      <Stack.Screen options={{ title: user?.email || '用户详情' }} />
      <SafeAreaView edges={['bottom']} style={{ flex: 1, backgroundColor: colors.page }}>
        <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, paddingBottom: 40 }}>
          {userQuery.isLoading ? (
            <Section title="状态">
              <Text style={{ color: colors.subtext }}>正在加载用户详情...</Text>
            </Section>
          ) : null}

          {userQuery.error ? (
            <Section title="状态">
              <View style={{ backgroundColor: colors.errorBg, borderRadius: 12, padding: 12 }}>
                <Text style={{ color: colors.errorText, fontWeight: '700' }}>用户信息加载失败</Text>
                <Text style={{ marginTop: 6, color: colors.errorText }}>{getErrorMessage(userQuery.error)}</Text>
              </View>
            </Section>
          ) : null}

          {user ? (
            <Section title="基础信息">
              <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', rowGap: 10 }}>
                <View
                  style={{
                    width: '48.5%',
                    justifyContent: 'center',
                    paddingHorizontal: 4,
                    paddingVertical: 8,
                  }}
                >
                  <Text style={{ fontSize: 11, color: colors.subtext }}>邮箱</Text>
                  <Text style={{ marginTop: 4, fontSize: 13, color: colors.subtext }}>{user.email || '--'}</Text>
                </View>
                <GridField label="用户名" value={user.username || '--'} />
                <GridField label="余额" value={formatMoney(user.balance)} />
                <View
                  style={{
                    width: '48.5%',
                    justifyContent: 'center',
                    paddingHorizontal: 4,
                    paddingVertical: 8,
                  }}
                >
                  <Text style={{ fontSize: 11, color: colors.subtext }}>最后使用时间</Text>
                  <Text style={{ marginTop: 4, fontSize: 13, color: colors.subtext }}>{formatTime(user.last_used_at || user.updated_at || user.created_at)}</Text>
                </View>
              </View>
            </Section>
          ) : null}

          <Section title="总用量">
            <View style={{ flexDirection: 'row', gap: 8, marginBottom: 12 }}>
              {RANGE_OPTIONS.map((item) => {
                const active = item.key === rangeKey;
                return (
                  <Pressable
                    key={item.key}
                    onPress={() => setRangeKey(item.key)}
                    style={{
                      backgroundColor: active ? colors.primary : colors.muted,
                      borderRadius: 999,
                      paddingHorizontal: 12,
                      paddingVertical: 8,
                      borderWidth: 1,
                      borderColor: active ? colors.primary : colors.border,
                    }}
                  >
                    <Text style={{ color: active ? '#fff' : colors.text, fontSize: 12, fontWeight: '700' }}>{item.label}</Text>
                  </Pressable>
                );
              })}
            </View>

            <View style={{ flexDirection: 'row', gap: 8 }}>
              <MetricCard label="请求" value={formatTokenValue(usageStatsQuery.data?.total_requests)} />
              <MetricCard label="Token" value={formatTokenValue(usageStatsQuery.data?.total_tokens)} />
              <MetricCard label="成本" value={formatUsageCost(usageStatsQuery.data)} />
            </View>

            {usageStatsQuery.data ? (
              <Text style={{ marginTop: 10, fontSize: 12, color: colors.subtext }}>
                输入 {formatTokenValue(usageStatsQuery.data.total_input_tokens)} · 输出 {formatTokenValue(usageStatsQuery.data.total_output_tokens)}
              </Text>
            ) : null}

            {usageStatsQuery.isLoading ? <Text style={{ marginTop: 12, color: colors.subtext }}>正在加载用量统计...</Text> : null}

            {usageStatsQuery.error ? (
              <View style={{ marginTop: 12, backgroundColor: colors.errorBg, borderRadius: 12, padding: 12 }}>
                <Text style={{ color: colors.errorText, fontWeight: '700' }}>用量统计加载失败</Text>
                <Text style={{ marginTop: 6, color: colors.errorText }}>{getErrorMessage(usageStatsQuery.error)}</Text>
              </View>
            ) : null}

            {!usageSnapshotQuery.isLoading && trendPoints.length > 1 ? (
              <View style={{ marginTop: 14 }}>
                <LineTrendChart
                  title="用量趋势"
                  subtitle={`${range.start_date} 到 ${range.end_date}`}
                  points={trendPoints}
                  color="#1d5f55"
                  formatValue={(value) => formatTokenValue(value)}
                  compact
                />
              </View>
            ) : null}

            {usageSnapshotQuery.isLoading ? <Text style={{ marginTop: 12, color: colors.subtext }}>正在加载趋势图...</Text> : null}

            {usageSnapshotQuery.error ? (
              <View style={{ marginTop: 12, backgroundColor: colors.errorBg, borderRadius: 12, padding: 12 }}>
                <Text style={{ color: colors.errorText, fontWeight: '700' }}>趋势加载失败</Text>
                <Text style={{ marginTop: 6, color: colors.errorText }}>{getErrorMessage(usageSnapshotQuery.error)}</Text>
              </View>
            ) : null}
          </Section>

          <Section title="API Keys">
            <TextInput
              value={searchText}
              onChangeText={setSearchText}
              placeholder="搜索名称 / Key / 分组"
              placeholderTextColor="#9a9082"
              style={{
                backgroundColor: colors.muted,
                borderWidth: 1,
                borderColor: colors.border,
                borderRadius: 12,
                paddingHorizontal: 12,
                paddingVertical: 12,
                color: colors.text,
                marginBottom: 10,
              }}
            />

            {apiKeysQuery.isLoading ? <Text style={{ color: colors.subtext }}>正在加载 API Keys...</Text> : null}

            {apiKeysQuery.error ? (
              <View style={{ backgroundColor: colors.errorBg, borderRadius: 12, padding: 12 }}>
                <Text style={{ color: colors.errorText, fontWeight: '700' }}>API Keys 加载失败</Text>
                <Text style={{ marginTop: 6, color: colors.errorText }}>{getErrorMessage(apiKeysQuery.error)}</Text>
              </View>
            ) : null}

            {!apiKeysQuery.isLoading && !apiKeysQuery.error ? (
              filteredApiKeys.length > 0 ? (
                <View>
                  {filteredApiKeys.map((item) => (
                    <KeyItem key={item.id} item={item} copied={copiedKeyId === item.id} onCopy={() => copyKey(item)} />
                  ))}
                </View>
              ) : (
                <Text style={{ color: colors.subtext }}>当前筛选条件下没有 Key。</Text>
              )
            ) : null}
          </Section>

          <Section title="余额操作">
            <View style={{ flexDirection: 'row', gap: 8, marginBottom: 12 }}>
              {([
                { label: '充值', value: 'add' },
                { label: '扣减', value: 'subtract' },
                { label: '设为', value: 'set' },
              ] as const).map((item) => {
                const active = operation === item.value;
                return (
                  <Pressable
                    key={item.value}
                    onPress={() => setOperation(item.value)}
                    style={{
                      flex: 1,
                      backgroundColor: active ? colors.primary : colors.muted,
                      borderRadius: 12,
                      paddingVertical: 12,
                      alignItems: 'center',
                      borderWidth: 1,
                      borderColor: active ? colors.primary : colors.border,
                    }}
                  >
                    <Text style={{ color: active ? '#fff' : colors.text, fontWeight: '700' }}>{item.label}</Text>
                  </Pressable>
                );
              })}
            </View>

            <TextInput
              value={amount}
              onChangeText={setAmount}
              placeholder="输入金额，例如 10"
              placeholderTextColor="#9a9082"
              keyboardType="decimal-pad"
              style={{
                backgroundColor: colors.muted,
                borderWidth: 1,
                borderColor: colors.border,
                borderRadius: 12,
                paddingHorizontal: 12,
                paddingVertical: 12,
                color: colors.text,
                marginBottom: 10,
              }}
            />

            <TextInput
              value={notes}
              onChangeText={setNotes}
              placeholder="备注（可选）"
              placeholderTextColor="#9a9082"
              style={{
                backgroundColor: colors.muted,
                borderWidth: 1,
                borderColor: colors.border,
                borderRadius: 12,
                paddingHorizontal: 12,
                paddingVertical: 12,
                color: colors.text,
                marginBottom: 10,
              }}
            />

            {formError ? (
              <View style={{ backgroundColor: colors.errorBg, borderRadius: 12, padding: 12, marginBottom: 10 }}>
                <Text style={{ color: colors.errorText }}>{formError}</Text>
              </View>
            ) : null}

            <Pressable onPress={submitBalance} style={{ backgroundColor: colors.dark, borderRadius: 12, paddingVertical: 14, alignItems: 'center' }}>
              <Text style={{ color: '#fff', fontWeight: '700' }}>{balanceMutation.isPending ? '提交中...' : '确认提交'}</Text>
            </Pressable>
          </Section>
        </ScrollView>
      </SafeAreaView>
    </>
  );
}