'use client';

import { Card } from '@/components/ui/card';
import { CheckCircle2, Clock, FileText, Activity, CheckCheck, AlertTriangle } from 'lucide-react';

export function WorkflowGuide() {
  return (
    <Card className="p-6 bg-gradient-to-r from-green-50 to-blue-50 border-green-200">
      <div className="space-y-4">
        <div className="flex items-center gap-2">
          <CheckCircle2 className="w-6 h-6 text-green-600" />
          <h3>预警处置工作流闭环管理</h3>
        </div>

        <div className="bg-white rounded-lg p-4">
          <p className="text-sm text-gray-700 mb-3">完整的处置流程：</p>
          <div className="flex items-center gap-2 flex-wrap">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-full bg-red-500 text-white flex items-center justify-center text-sm">1</div>
              <span className="text-sm">预警发出</span>
            </div>
            <span className="text-gray-400">→</span>
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center text-sm">2</div>
              <span className="text-sm">接收查看</span>
            </div>
            <span className="text-gray-400">→</span>
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-full bg-orange-500 text-white flex items-center justify-center text-sm">3</div>
              <span className="text-sm">提交方案</span>
            </div>
            <span className="text-gray-400">→</span>
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center text-sm">4</div>
              <span className="text-sm">现场处置</span>
            </div>
            <span className="text-gray-400">→</span>
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 rounded-full bg-green-500 text-white flex items-center justify-center text-sm">5</div>
              <span className="text-sm">反馈结果</span>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="bg-white rounded-lg p-3">
            <h4 className="flex items-center gap-2 mb-2">
              <Clock className="w-4 h-4 text-blue-600" />
              时间线追踪
            </h4>
            <ul className="space-y-1 text-xs text-gray-600">
              <li>• 完整记录每个处置节点的时间</li>
              <li>• 记录操作人员和详细内容</li>
              <li>• 支持全程追溯和审计</li>
            </ul>
          </div>
          <div className="bg-white rounded-lg p-3">
            <h4 className="flex items-center gap-2 mb-2">
              <FileText className="w-4 h-4 text-orange-600" />
              方案管理
            </h4>
            <ul className="space-y-1 text-xs text-gray-600">
              <li>• 责任人提交详细处置方案</li>
              <li>• 记录调用资源和实际成本</li>
              <li>• 处置过程全程记录</li>
            </ul>
          </div>
          <div className="bg-white rounded-lg p-3">
            <h4 className="flex items-center gap-2 mb-2">
              <Activity className="w-4 h-4 text-purple-600" />
              状态跟踪
            </h4>
            <ul className="space-y-1 text-xs text-gray-600">
              <li>• 实时更新处置状态</li>
              <li>• 可视化进度展示</li>
              <li>• 未处理预警自动提醒</li>
            </ul>
          </div>
          <div className="bg-white rounded-lg p-3">
            <h4 className="flex items-center gap-2 mb-2">
              <CheckCheck className="w-4 h-4 text-green-600" />
              效果评估
            </h4>
            <ul className="space-y-1 text-xs text-gray-600">
              <li>• 处置完成后效果评估</li>
              <li>• 成本收益分析</li>
              <li>• 经验积累和改进</li>
            </ul>
          </div>
        </div>

        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
          <p className="text-xs text-yellow-900 flex items-start gap-2">
            <AlertTriangle className="w-4 h-4 flex-shrink-0 mt-0.5" />
            <span>
              <strong>重要提示：</strong>
              预警发出后需及时处理，未查看的预警将在30分钟后自动升级推送给系统管理员。
              所有处置记录将永久保存，用于后续分析和决策优化。
            </span>
          </p>
        </div>
      </div>
    </Card>
  );
}