import { StyleSheet, Text, View } from 'react-native';

import { ActionButton } from '@/shared/components/ActionButton';
import { ClaimCard } from '@/shared/components/ClaimCard';
import { Screen } from '@/shared/components/Screen';
import { Colors, Radius, Spacing } from '@/constants/theme';
import { myClaims } from '@/shared/mock/claims';

export default function HomeScreen() {
  return (
    <Screen title="上午好，张三" subtitle="使用 AI 报销助手快速识别票据、生成草稿和跟踪审批。">
      <View style={styles.hero}>
        <Text style={styles.heroLabel}>AI 报销助手</Text>
        <Text style={styles.heroTitle}>描述费用或上传票据，AI 帮你快速报销</Text>
        <Text style={styles.heroCopy}>自动识别票据信息，智能推荐报销类型与科目。</Text>
        <View style={styles.heroActions}>
          <ActionButton accessibilityLabel="拍照识别票据">拍照识别</ActionButton>
          <ActionButton accessibilityLabel="上传票据" variant="secondary">
            上传票据
          </ActionButton>
        </View>
      </View>

      <View style={styles.quickGrid}>
        <View style={styles.quickCard}>
          <Text style={styles.quickTitle}>新建报销</Text>
          <Text style={styles.quickCopy}>发起报销申请</Text>
        </View>
        <View style={styles.quickCard}>
          <Text style={styles.quickTitle}>待我审批</Text>
          <Text style={styles.quickCopy}>2 单待处理</Text>
        </View>
      </View>

      <Text style={styles.sectionTitle}>最近报销进度</Text>
      {myClaims.slice(0, 2).map((claim) => (
        <ClaimCard key={claim.id} claim={claim} />
      ))}
    </Screen>
  );
}

const styles = StyleSheet.create({
  hero: {
    gap: Spacing.three,
    padding: Spacing.four,
    borderRadius: Radius.lg,
    borderWidth: 1,
    borderColor: '#BFEEDB',
    backgroundColor: Colors.light.primarySoft,
  },
  heroLabel: {
    alignSelf: 'flex-start',
    borderRadius: Radius.pill,
    backgroundColor: '#DFF8EC',
    color: Colors.light.primary,
    paddingHorizontal: 10,
    paddingVertical: 4,
    fontSize: 12,
    fontWeight: '900',
  },
  heroTitle: {
    color: Colors.light.text,
    fontSize: 21,
    fontWeight: '900',
    lineHeight: 29,
  },
  heroCopy: {
    color: Colors.light.textSecondary,
    fontSize: 14,
    lineHeight: 22,
  },
  heroActions: {
    flexDirection: 'row',
    gap: Spacing.three,
  },
  quickGrid: {
    flexDirection: 'row',
    gap: Spacing.three,
  },
  quickCard: {
    flex: 1,
    gap: 5,
    borderRadius: Radius.lg,
    borderWidth: 1,
    borderColor: Colors.light.border,
    backgroundColor: '#FFFFFF',
    padding: Spacing.four,
  },
  quickTitle: {
    color: Colors.light.text,
    fontSize: 16,
    fontWeight: '900',
  },
  quickCopy: {
    color: Colors.light.textSecondary,
    fontSize: 13,
  },
  sectionTitle: {
    marginTop: Spacing.two,
    color: Colors.light.text,
    fontSize: 18,
    fontWeight: '900',
  },
});
