import React, { useState, useEffect } from 'react';
import { Download, Plus, Trash2, Users, FileText, BarChart3 } from 'lucide-react';

// 项目类型配置
const PROJECT_TYPES = {
  '课题类': [
    { name: '研究内容前沿度', weight: 30 },
    { name: '研究成果完善度', weight: 30 },
    { name: '现场汇报表现', weight: 20 },
    { name: '成果外部正向影响度', weight: 20 }
  ],
  '咨询服务类': [
    { name: '服务内容的行业探索性', weight: 30 },
    { name: '服务经验总结质量', weight: 30 },
    { name: '现场汇报表现', weight: 20 },
    { name: '成果外部正向影响度', weight: 20 }
  ],
  '规划设计类': [
    { name: '成果内容创新性', weight: 30 },
    { name: '成果可推广性', weight: 30 },
    { name: '现场汇报表现', weight: 20 },
    { name: '成果外部正向影响度', weight: 20 }
  ]
};

export default function ExpertScoringSystem() {
  const [mode, setMode] = useState('select'); // select, admin, expert
  const [projects, setProjects] = useState([]);
  const [scores, setScores] = useState([]);
  const [currentExpert, setCurrentExpert] = useState('');
  const [expertName, setExpertName] = useState('');

  // 管理员新增项目表单
  const [newProject, setNewProject] = useState({ name: '', type: '课题类', experts: '' });

  // 从localStorage加载数据
  useEffect(() => {
    const savedProjects = localStorage.getItem('projects');
    const savedScores = localStorage.getItem('scores');
    if (savedProjects) setProjects(JSON.parse(savedProjects));
    if (savedScores) setScores(JSON.parse(savedScores));
  }, []);

  // 保存到localStorage
  useEffect(() => {
    localStorage.setItem('projects', JSON.stringify(projects));
  }, [projects]);

  useEffect(() => {
    localStorage.setItem('scores', JSON.stringify(scores));
  }, [scores]);

  // 添加项目
  const addProject = () => {
    if (!newProject.name || !newProject.experts) {
      alert('请填写项目名称和专家姓名');
      return;
    }
    const project = {
      id: Date.now(),
      name: newProject.name,
      type: newProject.type,
      experts: newProject.experts.split(/[,，、\s]+/).filter(e => e.trim())
    };
    setProjects([...projects, project]);
    setNewProject({ name: '', type: '课题类', experts: '' });
  };

  // 删除项目
  const deleteProject = (id) => {
    if (confirm('确定删除该项目吗？相关打分记录也会被删除。')) {
      setProjects(projects.filter(p => p.id !== id));
      setScores(scores.filter(s => s.projectId !== id));
    }
  };

  // 专家提交打分
  const submitScore = (projectId, dimensions, comment) => {
    const newScore = {
      id: Date.now(),
      projectId,
      expertName: currentExpert,
      dimensions,
      comment,
      timestamp: new Date().toLocaleString('zh-CN')
    };
    
    // 检查是否已有该专家对该项目的打分
    const existingIndex = scores.findIndex(
      s => s.projectId === projectId && s.expertName === currentExpert
    );
    
    if (existingIndex >= 0) {
      const newScores = [...scores];
      newScores[existingIndex] = newScore;
      setScores(newScores);
      alert('打分已更新！');
    } else {
      setScores([...scores, newScore]);
      alert('打分提交成功！');
    }
  };

  // 计算项目得分
  const calculateProjectScore = (projectId) => {
    const projectScores = scores.filter(s => s.projectId === projectId);
    if (projectScores.length === 0) return null;

    const project = projects.find(p => p.id === projectId);
    const dimensions = PROJECT_TYPES[project.type];

    // 计算每个维度的平均分
    const avgDimensions = dimensions.map((dim, idx) => {
      const dimScores = projectScores.map(s => s.dimensions[idx] || 0);
      const avg = dimScores.reduce((a, b) => a + b, 0) / dimScores.length;
      return { name: dim.name, weight: dim.weight, score: avg };
    });

    // 计算总分
    const totalScore = avgDimensions.reduce((sum, dim) => sum + (dim.score * dim.weight / 100), 0);

    return {
      dimensions: avgDimensions,
      totalScore: totalScore.toFixed(2),
      expertCount: projectScores.length
    };
  };

  // 导出Excel
  const exportToExcel = () => {
    let csv = '项目名称,项目类型,专家姓名,';
    
    // 添加表头
    const firstProject = projects[0];
    if (firstProject) {
      const dims = PROJECT_TYPES[firstProject.type];
      dims.forEach(d => csv += `${d.name},`);
      csv += '专家评语,提交时间,项目总分,参与专家数\n';
    }

    // 添加数据
    projects.forEach(project => {
      const projectScore = calculateProjectScore(project.id);
      const projectScores = scores.filter(s => s.projectId === project.id);
      
      if (projectScores.length === 0) {
        csv += `${project.name},${project.type},暂无打分,,,,,,,${projectScore ? projectScore.totalScore : ''},0\n`;
      } else {
        projectScores.forEach(score => {
          csv += `${project.name},${project.type},${score.expertName},`;
          score.dimensions.forEach(d => csv += `${d},`);
          csv += `"${score.comment || ''}",${score.timestamp},`;
          csv += `${projectScore ? projectScore.totalScore : ''},${projectScore ? projectScore.expertCount : 0}\n`;
        });
      }
    });

    const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = `专家打分结果_${new Date().toLocaleDateString()}.csv`;
    link.click();
  };

  // 选择模式界面
  if (mode === 'select') {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-8">
        <div className="max-w-4xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-gray-800 mb-4">专家打分系统</h1>
            <p className="text-gray-600">请选择您的身份进入系统</p>
          </div>
          
          <div className="grid md:grid-cols-2 gap-6">
            <button
              onClick={() => setMode('admin')}
              className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all hover:-translate-y-1"
            >
              <div className="flex flex-col items-center">
                <div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                  <BarChart3 className="w-8 h-8 text-indigo-600" />
                </div>
                <h2 className="text-2xl font-bold text-gray-800 mb-2">管理员入口</h2>
                <p className="text-gray-600 text-center">管理项目、分配专家、查看结果</p>
              </div>
            </button>

            <button
              onClick={() => setMode('expert')}
              className="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-all hover:-translate-y-1"
            >
              <div className="flex flex-col items-center">
                <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
                  <Users className="w-8 h-8 text-green-600" />
                </div>
                <h2 className="text-2xl font-bold text-gray-800 mb-2">专家入口</h2>
                <p className="text-gray-600 text-center">登录后为分配的项目打分</p>
              </div>
            </button>
          </div>
        </div>
      </div>
    );
  }

  // 管理员界面
  if (mode === 'admin') {
    return (
      <div className="min-h-screen bg-gray-50 p-6">
        <div className="max-w-7xl mx-auto">
          <div className="flex justify-between items-center mb-6">
            <h1 className="text-3xl font-bold text-gray-800">管理员控制台</h1>
            <div className="flex gap-3">
              <button
                onClick={exportToExcel}
                className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700"
              >
                <Download className="w-4 h-4" />
                导出Excel
              </button>
              <button
                onClick={() => setMode('select')}
                className="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700"
              >
                返回
              </button>
            </div>
          </div>

          {/* 添加项目 */}
          <div className="bg-white rounded-lg shadow-md p-6 mb-6">
            <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
              <Plus className="w-5 h-5" />
              添加新项目
            </h2>
            <div className="grid md:grid-cols-3 gap-4">
              <input
                type="text"
                placeholder="项目名称"
                value={newProject.name}
                onChange={(e) => setNewProject({...newProject, name: e.target.value})}
                className="border rounded-lg px-4 py-2"
              />
              <select
                value={newProject.type}
                onChange={(e) => setNewProject({...newProject, type: e.target.value})}
                className="border rounded-lg px-4 py-2"
              >
                <option>课题类</option>
                <option>咨询服务类</option>
                <option>规划设计类</option>
              </select>
              <input
                type="text"
                placeholder="专家姓名（多个用逗号分隔）"
                value={newProject.experts}
                onChange={(e) => setNewProject({...newProject, experts: e.target.value})}
                className="border rounded-lg px-4 py-2"
              />
            </div>
            <button
              onClick={addProject}
              className="mt-4 bg-indigo-600 text-white px-6 py-2 rounded-lg hover:bg-indigo-700"
            >
              添加项目
            </button>
          </div>

          {/* 项目列表和结果 */}
          <div className="bg-white rounded-lg shadow-md p-6">
            <h2 className="text-xl font-bold mb-4 flex items-center gap-2">
              <FileText className="w-5 h-5" />
              项目列表和打分结果
            </h2>
            
            {projects.length === 0 ? (
              <p className="text-gray-500 text-center py-8">暂无项目，请先添加项目</p>
            ) : (
              <div className="space-y-4">
                {projects.map(project => {
                  const result = calculateProjectScore(project.id);
                  const projectScores = scores.filter(s => s.projectId === project.id);
                  
                  return (
                    <div key={project.id} className="border rounded-lg p-4">
                      <div className="flex justify-between items-start mb-3">
                        <div>
                          <h3 className="text-lg font-bold text-gray-800">{project.name}</h3>
                          <p className="text-sm text-gray-600">类型：{project.type}</p>
                          <p className="text-sm text-gray-600">分配专家：{project.experts.join('、')}</p>
                        </div>
                        <div className="flex items-center gap-4">
                          {result && (
                            <div className="text-right">
                              <div className="text-2xl font-bold text-indigo-600">{result.totalScore}</div>
                              <div className="text-xs text-gray-500">{result.expertCount}位专家已打分</div>
                            </div>
                          )}
                          <button
                            onClick={() => deleteProject(project.id)}
                            className="text-red-600 hover:text-red-700"
                          >
                            <Trash2 className="w-5 h-5" />
                          </button>
                        </div>
                      </div>
                      
                      {result && (
                        <div className="bg-gray-50 rounded p-3 mb-3">
                          <div className="grid grid-cols-2 gap-2 text-sm">
                            {result.dimensions.map((dim, idx) => (
                              <div key={idx} className="flex justify-between">
                                <span className="text-gray-600">{dim.name}：</span>
                                <span className="font-semibold">{dim.score.toFixed(2)}分 (权重{dim.weight}%)</span>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                      
                      {projectScores.length > 0 && (
                        <div className="space-y-2">
                          <p className="text-sm font-semibold text-gray-700">专家评分详情：</p>
                          {projectScores.map(score => (
                            <div key={score.id} className="text-sm bg-blue-50 p-2 rounded">
                              <span className="font-semibold">{score.expertName}</span> - 
                              {score.dimensions.map((d, i) => ` ${PROJECT_TYPES[project.type][i].name}:${d}分`).join(', ')}
                              {score.comment && <div className="text-gray-600 mt-1">评语：{score.comment}</div>}
                            </div>
                          ))}
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

  // 专家界面 - 登录
  if (mode === 'expert' && !currentExpert) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-100 p-8">
        <div className="max-w-md mx-auto">
          <div className="bg-white rounded-xl shadow-lg p-8">
            <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">专家登录</h2>
            <input
              type="text"
              placeholder="请输入您的姓名"
              value={expertName}
              onChange={(e) => setExpertName(e.target.value)}
              className="w-full border-2 rounded-lg px-4 py-3 mb-4 text-lg"
              onKeyPress={(e) => e.key === 'Enter' && expertName && setCurrentExpert(expertName)}
            />
            <button
              onClick={() => expertName && setCurrentExpert(expertName)}
              className="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 font-semibold"
            >
              进入打分
            </button>
            <button
              onClick={() => setMode('select')}
              className="w-full mt-3 bg-gray-200 text-gray-700 py-3 rounded-lg hover:bg-gray-300"
            >
              返回
            </button>
          </div>
        </div>
      </div>
    );
  }

  // 专家界面 - 打分
  if (mode === 'expert' && currentExpert) {
    const myProjects = projects.filter(p => p.experts.includes(currentExpert));
    
    return (
      <div className="min-h-screen bg-gray-50 p-6">
        <div className="max-w-4xl mx-auto">
          <div className="flex justify-between items-center mb-6">
            <div>
              <h1 className="text-3xl font-bold text-gray-800">专家打分</h1>
              <p className="text-gray-600">当前登录：{currentExpert}</p>
            </div>
            <button
              onClick={() => {
                setCurrentExpert('');
                setExpertName('');
              }}
              className="bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700"
            >
              退出登录
            </button>
          </div>

          {myProjects.length === 0 ? (
            <div className="bg-white rounded-lg shadow-md p-8 text-center">
              <p className="text-gray-600">暂无分配给您的项目</p>
            </div>
          ) : (
            <div className="space-y-6">
              {myProjects.map(project => {
                const existingScore = scores.find(
                  s => s.projectId === project.id && s.expertName === currentExpert
                );
                
                return (
                  <ProjectScoreForm
                    key={project.id}
                    project={project}
                    existingScore={existingScore}
                    onSubmit={submitScore}
                  />
                );
              })}
            </div>
          )}
        </div>
      </div>
    );
  }
}

// 项目打分表单组件
function ProjectScoreForm({ project, existingScore, onSubmit }) {
  const dimensions = PROJECT_TYPES[project.type];
  const [scores, setScores] = useState(
    existingScore ? existingScore.dimensions : dimensions.map(() => '')
  );
  const [comment, setComment] = useState(existingScore ? existingScore.comment : '');

  const handleSubmit = () => {
    // 验证所有维度都已打分
    if (scores.some(s => s === '' || s < 0 || s > 100)) {
      alert('请为所有维度打分（0-100的整数）');
      return;
    }
    
    onSubmit(project.id, scores.map(s => parseInt(s)), comment);
  };

  return (
    <div className="bg-white rounded-lg shadow-md p-6">
      <h3 className="text-xl font-bold text-gray-800 mb-2">{project.name}</h3>
      <p className="text-sm text-gray-600 mb-4">项目类型：{project.type}</p>
      
      <div className="space-y-4 mb-4">
        {dimensions.map((dim, idx) => (
          <div key={idx}>
            <label className="block text-sm font-semibold text-gray-700 mb-2">
              {dim.name} (权重 {dim.weight}%)
            </label>
            <input
              type="number"
              min="0"
              max="100"
              value={scores[idx]}
              onChange={(e) => {
                const newScores = [...scores];
                newScores[idx] = e.target.value;
                setScores(newScores);
              }}
              className="w-full border-2 rounded-lg px-4 py-2"
              placeholder="请输入0-100的整数"
            />
          </div>
        ))}
        
        <div>
          <label className="block text-sm font-semibold text-gray-700 mb-2">
            评语（选填）
          </label>
          <textarea
            value={comment}
            onChange={(e) => setComment(e.target.value)}
            className="w-full border-2 rounded-lg px-4 py-2 h-24"
            placeholder="请输入您的评语..."
          />
        </div>
      </div>
      
      <button
        onClick={handleSubmit}
        className="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 font-semibold"
      >
        {existingScore ? '更新打分' : '提交打分'}
      </button>
      
      {existingScore && (
        <p className="text-sm text-gray-500 mt-2 text-center">
          上次提交时间：{existingScore.timestamp}
        </p>
      )}
    </div>
  );
}