import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import {
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useEnterpriseOverview } from '../../src/hooks';
import { LoadingState, ErrorState } from '../../src/components/StateView';
import { useRole } from '../../src/context/RoleContext';
import { colors, headerGradient, semanticColorTokens } from '../../src/theme';
import type { EnterpriseOverview, EnterpriseQuickAction, EnterpriseStat, JobEvaluationSummary, MenuItem } from '../../src/types';

/* ===================== 子组件：顶部导航 ===================== */

function Header({ onSettings }: { onSettings: () => void }) {
  return (
    <View style={styles.header}>
      <View style={styles.headerBtn} />
      <Text style={styles.headerTitle}>我的</Text>
      <Pressable style={styles.headerBtn} onPress={onSettings} hitSlop={8}>
        <Ionicons name="settings-outline" size={22} color={colors.textInverse} />
      </Pressable>
    </View>
  );
}

/* ===================== 子组件：企业信息卡 ===================== */

function CompanyCard({ overview }: { overview: EnterpriseOverview }) {
  return (
    <View style={styles.companyCard}>
      <View style={styles.companyHeader}>
        <View style={styles.logoBox}>
          <Text style={styles.logoText}>{overview.logo}</Text>
        </View>
        <View style={styles.companyMeta}>
          <Text style={styles.companyName}>{overview.name}</Text>
          <Text style={styles.companyTags}>
            {overview.industry} · {overview.scale} · {overview.stage}
          </Text>
        </View>
      </View>
      <View style={styles.scoreRow}>
        <View style={styles.scoreBox}>
          <Text style={styles.scoreValue}>{overview.overallScore}</Text>
          <Text style={styles.scoreLabel}>综合评分</Text>
        </View>
        <View style={styles.divider} />
        <View style={styles.scoreBox}>
          <Text style={styles.scoreValue}>{overview.reviewCount}</Text>
          <Text style={styles.scoreLabel}>评价人数</Text>
        </View>
        <View style={styles.divider} />
        <View style={styles.scoreBox}>
          <Text style={styles.scoreValue}>{overview.stats[0]?.value ?? 0}</Text>
          <Text style={styles.scoreLabel}>在招岗位</Text>
        </View>
      </View>
    </View>
  );
}

/* ===================== 子组件：统计四宫格 ===================== */

function StatGrid({ stats }: { stats: EnterpriseStat[] }) {
  return (
    <View style={styles.card}>
      <View style={styles.statGrid}>
        {stats.map((stat) => {
          const color = semanticColorTokens[stat.color] ?? colors.primary;
          const up = stat.change >= 0;
          return (
            <View key={stat.id} style={styles.statItem}>
              <View style={[styles.statIcon, { backgroundColor: color + '15' }]}>
                <Ionicons name={stat.icon as keyof typeof Ionicons.glyphMap} size={20} color={color} />
              </View>
              <Text style={styles.statValue}>{stat.value.toLocaleString()}</Text>
              <Text style={styles.statLabel}>{stat.label}</Text>
              <Text style={[styles.statChange, { color: up ? colors.success : colors.danger }]}>
                {up ? '↑' : '↓'} {Math.abs(stat.change)}
              </Text>
            </View>
          );
        })}
      </View>
    </View>
  );
}

/* ===================== 子组件：快捷入口 ===================== */

function QuickActions({ actions }: { actions: EnterpriseQuickAction[] }) {
  const router = useRouter();
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>快捷入口</Text>
      <View style={styles.quickGrid}>
        {actions.map((action) => {
          const color = semanticColorTokens[action.color] ?? colors.primary;
          return (
            <Pressable
              key={action.id}
              style={styles.quickItem}
              onPress={() => action.route && router.push(action.route as string)}
            >
              <View style={[styles.quickIcon, { backgroundColor: color + '15' }]}>
                <Ionicons name={action.icon as keyof typeof Ionicons.glyphMap} size={22} color={color} />
              </View>
              <Text style={styles.quickLabel}>{action.label}</Text>
            </Pressable>
          );
        })}
      </View>
    </View>
  );
}

/* ===================== 子组件：岗位评价列表 ===================== */

