import React from 'react';
import { 
  ArrowRight, 
  Download 
} from 'lucide-react';
import { ViewMode, Project, Step } from '../types';
import { projectsList } from '../data/mockData';
import { ProgressBar } from '../components/ProgressBar';

interface DashboardViewProps {
  setCurrentView: (view: ViewMode) => void;
  setCurrentStep?: (step: Step) => void;
}

export const DashboardView: React.FC<DashboardViewProps> = ({ setCurrentView, setCurrentStep }) => (
  <div className="p-8 bg-slate-50 min-h-screen animate-fade-in">
    <div className="flex justify-between items-center mb-8">
      <div>
        <h1 className="text-2xl font-bold text-slate-900">工作台</h1>
        <p className="text-slate-500 text-sm mt-1">下午好, Sarah (合伙人) | 全局概览</p>
      </div>
      <div className="flex space-x-4">
        <button className="flex items-center px-4 py-2 bg-white border border-slate-200 rounded-md shadow-sm text-sm font-medium text-slate-600 hover:bg-slate-50">
          <Download size={16} className="mr-2" /> 导出周报
        </button>
      </div>
    </div>

    <div className="grid grid-cols-12 gap-8">
      <div className="col-span-12 bg-white rounded-lg border border-slate-200 shadow-sm p-6">
        <div className="flex justify-between items-center mb-6">
          <h3 className="font-bold text-lg text-slate-800">项目作业全景</h3>
          <button onClick={() => setCurrentView('projects')} className="text-blue-600 text-sm font-medium hover:underline flex items-center">
              查看全部 <ArrowRight size={14} className="ml-1"/>
          </button>
        </div>
        <div className="overflow-hidden">
          <table className="min-w-full text-left text-sm">
            <thead className="bg-slate-50 text-slate-500 font-medium">
              <tr>
                <th className="px-4 py-3">项目名称</th>
                <th className="px-4 py-3">负责人</th>
                <th className="px-4 py-3 w-1/3">当前阶段 & 进度</th>
                <th className="px-4 py-3 text-right">操作</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {projectsList.slice(0, 4).map((project, idx) => (
                <tr 
                  key={idx} 
                  className="hover:bg-slate-50 transition-colors cursor-pointer" 
                  onClick={() => {
                    setCurrentView('engagement');
                    // Set step based on project progress (simplified logic)
                    if (setCurrentStep) {
                      if (project.progress === 0) setCurrentStep('setup');
                      else if (project.progress < 25) setCurrentStep('inventory');
                      else if (project.progress < 50) setCurrentStep('context');
                      else if (project.progress < 75) setCurrentStep('value');
                      else setCurrentStep('delivery');
                    }
                  }}
                >
                  <td className="px-4 py-4 font-medium text-slate-800">{project.name}</td>
                  <td className="px-4 py-4 text-slate-600 flex items-center">
                    <div className="w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center text-xs mr-2 font-bold text-slate-600">
                      {project.owner[0]}
                    </div>
                    {project.owner}
                  </td>
                  <td className="px-4 py-4">
                    <div className="flex items-center justify-between mb-1 text-xs text-slate-500">
                      <span>进行中</span>
                      <span>{project.progress}%</span>
                    </div>
                    <ProgressBar percent={project.progress} status={project.status} />
                  </td>
                  <td className="px-4 py-4 text-right" onClick={(e) => e.stopPropagation()}>
                    <button 
                      onClick={() => {
                        setCurrentView('engagement');
                        if (setCurrentStep) {
                          if (project.progress === 0) setCurrentStep('setup');
                          else if (project.progress < 25) setCurrentStep('inventory');
                          else if (project.progress < 50) setCurrentStep('context');
                          else if (project.progress < 75) setCurrentStep('value');
                          else setCurrentStep('delivery');
                        }
                      }}
                      className="text-blue-600 hover:text-blue-800 font-medium text-xs"
                    >
                      详情
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
);