import { SectionHeader } from '@/components/ui/section-header';
import { Toast } from '@ant-design/react-native';
import { Ionicons } from '@expo/vector-icons';
import React, { useState } from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

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');

  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>

        <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
            onPress={() => Toast.info('演示页暂未接入真实上传能力')}
            className="items-center rounded-2xl border-2 border-dashed border-outline-variant/40 bg-surface-container-low/50 px-6 py-8"
            style={({ pressed }) => ({
              opacity: pressed ? 0.92 : 1,
            })}
          >
            <View className="mb-3 h-14 w-14 items-center justify-center rounded-full bg-primary-fixed">
              <Ionicons name="cloud-upload-outline" size={30} color="#004ac6" />
            </View>
            <Text className="mb-1 text-base font-bold text-on-surface">点击上传征信报告</Text>
            <Text className="text-sm leading-6 text-on-surface-variant">
              支持 PDF、图片格式，最大 20MB
            </Text>
          </Pressable>
        </View>

        <View className="mb-5 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>
          <View className="flex-row gap-2.5">
            {[
              {
                key: 'fast' as const,
                title: '快速解析',
                description: '约 30 秒，先看核心指标',
                icon: 'flash-outline' as const,
              },
              {
                key: 'deep' as const,
                title: '深度分析',
                description: '约 90 秒，生成完整建议',
                icon: 'layers-outline' as const,
              },
            ].map((item) => {
              const active = analysisMode === item.key;
              return (
                <Pressable
                  key={item.key}
                  onPress={() => setAnalysisMode(item.key)}
                  className={`flex-1 rounded-2xl px-4 py-4 ${
                    active ? 'bg-primary-container' : 'bg-surface-container-low'
                  }`}
                  style={({ pressed }) => ({
                    opacity: pressed ? 0.9 : 1,
                  })}
                >
                  <Ionicons
                    name={item.icon}
                    size={24}
                    color={active ? '#ffffff' : '#737686'}
                  />
                  <Text
                    className={`mt-3 text-base font-bold ${
                      active ? 'text-on-primary' : 'text-on-surface'
                    }`}
                  >
                    {item.title}
                  </Text>
                  <Text
                    className={`mt-1.5 text-sm leading-6 ${
                      active ? 'text-on-primary/80' : 'text-on-surface-variant'
                    }`}
                  >
                    {item.description}
                  </Text>
                </Pressable>
              );
            })}
          </View>
        </View>

        <Pressable
          onPress={() => Toast.success('解析任务已加入队列')}
          className="mb-8 items-center rounded-2xl bg-primary py-3.5"
          style={({ pressed }) => ({
            opacity: pressed ? 0.88 : 1,
            transform: [{ scale: pressed ? 0.985 : 1 }],
          })}
        >
          <Text className="text-base font-bold text-on-primary">开始解析</Text>
        </Pressable>

        <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>
  );
}
