import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useState } from 'react';
import {
  ActivityIndicator,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Line, Path, Polygon, Text as SvgText } from 'react-native-svg';
import { useJobEvaluationEmptyState, useJobEvaluations } from '../src/hooks';
import { colors } from '../src/theme';
import type {
  JobEvaluationDimension,
  JobEvaluationEmptyState,
  JobEvaluationEmptyTab,
  JobEvaluationSummary,
  JobReview,
} from '../src/types';

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

function Header({ onBack }: { onBack: () => void }) {
  return (
    <View style={styles.header}>
      <Pressable style={styles.headerBtn} onPress={onBack} hitSlop={8}>
        <Ionicons name="chevron-back" size={24} color={colors.textPrimary} />
      </Pressable>
      <Text style={styles.headerTitle}>岗位评价管理</Text>
      <Pressable style={styles.headerBtn} hitSlop={8}>
        <Ionicons name="filter-outline" size={22} color={colors.textPrimary} />
      </Pressable>
    </View>
  );
}

/* ===================== 子组件：综合评分卡 ===================== */

function OverallScoreCard({
  score,
  change,
  reviewCount,
  positiveRate,
  replyRate,
  complaintRate,
}: {
  score: number;
  change: number;
  reviewCount: number;
  positiveRate: number;
  replyRate: number;
  complaintRate: number;
}) {
  const up = change >= 0;
  return (
    <View style={styles.scoreCard}>
      <View style={styles.scoreMain}>
        <View>
          <Text style={styles.scoreValue}>{score.toFixed(1)}</Text>
          <Text style={styles.scoreLabel}>企业综合评分</Text>
        </View>
        <View style={styles.scoreMeta}>
          <Text style={[styles.scoreChange, { color: up ? colors.success : colors.danger }]}>
            较上期 {up ? '+' : ''}{change.toFixed(1)}
          </Text>
          <Text style={styles.scoreCount}>{reviewCount} 条评价</Text>
        </View>
      </View>
      <View style={styles.rateRow}>
        <View style={styles.rateItem}>
          <Text style={styles.rateValue}>{positiveRate}%</Text>
          <Text style={styles.rateLabel}>好评率</Text>
        </View>
        <View style={styles.rateItem}>
          <Text style={styles.rateValue}>{replyRate}%</Text>
          <Text style={styles.rateLabel}>回复率</Text>
        </View>
        <View style={styles.rateItem}>
          <Text style={styles.rateValue}>{complaintRate}%</Text>
          <Text style={styles.rateLabel}>投诉率</Text>
        </View>
      </View>
    </View>
  );
}

/* ===================== 子组件：趋势折线图 ===================== */

function TrendChart({ trend }: { trend: { month: string; score: number }[] }) {
  const width = 320;
  const height = 120;
  const padding = { top: 16, right: 24, bottom: 24, left: 32 };
  const chartW = width - padding.left - padding.right;
  const chartH = height - padding.top - padding.bottom;
  const minScore = 4.0;
  const maxScore = 5.0;

  const points = trend.map((t, i) => {
    const x = padding.left + (i / (trend.length - 1)) * chartW;
    const y = padding.top + chartH - ((t.score - minScore) / (maxScore - minScore)) * chartH;
    return { x, y, score: t.score, month: t.month };
  });

  const pathD = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');

  return (
    <View style={styles.chartCard}>
      <Text style={styles.cardTitle}>评分趋势</Text>
      <Svg width={width} height={height}>
        {/* 网格线 */}
        {[4.2, 4.4, 4.6, 4.8].map((s) => {
          const y = padding.top + chartH - ((s - minScore) / (maxScore - minScore)) * chartH;
          return <Line key={s} x1={padding.left} y1={y} x2={width - padding.right} y2={y} stroke={colors.borderLight} strokeWidth={1} />;
        })}
        {/* 折线 */}
        <Path d={pathD} stroke={colors.primary} strokeWidth={2} fill="none" />
        {/* 数据点 */}
        {points.map((p, i) => (
          <Polygon
            key={i}
            points={`${p.x - 4},${p.y - 4} ${p.x + 4},${p.y - 4} ${p.x},${p.y + 4}`}
            fill={colors.primary}
          />
        ))}
        {/* X 轴标签 */}
        {points.map((p, i) => (
          <SvgText key={i} x={p.x} y={height - 6} fill={colors.textSecondary} fontSize={10} textAnchor="middle">
            {p.month}
          </SvgText>
        ))}
      </Svg>
    </View>
  );
}