function JobEvaluationList({ jobs }: { jobs: JobEvaluationSummary[] }) {
  const router = useRouter();
  return (
    <View style={styles.card}>
      <View style={styles.cardHeader}>
        <Text style={styles.cardTitle}>岗位评价管理</Text>
        <Pressable onPress={() => router.push('/job-evaluations')}>
          <Text style={styles.cardMore}>查看全部</Text>
        </Pressable>
      </View>
      {jobs.map((job) => {
        const up = job.change >= 0;
        return (
          <View key={job.id} style={styles.jobRow}>
            <View style={styles.jobInfo}>
              <Text style={styles.jobName}>{job.positionName}</Text>
              <Text style={styles.jobDepartment}>{job.department}</Text>
            </View>
            <View style={styles.jobScoreBox}>
              <Text style={styles.jobScore}>{job.score.toFixed(1)}</Text>
              <Text style={[styles.jobChange, { color: up ? colors.success : colors.danger }]}>
                {up ? '↑' : '↓'} {Math.abs(job.change).toFixed(1)}
              </Text>
            </View>
          </View>
        );
      })}
    </View>
  );
}

/* ===================== 子组件：管理后台 ===================== */

/**
 * 管理后台入口：运营规则配置 / 数据审计等低频管理操作。
 * 单独成区纵向排列，既不挤占快捷入口的横排位，也避免后台术语出现在求职者端。
 */
function ManageList({ actions }: { actions: EnterpriseQuickAction[] }) {
  const router = useRouter();
  if (actions.length === 0) return null;
  return (
    <View style={styles.card}>
      <Text style={styles.standaloneTitle}>管理后台</Text>
      {actions.map((action) => {
        const color = semanticColorTokens[action.color] ?? colors.primary;
        return (
          <Pressable
            key={action.id}
            style={styles.manageRow}
            onPress={() => action.route && router.push(action.route as string)}
          >
            <View style={[styles.manageIcon, { backgroundColor: color + '15' }]}>
              <Ionicons name={action.icon as keyof typeof Ionicons.glyphMap} size={20} color={color} />
            </View>
            <Text style={styles.manageLabel}>{action.label}</Text>
            <Ionicons name="chevron-forward" size={18} color={colors.textHint} />
          </Pressable>
        );
      })}
    </View>
  );
}

/* ===================== 子组件：企业功能菜单 ===================== */

/**
 * 企业端功能菜单（更多服务）：发布岗位 / 岗位管理 / 人才推荐等业务功能。
 * 与求职者端菜单严格隔离，由 AppRole='enterprise' 下发，避免角色混淆。
 */
function MenuList({ items }: { items: MenuItem[] }) {
  const router = useRouter();
  if (items.length === 0) return null;
  return (
    <View style={styles.card}>
      <Text style={styles.standaloneTitle}>更多服务</Text>
      {items.map((item) => (
        <Pressable
          key={item.id}
          style={styles.manageRow}
          onPress={() => item.route && router.push(item.route as string)}
        >
          <View style={[styles.manageIcon, { backgroundColor: colors.primary + '15' }]}>
            <Ionicons name={item.icon as keyof typeof Ionicons.glyphMap} size={20} color={colors.primary} />
          </View>
          <Text style={styles.manageLabel}>{item.title}</Text>
          <Ionicons name="chevron-forward" size={18} color={colors.textHint} />
        </Pressable>
      ))}
    </View>
  );
}

/* ===================== 子组件：切换到求职端卡片 ===================== */

/**
 * 企业端「我的」页回切求职端，与求职端「切换到企业端」卡片对称，
 * 避免经「设置→身份切换」进入企业端后返回栈为空、回不去求职端。
 */
function CandidateEntryCard() {
  const router = useRouter();
  const { setRole } = useRole();
  return (
    <Pressable
      style={styles.candidateCard}
      onPress={() => {
        setRole('candidate');
        router.replace('/(tabs)/jobs');
      }}
      hitSlop={4}
    >
      <View style={styles.candidateIconWrap}>
        <Ionicons name="person-outline" size={22} color={colors.primary} />
      </View>
      <View style={styles.candidateText}>
        <Text style={styles.candidateTitle}>切换到求职端</Text>
        <Text style={styles.candidateDesc}>返回求职者端，浏览岗位与你的竞争力数据</Text>
      </View>
      <Text style={styles.candidateAction}>去求职端 →</Text>
    </Pressable>
  );
}

/* ===================== 页面主组件 ===================== */

