import React, { useState, useMemo } from 'react';
import { 
  PieChart, Pie, Cell, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer 
} from 'recharts';
import { Users, GraduationCap, Clock, Briefcase, Upload, Award, Sparkles, Brain, AlertCircle, Building2, UserCircle } from 'lucide-react';

// --- 预置真实数据集 (基于您提供的 CSV 文件) ---
const DEMO_DATA = [
  { name: "何隆基", enName: "Keith", dept: "产品运营中心", role: "产品总监", level: "P7", joinDate: "2021/4/26", degree: "硕士", school: "Northern Arizona University", major: "计算机科学与技术", gender: "男", mbti: "INTJ-T", zodiac: "射手座", status: "在职" },
  { name: "林颖聪", enName: "Molly", dept: "Ug运营部", role: "海外运营经理", level: "S5", joinDate: "2019/6/3", degree: "本科", school: "广东外语外贸大学", major: "英语", gender: "女", mbti: "ESTP-A", zodiac: "天秤座", status: "在职" },
  { name: "周一苇", enName: "Ivan", dept: "技术研发部", role: "技术项目经理", level: "T3", joinDate: "2024/6/3", degree: "本科", school: "江西理工大学", major: "计算机科学与技术", gender: "男", mbti: "ISFP-A", zodiac: "天秤座", status: "在职" },
  { name: "梁伟茂", enName: "Cross", dept: "技术研发部-前端开发组", role: "前端开发工程师", level: "T3", joinDate: "2023/5/12", degree: "本科", school: "华南理工大学", major: "软件工程", gender: "男", mbti: "INTP-A", zodiac: "金牛座", status: "在职" },
  { name: "唐衍宁", enName: "Robin", dept: "Ug运营部-海外运营部", role: "海外用户运营", level: "S1", joinDate: "2025/10/27", degree: "硕士", school: "法国克莱蒙高等商学院", major: "商业智能与分析", gender: "女", mbti: "INTJ-T", zodiac: "天蝎座", status: "试用期" },
  { name: "何运凤", enName: "Rabbit", dept: "产品开发部-UI设计组", role: "UI设计师", level: "P2", joinDate: "2025/11/3", degree: "本科", school: "广州大学华软软件学院", major: "动画", gender: "女", mbti: "ENFP-T", zodiac: "摩羯座", status: "试用期" },
  { name: "李佳田", enName: "Freya", dept: "Ug运营部-海外运营部", role: "海外用户运营", level: "S1", joinDate: "2025/11/5", degree: "硕士", school: "韩国外国语大学", major: "文化产业管理", gender: "女", mbti: "ENFJ-A", zodiac: "天秤座", status: "试用期" },
  { name: "黄振华", enName: "Miles", dept: "产品开发部-电商与数据组", role: "数据分析实习生", level: "P0", joinDate: "2024/10/8", degree: "硕士", school: "广东财经大学", major: "应用统计", gender: "男", mbti: "ISTJ", zodiac: "巨蟹座", status: "试用期" },
  { name: "庄凯霖", enName: "Patrick", dept: "产品开发部-AIGC项目组", role: "AIGC研究员", level: "T0", joinDate: "2024/1/19", degree: "本科", school: "华南理工大学", major: "人工智能", gender: "男", mbti: "INTP", zodiac: "处女座", status: "离职" }
];

const COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#3b82f6', '#f43f5e', '#06b6d4'];
const GENDER_COLORS = ['#3b82f6', '#ec4899', '#94a3b8']; // 男, 女, 未知

// --- 强大的 CSV 解析辅助函数 ---
const parseCSVLine = (text) => {
  const result = [];
  let cell = '';
  let inQuotes = false;

  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    if (char === '"') {
      inQuotes = !inQuotes;
    } else if (char === ',' && !inQuotes) {
      result.push(cell.trim());
      cell = '';
    } else {
      cell += char;
    }
  }
  result.push(cell.trim());
  return result;
};

// --- 数据清洗辅助函数 ---
const calculateTenure = (joinDateStr) => {
  if (!joinDateStr) return 0;
  // 尝试处理 Excel 数字日期格式 (例如 45321)
  let joinDate;
  if (!isNaN(joinDateStr) && !joinDateStr.includes('-') && !joinDateStr.includes('/')) {
     joinDate = new Date((joinDateStr - 25569) * 86400 * 1000);
  } else {
     joinDate = new Date(joinDateStr);
  }
  
  if (isNaN(joinDate.getTime())) return 0; // 无效日期

  const today = new Date('2026-01-22');
  const diffTime = Math.abs(today - joinDate);
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
  return (diffDays / 365).toFixed(1);
};

