import React from 'react';
import { 
  Server, 
  ClipboardList, 
  Plus, 
  XCircle, 
  Image as ImageIcon, 
  Sparkles 
} from 'lucide-react';
import { Step } from '../../types';

interface ContextStepProps {
  setCurrentStep: (step: Step) => void;
}

export const ContextStep: React.FC<ContextStepProps> = ({ setCurrentStep }) => (
  <div className="flex-1 p-8 bg-slate-50 overflow-y-auto animate-fade-in flex justify-center min-h-0">
    <div className="max-w-4xl w-full h-full bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden flex flex-col">
      <div className="p-6 border-b border-slate-100 flex-none">
        <h3 className="text-xl font-bold text-slate-900">业务背景调研 (Business Context)</h3>
        <p className="text-sm text-slate-500 mt-1">请补充企业的数字化现状与存量应用场景，AI 将基于此生成定制化的优化建议。</p>
      </div>
      
      <div className="flex-1 overflow-y-auto p-8 space-y-8">
        <div className="grid grid-cols-2 gap-6">
          <div className="col-span-2">
            <label className="block text-sm font-bold text-slate-700 mb-2">企业及主营业务简介</label>
            <textarea className="w-full p-3 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none" rows={3} placeholder="例如：某连锁生鲜零售企业，主营水果、蔬菜、肉禽蛋奶等生鲜产品，拥有线下门店500家..."></textarea>
          </div>
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">所属行业</label>
            <select className="w-full p-3 border border-slate-300 rounded-lg text-sm bg-white">
              <option>零售 - 生鲜连锁</option>
              <option>金融 - 商业银行</option>
              <option>制造 - 汽车供应链</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-bold text-slate-700 mb-2">数据规模 (估算)</label>
            <div className="flex">
              <input type="text" className="flex-1 p-3 border border-slate-300 rounded-l-lg text-sm" placeholder="100"/>
              <select className="p-3 border-y border-r border-slate-300 rounded-r-lg text-sm bg-slate-50 text-slate-600 w-24">
                <option>TB</option>
                <option>PB</option>
                <option>亿行</option>
              </select>
            </div>
          </div>
        </div>

        <div className="bg-slate-50 p-6 rounded-lg border border-slate-200">
          <h4 className="text-sm font-bold text-slate-800 mb-4 flex items-center">
            <Server size={16} className="mr-2 text-blue-500"/> 数字化底座状况
          </h4>
          <div className="grid grid-cols-2 gap-6">
            <div>
              <label className="block text-xs font-bold text-slate-500 mb-2 uppercase">数据来源 (多选)</label>
              <div className="space-y-2">
                {['内部业务系统 (ERP/CRM/POS)', '外部采购/合作', '网络爬虫/公开数据', 'IoT 设备采集'].map(opt => (
                  <label key={opt} className="flex items-center space-x-2 cursor-pointer">
                    <input type="checkbox" className="rounded text-blue-600 focus:ring-blue-500"/>
                    <span className="text-sm text-slate-700">{opt}</span>
                  </label>
                ))}
              </div>
            </div>
            <div className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-500 mb-2 uppercase">数字化平台简介</label>
                <input type="text" className="w-full p-2 border border-slate-300 rounded text-sm" placeholder="例如：使用金蝶云星空作为核心ERP..."/>
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-500 mb-2 uppercase">数据存储及管控</label>
                <div className="flex space-x-4">
                  {['公有云', '私有云/本地', '混合部署'].map(opt => (
                    <label key={opt} className="flex items-center space-x-2">
                      <input type="radio" name="storage" className="text-blue-600 focus:ring-blue-500"/>
                      <span className="text-sm text-slate-700">{opt}</span>
                    </label>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="border border-blue-100 bg-blue-50/30 p-6 rounded-lg">
          <div className="flex justify-between items-center mb-4">
            <h4 className="text-sm font-bold text-slate-800 flex items-center">
              <ClipboardList size={16} className="mr-2 text-blue-500"/> 
              当前数据应用场景 (存量)
            </h4>
            <button className="text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center">
              <Plus size={14} className="mr-1"/> 添加场景
            </button>
          </div>
          
          <div className="space-y-3">
            <div className="flex items-start space-x-3 p-3 bg-white border border-slate-200 rounded-md shadow-sm">
              <div className="flex-1 grid grid-cols-2 gap-4">
                <input type="text" className="p-2 border border-slate-200 rounded text-sm" placeholder="场景名称 (如: 月度销售报表)" defaultValue="月度销售经营报表" />
                <input type="text" className="p-2 border border-slate-200 rounded text-sm" placeholder="简述 (如: 统计各门店销售额)" defaultValue="统计各区域门店的月度GMV，维度单一" />
              </div>
              <button className="p-2 text-slate-400 hover:text-red-500"><XCircle size={18}/></button>
            </div>
            <div className="flex items-start space-x-3 p-3 bg-white border border-slate-200 rounded-md shadow-sm">
              <div className="flex-1 grid grid-cols-2 gap-4">
                <input type="text" className="p-2 border border-slate-200 rounded text-sm" placeholder="场景名称 (如: 月度销售报表)" defaultValue="物流配送监控大屏" />
                <input type="text" className="p-2 border border-slate-200 rounded text-sm" placeholder="简述 (如: 统计各门店销售额)" defaultValue="实时展示车辆位置，但缺乏预警功能" />
              </div>
              <button className="p-2 text-slate-400 hover:text-red-500"><XCircle size={18}/></button>
            </div>
            
            <div className="mt-4 border-2 border-dashed border-slate-300 rounded-lg p-4 text-center cursor-pointer hover:bg-white transition-colors">
              <p className="text-xs text-slate-500 flex items-center justify-center">
                <ImageIcon size={14} className="mr-2"/> 上传现有报表/大屏截图 (辅助 AI 诊断)
              </p>
            </div>
          </div>
        </div>
      </div>

      <div className="p-6 border-t border-slate-100 bg-slate-50 flex justify-end flex-none">
        <button 
          onClick={() => setCurrentStep('value')}
          className="px-8 py-3 bg-slate-900 text-white rounded-lg font-bold shadow-lg hover:bg-slate-800 transition-all flex items-center"
        >
          <Sparkles size={18} className="mr-2"/> 生成场景挖掘与优化建议
        </button>
      </div>
    </div>
  </div>
);