import { SectionHeader } from '@/components/ui/section-header';
import { Ionicons } from '@expo/vector-icons';
import React, { useCallback, useState } from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { UploadComponent } from '../credit/upload';


type AnalysisMode = 'fast' | 'deep';

type AnalysisRecord = {
  id: string;
  customerName: string;
  time: string;
  status: '解析中' | '已完成' | '解析失败';
  progress?: number;
  score?: string;
};

const ANALYSIS_RECORDS: AnalysisRecord[] = [
  { id: '1', customerName: '张德发', time: '今天 10:42', status: '已完成', score: 'B+' },
  { id: '2', customerName: '钱进', time: '今天 10:05', status: '解析中', progress: 72 },
  { id: '3', customerName: '李美华', time: '昨天 15:20', status: '已完成', score: 'A' },
  { id: '4', customerName: '赵丽', time: '3天前', status: '解析失败' },
];

export default function AnalyticsScreen() {
  const [analysisMode, setAnalysisMode] = useState<AnalysisMode>('fast');
  const onUploadCredit = useCallback(() => {

  }, []);
  return (
    <SafeAreaView className="flex-1 bg-surface" edges={['top']}>
      <ScrollView
        className="flex-1"
        contentContainerClassName="px-5 pt-3 pb-24"
        showsVerticalScrollIndicator={false}
      >
        <Text className="mb-2 text-3xl font-extrabold tracking-tight text-on-surface">
          征信分析
        </Text>
        <Text className="mb-6 text-base leading-7 text-on-surface-variant">
          先选择客户，再上传征信文件，系统会自动生成评分和建议动作
        </Text>

        <View className="mb-3 rounded-2xl border border-outline-variant bg-surface-container-lowest p-4">
          <Text className="mb-3 text-xs font-bold uppercase tracking-widest text-outline">
            选择客户
          </Text>
          <Pressable
            className="flex-row items-center rounded-2xl bg-surface-container-low px-4 py-3.5"
            style={({ pressed }) => ({
              opacity: pressed ? 0.9 : 1,
            })}
          >
            <Ionicons name="person-outline" size={18} color="#737686" />
            <Text className="ml-3 flex-1 text-base font-medium text-on-surface">
              张德发（138****8888）
            </Text>
            <Ionicons name="chevron-down" size={18} color="#c3c6d7" />
          </Pressable>
        </View>

        <UploadComponent onCompolete={onUploadCredit} />



        <SectionHeader title="解析记录" actionText="查看全部" />
        <View className="gap-3">
          {ANALYSIS_RECORDS.map((record) => (
            <Pressable
              key={record.id}
              className="flex-row items-center rounded-2xl border border-outline-variant bg-surface-container-lowest px-4 py-3.5"
              style={({ pressed }) => ({
                opacity: pressed ? 0.93 : 1,
              })}
            >
              <View
                className={`mr-3 h-11 w-11 items-center justify-center rounded-full ${record.status === '已完成'
                  ? 'bg-green-50'
                  : record.status === '解析中'
                    ? 'bg-blue-50'
                    : 'bg-error-container'
                  }`}
              >
                <Ionicons
                  name={
                    record.status === '已完成'
                      ? 'checkmark-circle'
                      : record.status === '解析中'
                        ? 'hourglass-outline'
                        : 'alert-circle'
                  }
                  size={20}
                  color={
                    record.status === '已完成'
                      ? '#16a34a'
                      : record.status === '解析中'
                        ? '#2563eb'
                        : '#ba1a1a'
                  }
                />
              </View>

              <View className="flex-1">
                <View className="mb-1 flex-row items-center justify-between gap-3">
                  <Text className="text-base font-bold text-on-surface">
                    {record.customerName}
                  </Text>
                  <Text className="text-xs text-on-surface-variant">{record.time}</Text>
                </View>

                {record.status === '解析中' && record.progress != null ? (
                  <View>
                    <View className="mb-2 flex-row items-center justify-between">
                      <Text className="text-sm text-on-surface-variant">正在解析征信数据...</Text>
                      <Text className="text-sm font-bold text-primary">
                        {record.progress}%
                      </Text>
                    </View>
                    <View className="h-1.5 rounded-full bg-surface-container">
                      <View
                        className="h-full rounded-full bg-primary-container"
                        style={{ width: `${record.progress}%` }}
                      />
                    </View>
                  </View>
                ) : record.status === '已完成' ? (
                  <View className="flex-row items-center gap-2">
                    <Text className="text-sm text-on-surface-variant">征信评分</Text>
                    <View className="rounded-full bg-primary-fixed px-2.5 py-1">
                      <Text className="text-xs font-bold text-primary">{record.score}</Text>
                    </View>
                  </View>
                ) : (
                  <Text className="text-sm text-error">解析失败，请重新上传文件后重试</Text>
                )}
              </View>

              <Ionicons name="chevron-forward" size={18} color="#c3c6d7" />
            </Pressable>
          ))}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}