const cleanMBTI = (mbtiStr) => {
  if (!mbtiStr) return "未知";
  // 处理类似 INTJ-T, (ENFJ-A 的格式
  const clean = mbtiStr.replace(/[^a-zA-Z]/g, '').substring(0, 4).toUpperCase();
  return clean.length === 4 ? clean : "未知";
};

const getSchoolTier = (schoolName) => {
  if (!schoolName) return "其他高校";
  const tier1 = ["清华大学", "北京大学", "复旦大学", "上海交通大学", "浙江大学", "南京大学", "中国科学技术大学", "中山大学", "华南理工大学", "哈尔滨工业大学", "西安交通大学", "武汉大学", "华中科技大学"];
  // 简单的逻辑判断是否为纯中文，如果包含英文字符通常是海外（或数据源自带英文名）
  if (/[a-zA-Z]/.test(schoolName) || /University|College|School|Institute/i.test(schoolName)) return "海外高校";
  if (tier1.some(s => schoolName.includes(s))) return "985/双一流";
  return "其他高校";
};

// --- 字段映射逻辑 ---
const FIELD_ALIASES = {
  name: ["姓名", "Name", "员工姓名"],
  enName: ["英文名", "English Name", "EnName"],
  dept: ["子部门", "部门", "Department", "Dept", "一级部门", "SubDepartment", "二级部门"], // 优先取子部门
  role: ["职位", "岗位", "Role", "Position", "职务"],
  level: ["职级", "Level", "Rank", "等级"],
  joinDate: ["入职时间", "入职日期", "Join Date", "JoinDate"],
  degree: ["学历", "最高学历", "Degree", "Education"],
  school: ["毕业学校", "毕业院校", "School", "University"],
  major: ["专业", "Major", "所学专业"],
  gender: ["性别", "Gender"],
  mbti: ["MBTI", "mbti", "Mbti", "性格测试"],
  zodiac: ["星座", "Zodiac", "星盘"],
  status: ["在职情况", "状态", "Status", "员工状态"]
};

const matchHeader = (headers, fieldKey) => {
  const aliases = FIELD_ALIASES[fieldKey];
  let index = headers.findIndex(h => aliases.includes(h));
  if (index === -1) {
    index = headers.findIndex(h => aliases.some(alias => h.includes(alias)));
  }
  return index;
};

// --- 组件 ---

const StatCard = ({ title, value, subtext, icon: Icon, color }) => (
  <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-start space-x-4">
    <div className={`p-3 rounded-lg ${color} bg-opacity-10`}>
      <Icon className={`w-6 h-6 ${color.replace('bg-', 'text-')}`} />
    </div>
    <div>
      <p className="text-sm font-medium text-slate-500">{title}</p>
      <h3 className="text-2xl font-bold text-slate-800 mt-1">{value}</h3>
      {subtext && <p className="text-xs text-slate-400 mt-1">{subtext}</p>}
    </div>
  </div>
);

const SectionTitle = ({ title, icon: Icon }) => (
  <div className="flex items-center space-x-2 mb-6 mt-2">
    <Icon className="w-5 h-5 text-indigo-600" />
    <h2 className="text-lg font-bold text-slate-800">{title}</h2>
  </div>
);