/* ===================== 子组件：雷达图 ===================== */

function RadarChart({ dimensions }: { dimensions: JobEvaluationDimension[] }) {
  const size = 200;
  const center = size / 2;
  const radius = 70;
  const angleStep = (Math.PI * 2) / dimensions.length;

  const points = dimensions.map((d, i) => {
    const angle = i * angleStep - Math.PI / 2;
    const r = (d.score / d.maxScore) * radius;
    const x = center + r * Math.cos(angle);
    const y = center + r * Math.sin(angle);
    return { x, y, label: d.name };
  });

  const axisPoints = dimensions.map((_, i) => {
    const angle = i * angleStep - Math.PI / 2;
    return {
      x: center + radius * Math.cos(angle),
      y: center + radius * Math.sin(angle),
      label: dimensions[i].name,
    };
  });

  const polygonPoints = points.map((p) => `${p.x},${p.y}`).join(' ');

  return (
    <View style={styles.radarCard}>
      <Text style={styles.cardTitle}>六维评分</Text>
      <Svg width={size} height={size}>
        {/* 网格圆 */}
        {[0.2, 0.4, 0.6, 0.8, 1].map((scale) => (
          <Polygon
            key={scale}
            points={axisPoints.map((a) => {
              const px = center + (a.x - center) * scale;
              const py = center + (a.y - center) * scale;
              return `${px},${py}`;
            }).join(' ')}
            fill="none"
            stroke={colors.borderLight}
            strokeWidth={1}
          />
        ))}
        {/* 轴线 */}
        {axisPoints.map((a, i) => (
          <Line key={i} x1={center} y1={center} x2={a.x} y2={a.y} stroke={colors.borderLight} strokeWidth={1} />
        ))}
        {/* 数据区域 */}
        <Polygon points={polygonPoints} fill={colors.primary + '30'} stroke={colors.primary} strokeWidth={2} />
        {/* 标签 */}
        {axisPoints.map((a, i) => {
          const labelX = center + (a.x - center) * 1.22;
          const labelY = center + (a.y - center) * 1.22;
          return (
            <SvgText key={i} x={labelX} y={labelY} fill={colors.textSecondary} fontSize={10} textAnchor="middle" alignmentBaseline="middle">
              {a.label}
            </SvgText>
          );
        })}
      </Svg>
    </View>
  );
}

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

function JobScoreList({ jobs }: { jobs: JobEvaluationSummary[] }) {
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>各岗位评分</Text>
      {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} · {job.reviewCount} 条评价</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>
  );
}

/* ===================== 子组件：空状态 Tab 栏 ===================== */

function EmptyTabBar({
  tabs,
  active,
  onChange,
}: {
  tabs: JobEvaluationEmptyTab[];
  active: string;
  onChange: (key: string) => void;
}) {
  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.emptyTabContent}
    >
      {tabs.map((tab) => {
        const isActive = tab.key === active;
        return (
          <Pressable
            key={tab.key}
            style={[styles.emptyTabItem, isActive && styles.emptyTabItemActive]}
            onPress={() => onChange(tab.key)}
          >
            <Text style={[styles.emptyTabLabel, isActive && styles.emptyTabLabelActive]}>
              {tab.label}
            </Text>
            <Text style={[styles.emptyTabCount, isActive && styles.emptyTabCountActive]}>
              ({tab.count})
            </Text>
          </Pressable>
        );
      })}
    </ScrollView>
  );
}

/* ===================== 子组件：空状态 ===================== */

function EmptyState({ state }: { state: JobEvaluationEmptyState }) {
  const [activeTab, setActiveTab] = useState('all');
  return (
    <View style={styles.emptyWrapper}>
      <EmptyTabBar tabs={state.tabs} active={activeTab} onChange={setActiveTab} />
      <View style={styles.emptyCard}>
        <View style={styles.emptyIconWrap}>
          <Ionicons name="star-outline" size={48} color={colors.primary} />
        </View>
        <Text style={styles.emptyMainTitle}>暂无评分数据</Text>
        <Text style={styles.emptyTitle}>{state.emptyTitle}</Text>
        <Text style={styles.emptySubtitle}>{state.emptySubtitle}</Text>

        <View style={styles.tipCard}>
          <View style={styles.tipHeader}>
            <Ionicons name="bulb-outline" size={18} color={colors.compareOrange} />
            <Text style={styles.tipHeaderTitle}>如何获得更多好评？</Text>
          </View>
          {state.tips.map((tip, index) => (
            <View key={index} style={styles.tipRow}>
              <View style={styles.tipDot} />
              <Text style={styles.tipText}>{tip}</Text>
            </View>
          ))}
        </View>
      </View>
    </View>
  );
}

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

