/**
 * 企业端 · 收到的投递（工作台列表）
 *
 * 这是企业侧投递链路的第一层：一行一个**投递**（不是候选人），
 * 展示状态、岗位、时间与下一步动作。状态变更与候选人反馈都从详情页发起。
 *
 * 设计取舍：
 * - 筛选条上的计数来自**独立于筛选的**计数口，切到「面试中」不会让其他状态计数归零
 * - 用 useFocusEffect 在返回时刷新：详情页改完状态后回到列表，徽标必须已经跟着变，
 *   否则用户会以为刚才那次操作没生效
 */
import { Ionicons } from '@expo/vector-icons';
import { useFocusEffect, useRouter } from 'expo-router';
import { useCallback, useRef, useState } from 'react';
import {
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { EmptyState, ErrorState, LoadingState } from '../src/components/StateView';
import {
  APPLICATION_STATUS_LABELS,
  COMPANY_APPLICATION_FILTERS,
  ENTERPRISE_DISPLAY_NAME,
} from '../src/constants';
import { useCompanyApplications } from '../src/hooks';
import { applicationStatusColors, colors, spacing } from '../src/theme';
import type { ApplicationStatus, CompanyApplicationItem } from '../src/types';

/** 把 ISO 时间压成「9-28 10:12」这种一眼能排序的相对短格式 */
function formatAppliedAt(iso?: string): string {
  if (!iso) return '';
  const date = new Date(iso);
  if (Number.isNaN(date.getTime())) return '';
  const mm = date.getMonth() + 1;
  const dd = date.getDate();
  const hh = date.getHours().toString().padStart(2, '0');
  const mi = date.getMinutes().toString().padStart(2, '0');
  return `${mm}-${dd} ${hh}:${mi}`;
}

/* ===================== 子组件 ===================== */

function StatusBadge({ status }: { status: ApplicationStatus }) {
  const tone = applicationStatusColors[status];
  return (
    <View style={[styles.badge, { backgroundColor: tone.bg }]}>
      <Text style={[styles.badgeText, { color: tone.color }]}>
        {APPLICATION_STATUS_LABELS[status]}
      </Text>
    </View>
  );
}

/** 单行投递。整行可点 → 进详情做状态流转与反馈 */
function ApplicationRow({
  item,
  onPress,
}: {
  item: CompanyApplicationItem;
  onPress: () => void;
}) {
  return (
    <Pressable style={styles.row} onPress={onPress}>
      <View style={styles.avatar}>
        <Text style={styles.avatarText}>{item.candidateName.slice(0, 1)}</Text>
      </View>
      <View style={styles.rowMain}>
        <View style={styles.rowTop}>
          <Text style={styles.name} numberOfLines={1}>
            {item.candidateName}
          </Text>
          <StatusBadge status={item.status} />
        </View>
        <Text style={styles.rowMeta} numberOfLines={1}>
          {[item.candidateSchool, item.candidateEducation, item.candidateGraduationYear
            ? `${item.candidateGraduationYear} 届`
            : undefined]
            .filter(Boolean)
            .join(' · ') || '学历信息未公开'}
        </Text>
        <View style={styles.rowBottom}>
          <View style={styles.jobChip}>
            <Ionicons name="briefcase-outline" size={11} color={colors.textSecondary} />
            <Text style={styles.jobChipText} numberOfLines={1}>
              {item.jobTitle}
            </Text>
          </View>
          <Text style={styles.time}>{formatAppliedAt(item.createdAt)}</Text>
        </View>
      </View>
      <Ionicons name="chevron-forward" size={18} color={colors.textHint} />
    </Pressable>
  );
}

/* ===================== 页面 ===================== */

export default function EnterpriseApplicationsScreen() {
  const router = useRouter();
  const [status, setStatus] = useState<ApplicationStatus | null>(null);
  const [keyword, setKeyword] = useState('');

  const { applications, total, counts, loading, error, refresh, isEmpty } =
    useCompanyApplications({ status, keyword });

  /**
   * 从详情页返回时刷新：状态改了、反馈写了，列表上的数字与徽标都要跟着变。
   *
   * refresh 的引用会随筛选条件（keyword）变化，直接写进 useCallback 依赖的话，
   * 每敲一个字都会重跑一次 focus effect。故用 ref 取最新值，effect 依赖留空。
   */
  const refreshRef = useRef(refresh);
  refreshRef.current = refresh;
  useFocusEffect(
    useCallback(() => {
      refreshRef.current();
    }, []),
  );

  const allCount = Object.values(counts).reduce((sum, n) => sum + n, 0);

  return (
    <SafeAreaView style={styles.safeArea} edges={['top', 'bottom']}>
      {/* 顶部导航 */}
      <View style={styles.header}>
        <Pressable style={styles.headerBtn} onPress={() => router.back()} hitSlop={8}>
          <Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
        </Pressable>
        <View style={styles.headerCenter}>
          <Text style={styles.headerCompany}>{ENTERPRISE_DISPLAY_NAME}</Text>
          <Text style={styles.headerTitle}>收到的投递</Text>
        </View>
        <View style={styles.headerBtn} />
      </View>

      {/* 关键词搜索 */}
      <View style={styles.searchWrap}>
        <Ionicons name="search-outline" size={16} color={colors.textHint} />
        <TextInput
          style={styles.searchInput}
          placeholder="搜索候选人姓名 / 学校 / 岗位"
          placeholderTextColor={colors.textHint}
          value={keyword}
          onChangeText={setKeyword}
          returnKeyType="search"
        />
        {keyword.length > 0 ? (
          <Pressable onPress={() => setKeyword('')} hitSlop={8} accessibilityLabel="清空搜索">
            <Ionicons name="close-circle" size={16} color={colors.textHint} />
          </Pressable>
        ) : null}
      </View>

      {/* 状态筛选：计数来自独立计数口，不随当前筛选变化 */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.filterRow}
      >
        {COMPANY_APPLICATION_FILTERS.map((filter) => {
          const active = filter.value === status;
          const count = filter.value === null ? allCount : counts[filter.value] ?? 0;
          return (
            <Pressable
              key={filter.label}
              style={[styles.filterChip, active && styles.filterChipActive]}
              onPress={() => setStatus(filter.value)}
            >
              <Text style={[styles.filterText, active && styles.filterTextActive]}>
                {filter.label} {count}
              </Text>
            </Pressable>
          );
        })}
      </ScrollView>

      {/* 列表区：四态齐全 */}
      {loading && applications.length === 0 ? (
        <LoadingState text="正在加载投递…" />
      ) : error ? (
        <ErrorState message="投递列表加载失败" onRetry={refresh} />
      ) : isEmpty ? (
        <EmptyState
          icon="file-tray-outline"
          title={keyword || status ? '没有符合条件的投递' : '还没有收到投递'}
          subtitle={
            keyword || status
              ? '换个筛选条件或清空搜索词再试'
              : '岗位发布后，收到的投递会在这里汇总'
          }
          actionLabel={keyword || status ? '清空筛选' : undefined}
          onAction={
            keyword || status
              ? () => {
                  setKeyword('');
                  setStatus(null);
                }
              : undefined
          }
        />
      ) : (
        <ScrollView
          style={styles.list}
          contentContainerStyle={styles.listContent}
          showsVerticalScrollIndicator={false}
        >
          <Text style={styles.summary}>
            共 {total} 条投递
            {status ? ` · 已按「${APPLICATION_STATUS_LABELS[status]}」筛选` : ''}
          </Text>
          {applications.map((item) => (
            <ApplicationRow
              key={item.applicationId}
              item={item}
              onPress={() => router.push(`/application-detail?id=${item.applicationId}`)}
            />
          ))}
        </ScrollView>
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: colors.pageBg,
  },
  /* ---- 顶部导航 ---- */
  header: {
    height: 48,
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerBtn: {
    width: 48,
    height: 48,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerCenter: {
    flex: 1,
    alignItems: 'center',
  },
  headerCompany: {
    fontSize: 11,
    color: colors.textHint,
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  /* ---- 搜索 ---- */
  searchWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    height: 36,
    marginHorizontal: spacing.framework,
    paddingHorizontal: spacing.card,
    borderRadius: spacing.card,
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.border,
  },
  searchInput: {
    flex: 1,
    fontSize: 13,
    color: colors.textPrimary,
    padding: 0,
  },
  /* ---- 筛选 ---- */
  filterRow: {
    paddingHorizontal: spacing.framework,
    paddingVertical: spacing.card,
    gap: spacing.card,
  },
  filterChip: {
    paddingHorizontal: 12,
    height: 30,
    borderRadius: 15,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.white,
    borderWidth: 1,
    borderColor: colors.border,
  },
  filterChipActive: {
    backgroundColor: colors.primaryLight,
    borderColor: colors.primary,
  },
  filterText: {
    fontSize: 12,
    color: colors.textSecondary,
  },
  filterTextActive: {
    color: colors.primaryText,
    fontWeight: '600',
  },
  /* ---- 列表 ---- */
  list: {
    flex: 1,
  },
  listContent: {
    paddingHorizontal: spacing.framework,
    paddingBottom: 24,
  },
  summary: {
    marginBottom: spacing.card,
    fontSize: 12,
    color: colors.textHint,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.card,
    backgroundColor: colors.white,
    borderRadius: spacing.card,
    padding: spacing.card + 4,
    marginBottom: spacing.card,
  },
  avatar: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.primaryLight,
  },
  avatarText: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.primaryText,
  },
  rowMain: {
    flex: 1,
  },
  rowTop: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.card,
  },
  name: {
    flexShrink: 1,
    fontSize: 15,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  badge: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: spacing.card,
  },
  badgeText: {
    fontSize: 11,
    fontWeight: '600',
  },
  rowMeta: {
    marginTop: 4,
    fontSize: 12,
    color: colors.textSecondary,
  },
  rowBottom: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 6,
  },
  jobChip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    flexShrink: 1,
  },
  jobChipText: {
    fontSize: 11,
    color: colors.textSecondary,
  },
  time: {
    fontSize: 11,
    color: colors.textHint,
  },
});