export default function TeamDashboard() {
  const [rawData, setRawData] = useState(DEMO_DATA);
  const [fileName, setFileName] = useState("预置数据 (2026.01.22)");
  const [errorMsg, setErrorMsg] = useState("");

  // --- 数据处理 Hook ---
  const analytics = useMemo(() => {
    let totalTenure = 0;
    let masterCount = 0;
    let validTenureCount = 0;
    
    const degreeDist = {};
    const levelDist = {};
    const mbtiDist = {};
    const zodiacDist = {};
    const deptDist = {};
    const genderDist = { "男": 0, "女": 0 };
    const tenureDist = { "< 1年": 0, "1-3年": 0, "3-5年": 0, "5年以上": 0 };
    const schoolTierDist = {};
    const mbtiDimension = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };

    rawData.forEach(item => {
      // 学历
      const degree = item.degree ? item.degree.replace(/[\r\n]/g, '').trim() : "未知";
      if (degree) {
         degreeDist[degree] = (degreeDist[degree] || 0) + 1;
         if (degree.includes("硕士") || degree.includes("博士") || degree.includes("Master") || degree.includes("PhD")) masterCount++;
      }

      // 部门 (清理一下长部门名)
      let dept = item.dept || "未知部门";
      // 如果部门名包含“-”，通常取最后一段作为短名，或者保留全名
      // 例如 "Ug运营部-海外运营部" -> "海外运营部"
      if (dept.includes('-')) {
        const parts = dept.split('-');
        dept = parts[parts.length - 1]; 
      }
      deptDist[dept] = (deptDist[dept] || 0) + 1;

      // 性别
      if (item.gender === "男") genderDist["男"]++;
      else if (item.gender === "女") genderDist["女"]++;
      else genderDist["未知"] = (genderDist["未知"] || 0) + 1;

      // 职级
      let levelPrefix = "其他";
      if (item.level) {
        const cleanLevel = item.level.trim().toUpperCase();
        if (cleanLevel.startsWith('P')) levelPrefix = "P序列 (产品/运营)";
        else if (cleanLevel.startsWith('T')) levelPrefix = "T序列 (技术)";
        else if (cleanLevel.startsWith('S')) levelPrefix = "S序列 (职能/支持)";
        else if (cleanLevel.startsWith('M')) levelPrefix = "M序列 (管理)";
        else levelPrefix = cleanLevel.charAt(0);
      }
      levelDist[levelPrefix] = (levelDist[levelPrefix] || 0) + 1;

      // 司龄
      const tenure = parseFloat(calculateTenure(item.joinDate));
      if (tenure >= 0) { // 含 0
        totalTenure += tenure;
        validTenureCount++;
        if (tenure < 1) tenureDist["< 1年"]++;
        else if (tenure < 3) tenureDist["1-3年"]++;
        else if (tenure < 5) tenureDist["3-5年"]++;
        else tenureDist["5年以上"]++;
      }

      // MBTI
      const mbti = cleanMBTI(item.mbti);
      if (mbti !== "未知") {
        mbtiDist[mbti] = (mbtiDist[mbti] || 0) + 1;
        mbti.split('').forEach(char => mbtiDimension[char]++);
      }

      // 星座
      let zodiac = item.zodiac ? item.zodiac.trim() : "未知";
      if (zodiac === "NaN" || !zodiac) zodiac = "未知";
      if (zodiac !== "未知") {
        zodiacDist[zodiac] = (zodiacDist[zodiac] || 0) + 1;
      }

      // 学校层级
      const tier = getSchoolTier(item.school);
      schoolTierDist[tier] = (schoolTierDist[tier] || 0) + 1;
    });

    return {
      totalCount: rawData.length,
      avgTenure: validTenureCount ? (totalTenure / validTenureCount).toFixed(1) : 0,
      masterRatio: rawData.length ? ((masterCount / rawData.length) * 100).toFixed(0) : 0,
      degreeData: Object.entries(degreeDist).map(([name, value]) => ({ name, value })),
      levelData: Object.entries(levelDist).map(([name, value]) => ({ name, value })),
      tenureData: Object.entries(tenureDist).map(([name, value]) => ({ name, value })),
      mbtiData: Object.entries(mbtiDist)
        .map(([name, value]) => ({ name, value }))
        .sort((a, b) => b.value - a.value)
        .slice(0, 8),
      zodiacData: Object.entries(zodiacDist).map(([name, value]) => ({ name, value })),
      schoolTierData: Object.entries(schoolTierDist).map(([name, value]) => ({ name, value })),
      deptData: Object.entries(deptDist).map(([name, value]) => ({ name, value })).sort((a,b) => b.value - a.value),
      genderData: Object.entries(genderDist).filter(([_,v]) => v > 0).map(([name, value]) => ({ name, value })),
      mbtiEiData: [
        { name: '外向 (E)', value: mbtiDimension.E },
        { name: '内向 (I)', value: mbtiDimension.I },
      ],
      mbtiTfData: [
        { name: '理性 (T)', value: mbtiDimension.T },
        { name: '感性 (F)', value: mbtiDimension.F },
      ]
    };
  }, [rawData]);

  // --- CSV 解析逻辑 ---
  const handleFileUpload = (event) => {
    const file = event.target.files[0];
    if (!file) return;
    setFileName(file.name);
    setErrorMsg("");

    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        let text = e.target.result;
        if (text.charCodeAt(0) === 0xFEFF) text = text.slice(1);

        const lines = text.split(/\r\n|\n/).filter(line => line.trim() !== '');
        if (lines.length < 2) {
            setErrorMsg("文件似乎是空的或格式不正确。");
            return;
        }

        let headerIndex = 0;
        let headers = [];
        
        for(let i=0; i<Math.min(5, lines.length); i++) {
           const tempHeaders = parseCSVLine(lines[i]).map(h => h.trim());
           if (tempHeaders.some(h => h.includes("姓名") || h.includes("Name"))) {
               headerIndex = i;
               headers = tempHeaders;
               break;
           }
        }
        
        if (headers.length === 0) headers = parseCSVLine(lines[0]).map(h => h.trim());

        const fieldIndices = {};
        Object.keys(FIELD_ALIASES).forEach(key => {
            fieldIndices[key] = matchHeader(headers, key);
        });

        if (fieldIndices.name === -1) {
            setErrorMsg(`无法找到“姓名”列。检测到的表头: ${headers.join(', ')}`);
        }

        const parsedData = lines.slice(headerIndex + 1).map(line => {
          const values = parseCSVLine(line);
          if (values.length < headers.length / 2) return null;

          const row = {};
          Object.keys(fieldIndices).forEach(key => {
            const index = fieldIndices[key];
            if (index !== -1 && values[index]) {
                row[key] = values[index].replace(/^"|"$/g, '').trim();
            } else {
                row[key] = "";
            }
          });
          return row;
        }).filter(row => row !== null && row.name);

        if (parsedData.length === 0) {
            setErrorMsg("解析成功，但未找到有效数据行。");
        } else {
            setRawData(parsedData);
        }

      } catch (err) {
        console.error(err);
        setErrorMsg("文件解析出错。");
      }
    };
    reader.readAsText(file, "UTF-8");
  };

  return (
    <div className="min-h-screen bg-slate-50 p-6 font-sans text-slate-800">
      
      {/* 顶部导航 */}
      <header className="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 bg-white p-4 rounded-xl shadow-sm gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
            <Users className="w-8 h-8 text-indigo-600" />
            团队人才全景盘点
          </h1>
          <p className="text-slate-500 text-sm mt-1">
            数据来源: {fileName}
          </p>
        </div>
        <div className="flex flex-col items-end gap-2">
           <label className="flex items-center gap-2 px-4 py-2 bg-indigo-50 text-indigo-600 rounded-lg cursor-pointer hover:bg-indigo-100 transition shadow-sm border border-indigo-100">
            <Upload className="w-4 h-4" />
            <span className="text-sm font-medium">更新花名册 CSV</span>
            <input type="file" accept=".csv" onChange={handleFileUpload} className="hidden" />
          </label>
        </div>
      </header>

      {errorMsg && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 flex items-center gap-2">
            <AlertCircle className="w-5 h-5" />
            {errorMsg}
        </div>
      )}

      {/* 核心指标卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <StatCard 
          title="团队总人数" 
          value={analytics.totalCount} 
          subtext="含试用期员工"
          icon={Users} 
          color="bg-blue-500" 
        />
        <StatCard 
          title="平均司龄 (年)" 
          value={analytics.avgTenure} 
          subtext="团队稳定性指标"
          icon={Clock} 
          color="bg-emerald-500" 
        />
        <StatCard 
          title="硕博学历占比" 
          value={`${analytics.masterRatio}%`} 
          subtext="高学历人才密度"
          icon={GraduationCap} 
          color="bg-violet-500" 
        />
        <StatCard 
          title="最强MBTI人格" 
          value={analytics.mbtiData[0]?.name || "N/A"} 
          subtext={`占比 ${((analytics.mbtiData[0]?.value / analytics.totalCount || 1) * 100).toFixed(0)}%`}
          icon={Brain} 
          color="bg-pink-500" 
        />
      </div>

      {/* 第一排图表：硬性指标 */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <SectionTitle title="学历结构分布" icon={GraduationCap} />
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={analytics.degreeData}
                  cx="50%"
                  cy="50%"
                  innerRadius={60}
                  outerRadius={80}
                  paddingAngle={5}
                  dataKey="value"
                >
                  {analytics.degreeData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                  ))}
                </Pie>
                <Tooltip />
                <Legend verticalAlign="bottom" height={36}/>
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <SectionTitle title="司龄梯队建设" icon={Briefcase} />
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={analytics.tenureData}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="name" fontSize={12} tickLine={false} axisLine={false} />
                <YAxis hide />
                <Tooltip cursor={{fill: '#f1f5f9'}} />
                <Bar dataKey="value" fill="#6366f1" radius={[4, 4, 0, 0]} barSize={40}>
                   {
                      analytics.tenureData.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={index === 0 ? '#a5b4fc' : '#6366f1'} />
                      ))
                    }
                </Bar>
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

         <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <SectionTitle title="职级序列分布" icon={Award} />
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={analytics.levelData} layout="vertical">
                <CartesianGrid strokeDasharray="3 3" horizontal={false} />
                <XAxis type="number" hide />
                <YAxis dataKey="name" type="category" width={80} tickLine={false} axisLine={false} fontSize={11} />
                <Tooltip />
                <Bar dataKey="value" fill="#f59e0b" radius={[0, 4, 4, 0]} barSize={20} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

      {/* 第二排图表：软性特质 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <div className="flex justify-between items-center mb-4">
             <SectionTitle title="MBTI 人格地图" icon={Brain} />
             <span className="text-xs bg-slate-100 text-slate-500 px-2 py-1 rounded">E:外向 I:内向 | T:理性 F:感性</span>
          </div>
          <div className="grid grid-cols-2 gap-4 h-64">
             <div className="h-full">
                <p className="text-xs text-slate-400 mb-2 text-center">主流人格 TOP 5</p>
                <ResponsiveContainer width="100%" height="90%">
                  <BarChart data={analytics.mbtiData.slice(0, 5)} layout="vertical">
                    <XAxis type="number" hide />
                    <YAxis dataKey="name" type="category" width={45} tickLine={false} />
                    <Tooltip />
                    <Bar dataKey="value" fill="#ec4899" radius={[0, 4, 4, 0]} barSize={16} />
                  </BarChart>
                </ResponsiveContainer>
             </div>
             
             <div className="flex flex-col gap-4">
                <div className="h-1/2 flex items-center justify-center relative">
                   <div className="absolute text-xs font-bold text-slate-400">E vs I</div>
                   <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                         <Pie data={analytics.mbtiEiData} dataKey="value" cx="50%" cy="50%" innerRadius={25} outerRadius={40}>
                           <Cell fill="#3b82f6" />
                           <Cell fill="#93c5fd" />
                         </Pie>
                         <Tooltip />
                      </PieChart>
                   </ResponsiveContainer>
                </div>
                <div className="h-1/2 flex items-center justify-center relative">
                    <div className="absolute text-xs font-bold text-slate-400">T vs F</div>
                    <ResponsiveContainer width="100%" height="100%">
                      <PieChart>
                         <Pie data={analytics.mbtiTfData} dataKey="value" cx="50%" cy="50%" innerRadius={25} outerRadius={40}>
                           <Cell fill="#10b981" />
                           <Cell fill="#6ee7b7" />
                         </Pie>
                         <Tooltip />
                      </PieChart>
                   </ResponsiveContainer>
                </div>
             </div>
          </div>
        </div>

        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <SectionTitle title="团队星座能量" icon={Sparkles} />
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={analytics.zodiacData}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="name" fontSize={10} interval={0} tickLine={false} axisLine={false} />
                <YAxis hide />
                <Tooltip cursor={{fill: '#f1f5f9'}} />
                <Bar dataKey="value" fill="#8b5cf6" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

      {/* 第三排图表：组织与背景 (新模块) */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
         {/* 部门分布 */}
         <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <SectionTitle title="子部门人力分布" icon={Building2} />
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={analytics.deptData} layout="vertical">
                <CartesianGrid strokeDasharray="3 3" horizontal={false} />
                <XAxis type="number" hide />
                <YAxis dataKey="name" type="category" width={80} tickLine={false} axisLine={false} fontSize={11} />
                <Tooltip />
                <Bar dataKey="value" fill="#0ea5e9" radius={[0, 4, 4, 0]} barSize={16} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* 性别比例 */}
        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <SectionTitle title="性别比例" icon={UserCircle} />
          <div className="h-64 flex items-center justify-center">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={analytics.genderData}
                  cx="50%"
                  cy="50%"
                  outerRadius={80}
                  dataKey="value"
                  label={({name, percent}) => `${name} ${(percent * 100).toFixed(0)}%`}
                >
                  {analytics.genderData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={entry.name === '男' ? '#3b82f6' : '#ec4899'} />
                  ))}
                </Pie>
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>

        {/* 院校背景 */}
        <div className="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
          <SectionTitle title="院校背景层级" icon={GraduationCap} />
          <div className="h-64">
            <ResponsiveContainer width="100%" height="100%">
              <PieChart>
                <Pie
                  data={analytics.schoolTierData}
                  cx="50%"
                  cy="50%"
                  innerRadius={50}
                  outerRadius={80}
                  paddingAngle={2}
                  dataKey="value"
                >
                  {analytics.schoolTierData.map((entry, index) => (
                    <Cell key={`cell-${index}`} fill={index === 0 ? '#f43f5e' : index === 1 ? '#8b5cf6' : '#94a3b8'} />
                  ))}
                </Pie>
                <Tooltip />
                <Legend verticalAlign="bottom" height={36}/>
              </PieChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>

    </div>
  );
}