function ReviewList({ reviews }: { reviews: JobReview[] }) {
  return (
    <View style={styles.card}>
      <Text style={styles.cardTitle}>最新评价</Text>
      {reviews.map((review) => (
        <View key={review.id} style={styles.reviewItem}>
          <View style={styles.reviewHeader}>
            <View style={styles.reviewUser}>
              <Text style={styles.reviewName}>{review.userName}</Text>
              <Text style={styles.reviewRole}>{review.userRole}</Text>
            </View>
            <View style={styles.reviewRating}>
              <Text style={styles.reviewScore}>{review.rating}.0</Text>
              <Ionicons name="star" size={12} color={colors.compareOrange} />
            </View>
          </View>
          <Text style={styles.reviewContent}>{review.content}</Text>
          <View style={styles.tagRow}>
            {review.tags.map((tag) => (
              <View key={tag} style={styles.reviewTag}>
                <Text style={styles.reviewTagText}>{tag}</Text>
              </View>
            ))}
          </View>
          <View style={styles.reviewFooter}>
            <Text style={styles.reviewDate}>{review.date}</Text>
            <Pressable style={styles.replyBtn}>
              <Text style={styles.replyText}>{review.replied ? '已回复' : '回复'}</Text>
            </Pressable>
          </View>
        </View>
      ))}
    </View>
  );
}

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

