'use client';

import { useState } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Textarea } from '@/components/ui/textarea';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Eye, Activity, CheckCircle2, Clock, User, FileText } from 'lucide-react';
import { WarningRecord } from './disposalReducer';

interface WorkflowDialogProps {
  isOpen: boolean;
  onClose: () => void;
  selectedWarning: WarningRecord | null;
  disposalPlan: string;
  disposalResult: string;
  processingNotes: string;
  resources: string;
  actualCost: string;
  effectEvaluation: string;
  onDisposalPlanChange: (value: string) => void;
  onDisposalResultChange: (value: string) => void;
  onProcessingNotesChange: (value: string) => void;
  onResourcesChange: (value: string) => void;
  onActualCostChange: (value: string) => void;
  onEffectEvaluationChange: (value: string) => void;
  onUpdateStatus: (status: '未查看' | '已查看' | '处理中' | '已完成') => void;
  getRiskTypeIcon: (type: string) => string;
  getRiskLevelColor: (level: string) => string;
  getStatusIcon: (status: string) => React.ReactNode;
  getStatusColor: (status: string) => string;
}

export function WorkflowDialog({
  isOpen,
  onClose,
  selectedWarning,
  disposalPlan,
  disposalResult,
  processingNotes,
  resources,
  actualCost,
  effectEvaluation,
  onDisposalPlanChange,
  onDisposalResultChange,
  onProcessingNotesChange,
  onResourcesChange,
  onActualCostChange,
  onEffectEvaluationChange,
  onUpdateStatus,
  getRiskTypeIcon,
  getRiskLevelColor,
  getStatusIcon,
  getStatusColor,
}: WorkflowDialogProps) {
  if (!selectedWarning) return null;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>预警处置工作流</DialogTitle>
        </DialogHeader>
        <div className="space-y-6">
          {/* 基本信息 */}
          <div className="p-4 bg-gray-50 rounded-lg">
            <div className="grid grid-cols-3 gap-4">
              <div>
                <p className="text-xs text-muted-foreground">地块名称</p>
                <p className="text-sm font-medium mt-1">{selectedWarning.fieldName}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">风险类型</p>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-xl">{getRiskTypeIcon(selectedWarning.riskType)}</span>
                  <span className="text-sm font-medium">{selectedWarning.riskType}</span>
                </div>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">风险等级</p>
                <Badge className={`mt-1 ${getRiskLevelColor(selectedWarning.riskLevel)}`}>
                  {selectedWarning.riskLevel}
                </Badge>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">预警时间</p>
                <p className="text-sm font-medium mt-1">{selectedWarning.warningTime}</p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">责任人</p>
                <p className="text-sm font-medium mt-1 flex items-center gap-1">
                  <User className="w-3 h-3" />
                  {selectedWarning.responsible}
                </p>
              </div>
              <div>
                <p className="text-xs text-muted-foreground">当前状态</p>
                <div className={`inline-flex items-center gap-1 px-2 py-1 rounded-full mt-1 ${getStatusColor(selectedWarning.status)}`}>
                  {getStatusIcon(selectedWarning.status)}
                  <span className="text-xs">{selectedWarning.status}</span>
                </div>
              </div>
            </div>
          </div>

          <Tabs defaultValue="process" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="process">处置流程</TabsTrigger>
              <TabsTrigger value="timeline">时间线</TabsTrigger>
              <TabsTrigger value="details">详细信息</TabsTrigger>
            </TabsList>

            <TabsContent value="process" className="space-y-4 mt-4">
              {/* 1. 查看确认 */}
              <Card className={`p-4 ${selectedWarning.status !== '未查看' ? 'bg-blue-50' : ''}`}>
                <div className="flex items-center gap-3 mb-3">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                    selectedWarning.status !== '未查看' ? 'bg-blue-600 text-white' : 'bg-gray-300 text-gray-600'
                  }`}>
                    1
                  </div>
                  <div>
                    <h4>接收查看</h4>
                    <p className="text-xs text-muted-foreground">责任人确认接收预警信息</p>
                  </div>
                </div>
                {selectedWarning.viewTime && (
                  <div className="ml-11 text-sm text-blue-600">
                    ✓ 已查看于 {selectedWarning.viewTime}
                  </div>
                )}
                {selectedWarning.status === '未查看' && (
                  <div className="ml-11">
                    <Button
                      size="sm"
                      className="bg-blue-600 hover:bg-blue-700"
                      onClick={() => onUpdateStatus('已查看')}
                    >
                      <Eye className="w-4 h-4 mr-2" />
                      确认查看
                    </Button>
                  </div>
                )}
              </Card>

              {/* 2. 制定方案 */}
              <Card className={`p-4 ${selectedWarning.status === '处理中' || selectedWarning.status === '已完成' ? 'bg-orange-50' : ''}`}>
                <div className="flex items-center gap-3 mb-3">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                    selectedWarning.status === '处理中' || selectedWarning.status === '已完成' ? 'bg-orange-600 text-white' : 'bg-gray-300 text-gray-600'
                  }`}>
                    2
                  </div>
                  <div>
                    <h4>制定方案</h4>
                    <p className="text-xs text-muted-foreground">提交详细的处置方案</p>
                  </div>
                </div>
                {selectedWarning.disposalPlan ? (
                  <div className="ml-11 space-y-2">
                    <div className="p-3 bg-white rounded border border-orange-200">
                      <p className="text-xs text-orange-900 mb-1">处置方案</p>
                      <p className="text-sm text-orange-800">{selectedWarning.disposalPlan}</p>
                    </div>
                    {selectedWarning.disposalPlanSubmitTime && (
                      <p className="text-xs text-orange-600">
                        ✓ 提交于 {selectedWarning.disposalPlanSubmitTime}
                      </p>
                    )}
                  </div>
                ) : selectedWarning.status === '已查看' ? (
                  <div className="ml-11 space-y-3">
                    <div>
                      <label className="text-sm font-medium">处置方案</label>
                      <Textarea
                        value={disposalPlan}
                        onChange={(e) => onDisposalPlanChange(e.target.value)}
                        placeholder="请详细描述处置方案，包括具体措施、时间安排、人员分工等..."
                        rows={4}
                        className="mt-2"
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="text-sm font-medium">调用资源</label>
                        <Textarea
                          value={resources}
                          onChange={(e) => onResourcesChange(e.target.value)}
                          placeholder="人员、设备、物资等..."
                          rows={2}
                          className="mt-2"
                        />
                      </div>
                      <div>
                        <label className="text-sm font-medium">处置记录</label>
                        <Textarea
                          value={processingNotes}
                          onChange={(e) => onProcessingNotesChange(e.target.value)}
                          placeholder="现场处置过程记录..."
                          rows={2}
                          className="mt-2"
                        />
                      </div>
                    </div>
                    <Button
                      className="bg-orange-600 hover:bg-orange-700"
                      onClick={() => onUpdateStatus('处理中')}
                      disabled={!disposalPlan.trim()}
                    >
                      <Activity className="w-4 h-4 mr-2" />
                      提交方案并开始处置
                    </Button>
                  </div>
                ) : null}
              </Card>

              {/* 3. 现场处置 */}
              <Card className={`p-4 ${selectedWarning.status === '已完成' ? 'bg-green-50' : ''}`}>
                <div className="flex items-center gap-3 mb-3">
                  <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
                    selectedWarning.status === '已完成' ? 'bg-green-600 text-white' : 'bg-gray-300 text-gray-600'
                  }`}>
                    3
                  </div>
                  <div>
                    <h4>处置完成</h4>
                    <p className="text-xs text-muted-foreground">记录处置结果和效果评估</p>
                  </div>
                </div>
                {selectedWarning.disposalResult ? (
                  <div className="ml-11 space-y-2">
                    <div className="p-3 bg-white rounded border border-green-200">
                      <p className="text-xs text-green-900 mb-1">处置结果</p>
                      <p className="text-sm text-green-800">{selectedWarning.disposalResult}</p>
                    </div>
                    {selectedWarning.actualCost && (
                      <div className="p-2 bg-white rounded border border-green-200">
                        <p className="text-xs text-green-900">实际成本：{selectedWarning.actualCost}</p>
                      </div>
                    )}
                    {selectedWarning.effectEvaluation && (
                      <div className="p-3 bg-white rounded border border-green-200">
                        <p className="text-xs text-green-900 mb-1">效果评估</p>
                        <p className="text-sm text-green-800">{selectedWarning.effectEvaluation}</p>
                      </div>
                    )}
                    <p className="text-xs text-green-600">
                      ✓ 完成于 {selectedWarning.completedTime}
                    </p>
                  </div>
                ) : selectedWarning.status === '处理中' ? (
                  <div className="ml-11 space-y-3">
                    <div>
                      <label className="text-sm font-medium">处置结果</label>
                      <Textarea
                        value={disposalResult}
                        onChange={(e) => onDisposalResultChange(e.target.value)}
                        placeholder="请详细描述处置结果、解决情况、当前作物状态等..."
                        rows={4}
                        className="mt-2"
                      />
                    </div>
                    <div className="grid grid-cols-2 gap-3">
                      <div>
                        <label className="text-sm font-medium">实际成本</label>
                        <Textarea
                          value={actualCost}
                          onChange={(e) => onActualCostChange(e.target.value)}
                          placeholder="人工、材料等实际成本..."
                          rows={2}
                          className="mt-2"
                        />
                      </div>
                      <div>
                        <label className="text-sm font-medium">效果评估</label>
                        <Textarea
                          value={effectEvaluation}
                          onChange={(e) => onEffectEvaluationChange(e.target.value)}
                          placeholder="处置效果、作物恢复情况等..."
                          rows={2}
                          className="mt-2"
                        />
                      </div>
                    </div>
                    <Button
                      className="bg-green-600 hover:bg-green-700"
                      onClick={() => onUpdateStatus('已完成')}
                      disabled={!disposalResult.trim()}
                    >
                      <CheckCircle2 className="w-4 h-4 mr-2" />
                      确认完成处置
                    </Button>
                  </div>
                ) : null}
              </Card>
            </TabsContent>

            <TabsContent value="timeline" className="mt-4">
              <Card className="p-4">
                <h4 className="mb-4 flex items-center gap-2">
                  <Clock className="w-5 h-5 text-purple-600" />
                  处置时间线
                </h4>
                {selectedWarning.timeline && selectedWarning.timeline.length > 0 ? (
                  <div className="space-y-4">
                    {selectedWarning.timeline.map((item, index) => (
                      <div key={index} className="flex gap-4">
                        <div className="flex flex-col items-center">
                          <div className={`w-3 h-3 rounded-full ${
                            index === 0 ? 'bg-red-500' :
                            index === selectedWarning.timeline!.length - 1 ? 'bg-green-500' :
                            'bg-blue-500'
                          }`} />
                          {index < selectedWarning.timeline!.length - 1 && (
                            <div className="w-0.5 h-12 bg-gray-300" />
                          )}
                        </div>
                        <div className="flex-1 pb-4">
                          <div className="flex items-center gap-2 mb-1">
                            <span className="text-sm font-medium">{item.action}</span>
                            <Badge variant="outline" className="text-xs">{item.operator}</Badge>
                          </div>
                          <p className="text-xs text-muted-foreground mb-1">{item.time}</p>
                          {item.details && (
                            <p className="text-sm text-gray-700 mt-2 p-2 bg-gray-50 rounded">
                              {item.details}
                            </p>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                ) : (
                  <p className="text-sm text-muted-foreground text-center py-8">暂无时间线记录</p>
                )}
              </Card>
            </TabsContent>

            <TabsContent value="details" className="mt-4">
              <div className="grid grid-cols-2 gap-4">
                {selectedWarning.processingNotes && (
                  <Card className="p-4 col-span-2">
                    <label className="text-sm font-medium">处置过程记录</label>
                    <div className="mt-2 p-3 bg-gray-50 rounded text-sm">
                      {selectedWarning.processingNotes}
                    </div>
                  </Card>
                )}
                {selectedWarning.resources && (
                  <Card className="p-4">
                    <label className="text-sm font-medium">调用资源</label>
                    <div className="mt-2 p-3 bg-gray-50 rounded text-sm">
                      {selectedWarning.resources}
                    </div>
                  </Card>
                )}
                {selectedWarning.actualCost && (
                  <Card className="p-4">
                    <label className="text-sm font-medium">实际成本</label>
                    <div className="mt-2 p-3 bg-gray-50 rounded text-sm">
                      {selectedWarning.actualCost}
                    </div>
                  </Card>
                )}
                <Card className="p-4">
                  <label className="text-sm font-medium">接收人员</label>
                  <div className="mt-2 p-3 bg-gray-50 rounded text-sm">
                    {selectedWarning.recipients.join(', ')}
                  </div>
                </Card>
                <Card className="p-4">
                  <label className="text-sm font-medium">推送渠道</label>
                  <div className="mt-2 flex gap-1">
                    {selectedWarning.channels.map((ch, i) => (
                      <Badge key={i} variant="outline" className="text-xs">{ch}</Badge>
                    ))}
                  </div>
                </Card>
              </div>
            </TabsContent>
          </Tabs>

          <div className="flex gap-2 justify-end pt-4 border-t">
            <Button variant="outline" onClick={onClose}>
              关闭
            </Button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}