export default function EnterpriseOverviewScreen() {
  const router = useRouter();
  const { overview, loading, error, refresh } = useEnterpriseOverview();

  if (loading) {
    return (
      <SafeAreaView style={styles.loadingContainer} edges={['top']}>
        <LoadingState text="加载中…" />
      </SafeAreaView>
    );
  }

  if (error || !overview) {
    return (
      <SafeAreaView style={styles.loadingContainer} edges={['top']}>
        <ErrorState onRetry={refresh} />
      </SafeAreaView>
    );
  }

  return (
    <View style={styles.container}>
      <LinearGradient colors={headerGradient} style={styles.gradientHeader}>
        <SafeAreaView edges={['top']}>
          <Header onSettings={() => router.push('/settings')} />
          <CompanyCard overview={overview} />
        </SafeAreaView>
      </LinearGradient>
      <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
        <CandidateEntryCard />
        <StatGrid stats={overview.stats} />
        <QuickActions actions={overview.quickActions} />
        <JobEvaluationList jobs={overview.jobEvaluations} />
        <ManageList actions={overview.manageActions} />
        <MenuList items={overview.menuItems} />
      </ScrollView>
    </View>
  );
}

/* ===================== 样式 ===================== */

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.pageBg,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.pageBg,
  },
  gradientHeader: {
    paddingBottom: 16,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  headerBtn: {
    width: 36,
    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '600',
    color: colors.textInverse,
  },
  companyCard: {
    marginHorizontal: 16,
    marginTop: 8,
    padding: 16,
    backgroundColor: colors.white,
    borderRadius: 8,
  },
  companyHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 16,
  },
  logoBox: {
    width: 52,
    height: 52,
    borderRadius: 12,
    backgroundColor: colors.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  logoText: {
    fontSize: 22,
    fontWeight: '700',
    color: colors.primary,
  },
  companyMeta: {
    flex: 1,
  },
  companyName: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.textPrimary,
    marginBottom: 4,
  },
  companyTags: {
    fontSize: 13,
    color: colors.textSecondary,
  },
  scoreRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 16,
    borderTopWidth: 1,
    borderTopColor: colors.borderLight,
  },
  scoreBox: {
    flex: 1,
    alignItems: 'center',
  },
  scoreValue: {
    fontSize: 20,
    fontWeight: '700',
    color: colors.primary,
    marginBottom: 2,
  },
  scoreLabel: {
    fontSize: 12,
    color: colors.textSecondary,
  },
  divider: {
    width: 1,
    height: 32,
    backgroundColor: colors.borderLight,
  },
  scroll: {
    flex: 1,
  },
  scrollContent: {
    padding: 16,
    paddingBottom: 32,
  },
  card: {
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
  },
  cardHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 12,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.textPrimary,
  },
  cardMore: {
    fontSize: 13,
    color: colors.primary,
  },
  statGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginHorizontal: -6,
  },
  statItem: {
    width: '25%',
    paddingHorizontal: 6,
    alignItems: 'center',
  },
  statIcon: {
    width: 44,
    height: 44,
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 8,
  },
  statValue: {
    fontSize: 17,
    fontWeight: '700',
    color: colors.textPrimary,
    marginBottom: 2,
  },
  statLabel: {
    fontSize: 12,
    color: colors.textSecondary,
    marginBottom: 2,
  },
  statChange: {
    fontSize: 11,
    fontWeight: '500',
  },
  quickGrid: {
    flexDirection: 'row',
    marginHorizontal: -8,
  },
  quickItem: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 8,
  },
  quickIcon: {
    width: 48,
    height: 48,
    borderRadius: 14,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 8,
  },
  quickLabel: {
    fontSize: 13,
    color: colors.textPrimary,
  },
  jobRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  jobInfo: {
    flex: 1,
  },
  jobName: {
    fontSize: 15,
    fontWeight: '600',
    color: colors.textPrimary,
    marginBottom: 2,
  },
  jobDepartment: {
    fontSize: 12,
    color: colors.textSecondary,
  },
  jobScoreBox: {
    alignItems: 'flex-end',
  },
  jobScore: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.primary,
  },
  jobChange: {
    fontSize: 11,
    fontWeight: '500',
    marginTop: 2,
  },
  standaloneTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.textPrimary,
    marginBottom: 8,
  },
  manageRow: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  manageIcon: {
    width: 38,
    height: 38,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  manageLabel: {
    flex: 1,
    fontSize: 15,
    fontWeight: '500',
    color: colors.textPrimary,
  },
  candidateCard: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.white,
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
  },
  candidateIconWrap: {
    width: 44,
    height: 44,
    borderRadius: 12,
    backgroundColor: colors.primaryLight,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  candidateText: {
    flex: 1,
  },
  candidateTitle: {
    fontSize: 15,
    fontWeight: '600',
    color: colors.textPrimary,
    marginBottom: 2,
  },
  candidateDesc: {
    fontSize: 12,
    color: colors.textSecondary,
  },
  candidateAction: {
    fontSize: 13,
    fontWeight: '600',
    color: colors.primary,
    marginLeft: 8,
  },
});