export default function JobEvaluationsScreen() {
  const router = useRouter();
  const { management, loading: dataLoading, error: dataError } = useJobEvaluations();
  const { state: emptyState, loading: emptyLoading, error: emptyError } = useJobEvaluationEmptyState();

  const loading = dataLoading || emptyLoading;
  const error = dataError || emptyError;

  if (loading) {
    return (
      <SafeAreaView style={styles.loadingContainer} edges={['top']}>
        <ActivityIndicator size="large" color={colors.primary} />
      </SafeAreaView>
    );
  }

  if (error) {
    return (
      <SafeAreaView style={styles.loadingContainer} edges={['top']}>
        <Text style={styles.errorText}>加载失败，请稍后重试</Text>
      </SafeAreaView>
    );
  }

  const showEmpty = emptyState?.hasData === false;

  return (
    <View style={styles.container}>
      <SafeAreaView edges={['top']}>
        <Header onBack={() => router.back()} />
      </SafeAreaView>
      <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
        {showEmpty && emptyState ? (
          <EmptyState state={emptyState} />
        ) : management ? (
          <>
            <OverallScoreCard
              score={management.overallScore}
              change={management.change}
              reviewCount={management.reviewCount}
              positiveRate={management.positiveRate}
              replyRate={management.replyRate}
              complaintRate={management.complaintRate}
            />
            <TrendChart trend={management.trend} />
            <RadarChart dimensions={management.dimensions} />
            <JobScoreList jobs={management.jobScores} />
            <ReviewList reviews={management.reviews} />
          </>
        ) : null}
      </ScrollView>
    </View>
  );
}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.pageBg,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.pageBg,
  },
  errorText: {
    color: colors.textSecondary,
    fontSize: 14,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: colors.white,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  headerBtn: {
    width: 36,
    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '600',
    color: colors.textPrimary,
  },
  scroll: {
    flex: 1,
  },
  scrollContent: {
    padding: 16,
    paddingBottom: 32,
  },
  scoreCard: {
    backgroundColor: colors.primary,
    borderRadius: 16,
    padding: 20,
    marginBottom: 16,
  },
  scoreMain: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  scoreValue: {
    fontSize: 42,
    fontWeight: '700',
    color: colors.white,
  },
  scoreLabel: {
    fontSize: 14,
    color: colors.white,
    opacity: 0.9,
  },
  scoreMeta: {
    alignItems: 'flex-end',
  },
  scoreChange: {
    fontSize: 14,
    fontWeight: '600',
    marginBottom: 4,
  },
  scoreCount: {
    fontSize: 13,
    color: colors.white,
    opacity: 0.9,
  },
  rateRow: {
    flexDirection: 'row',
    borderTopWidth: 1,
    borderTopColor: 'rgba(255,255,255,0.2)',
    paddingTop: 16,
  },
  rateItem: {
    flex: 1,
    alignItems: 'center',
  },
  rateValue: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.white,
    marginBottom: 2,
  },
  rateLabel: {
    fontSize: 12,
    color: colors.white,
    opacity: 0.9,
  },
  card: {
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.04,
    shadowRadius: 6,
    elevation: 2,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '700',
    color: colors.textPrimary,
    marginBottom: 12,
  },
  chartCard: {
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 16,
    marginBottom: 16,
    alignItems: 'center',
  },
  radarCard: {
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 16,
    marginBottom: 16,
    alignItems: 'center',
  },
  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,
  },
  reviewItem: {
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderLight,
  },
  reviewHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 8,
  },
  reviewUser: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  reviewName: {
    fontSize: 14,
    fontWeight: '600',
    color: colors.textPrimary,
    marginRight: 8,
  },
  reviewRole: {
    fontSize: 12,
    color: colors.textSecondary,
  },
  reviewRating: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  reviewScore: {
    fontSize: 14,
    fontWeight: '700',
    color: colors.compareOrange,
    marginRight: 4,
  },
  reviewContent: {
    fontSize: 14,
    color: colors.textPrimary,
    lineHeight: 20,
    marginBottom: 10,
  },
  tagRow: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 10,
  },
  reviewTag: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 12,
    backgroundColor: colors.primaryLight,
    marginRight: 8,
    marginBottom: 6,
  },
  reviewTagText: {
    fontSize: 11,
    color: colors.primaryText,
  },
  reviewFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  reviewDate: {
    fontSize: 12,
    color: colors.textHint,
  },
  replyBtn: {
    paddingHorizontal: 12,
    paddingVertical: 5,
    borderRadius: 12,
    backgroundColor: colors.primaryLight,
  },
  replyText: {
    fontSize: 12,
    color: colors.primary,
    fontWeight: '500',
  },
  /* ---- 空状态 ---- */
  emptyWrapper: {
    marginBottom: 16,
  },
  emptyTabContent: {
    paddingHorizontal: 8,
    paddingVertical: 12,
    gap: 8,
  },
  emptyTabItem: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    backgroundColor: colors.pageBg,
    borderWidth: 1,
    borderColor: colors.border,
  },
  emptyTabItemActive: {
    backgroundColor: colors.primaryLight,
    borderColor: colors.primary,
  },
  emptyTabLabel: {
    fontSize: 13,
    color: colors.textSecondary,
  },
  emptyTabLabelActive: {
    color: colors.primary,
    fontWeight: '600',
  },
  emptyTabCount: {
    fontSize: 12,
    color: colors.textHint,
    marginLeft: 2,
  },
  emptyTabCountActive: {
    color: colors.primary,
  },
  emptyCard: {
    backgroundColor: colors.white,
    borderRadius: 16,
    padding: 28,
    alignItems: 'center',
    marginTop: 8,
  },
  emptyIconWrap: {
    width: 88,
    height: 88,
    borderRadius: 44,
    backgroundColor: colors.primaryLight,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  emptyMainTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: colors.textPrimary,
    marginBottom: 8,
  },
  emptyTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.textPrimary,
    marginBottom: 6,
  },
  emptySubtitle: {
    fontSize: 13,
    color: colors.textSecondary,
    textAlign: 'center',
    lineHeight: 20,
    marginBottom: 20,
  },
  tipCard: {
    width: '100%',
    backgroundColor: colors.actionLight,
    borderRadius: 12,
    padding: 16,
    alignItems: 'flex-start',
  },
  tipHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  tipHeaderTitle: {
    fontSize: 14,
    fontWeight: '700',
    color: colors.actionText,
    marginLeft: 8,
  },
  tipRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 10,
  },
  tipDot: {
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: colors.action,
    marginTop: 6,
    marginRight: 10,
  },
  tipText: {
    flex: 1,
    fontSize: 13,
    color: colors.textPrimary,
    lineHeight: 18,
  },
});