'use client';

import { Card } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { Eye, Clock, FileText, CheckCircle2, User, Activity } from 'lucide-react';
import { WarningRecord } from './disposalReducer';

interface WarningListProps {
  filteredWarnings: WarningRecord[];
  getRiskTypeIcon: (type: string) => string;
  getRiskLevelColor: (level: string) => string;
  getStatusIcon: (status: string) => React.ReactNode;
  getStatusColor: (status: string) => string;
  onViewWarning: (warning: WarningRecord) => void;
}

export function WarningList({
  filteredWarnings,
  getRiskTypeIcon,
  getRiskLevelColor,
  getStatusIcon,
  getStatusColor,
  onViewWarning,
}: WarningListProps) {
  const getProgressPercentage = (status: string) => {
    switch (status) {
      case '未查看': return 25;
      case '已查看': return 50;
      case '处理中': return 75;
      case '已完成': return 100;
      default: return 0;
    }
  };

  const getProgressColor = (status: string) => {
    switch (status) {
      case '未查看': return 'bg-red-500';
      case '已查看': return 'bg-blue-500';
      case '处理中': return 'bg-orange-500';
      case '已完成': return 'bg-green-500';
      default: return 'bg-gray-500';
    }
  };

  const getProgressBgColor = (status: string) => {
    switch (status) {
      case '未查看': return 'bg-red-200';
      case '已查看': return 'bg-blue-200';
      case '处理中': return 'bg-orange-200';
      case '已完成': return 'bg-green-200';
      default: return 'bg-gray-200';
    }
  };

  return (
    <Card className="p-6">
      <h3 className="mb-4 flex items-center gap-2">
        <Activity className="w-5 h-5 text-purple-600" />
        预警处置跟踪
      </h3>
      <div className="space-y-4">
        {filteredWarnings.map(warning => (
          <Card key={warning.id} className="p-4 hover:shadow-md transition-shadow">
            <div className="flex items-start justify-between mb-3">
              <div className="flex items-start gap-3">
                <div className="text-2xl">{getRiskTypeIcon(warning.riskType)}</div>
                <div>
                  <div className="flex items-center gap-2 mb-1">
                    <h4>{warning.fieldName}</h4>
                    <Badge className={getRiskLevelColor(warning.riskLevel)}>
                      {warning.riskLevel}
                    </Badge>
                    <Badge variant="outline" className="text-xs">
                      {warning.riskType}
                    </Badge>
                  </div>
                  <p className="text-sm text-muted-foreground">
                    预警时间: {warning.warningTime}
                  </p>
                </div>
              </div>
              <div className={`px-3 py-1.5 rounded-full flex items-center gap-2 ${getStatusColor(warning.status)}`}>
                {getStatusIcon(warning.status)}
                <span className="text-sm font-medium">{warning.status}</span>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4 mb-3">
              <div className="p-3 bg-gray-50 rounded-lg">
                <p className="text-xs text-muted-foreground mb-1">责任人</p>
                <p className="text-sm font-medium flex items-center gap-1">
                  <User className="w-3 h-3" />
                  {warning.responsible}
                </p>
              </div>
              <div className="p-3 bg-gray-50 rounded-lg">
                <p className="text-xs text-muted-foreground mb-1">接收人</p>
                <p className="text-sm">{warning.recipients.join(', ')}</p>
              </div>
            </div>

            {/* 处置流程进度 */}
            <div className="mb-3 p-4 bg-gray-50 rounded-lg">
              <div className="flex items-center justify-between text-xs mb-2">
                <span className="text-muted-foreground">处置进度</span>
                <span className="text-purple-600 font-medium">
                  {warning.timeline?.length || 0} 个节点
                </span>
              </div>
              <div className="flex items-center gap-2">
                <div className={`flex-1 h-2 rounded-full ${getProgressBgColor(warning.status)}`}>
                  <div
                    className={`h-full rounded-full transition-all ${getProgressColor(warning.status)}`}
                    style={{ width: `${getProgressPercentage(warning.status)}%` }}
                  />
                </div>
                <span className="text-xs font-medium">{getProgressPercentage(warning.status)}%</span>
              </div>
            </div>

            {warning.viewTime && (
              <div className="p-3 bg-blue-50 rounded-lg mb-3">
                <p className="text-xs text-blue-900 mb-1 flex items-center gap-1">
                  <Eye className="w-3 h-3" />
                  查看时间
                </p>
                <p className="text-sm text-blue-800">{warning.viewTime}</p>
              </div>
            )}

            {warning.disposalPlan && (
              <div className="p-3 bg-orange-50 rounded-lg mb-3">
                <p className="text-xs text-orange-900 mb-1 flex items-center gap-1">
                  <FileText className="w-3 h-3" />
                  处置方案
                </p>
                <p className="text-sm text-orange-800 line-clamp-2">{warning.disposalPlan}</p>
                {warning.disposalPlanSubmitTime && (
                  <p className="text-xs text-orange-600 mt-1">
                    提交于: {warning.disposalPlanSubmitTime}
                  </p>
                )}
              </div>
            )}

            {warning.disposalResult && (
              <div className="p-3 bg-green-50 rounded-lg mb-3">
                <p className="text-xs text-green-900 mb-1 flex items-center gap-1">
                  <CheckCircle2 className="w-3 h-3" />
                  处置结果
                </p>
                <p className="text-sm text-green-800 line-clamp-2">{warning.disposalResult}</p>
                <p className="text-xs text-green-700 mt-1">
                  完成时间: {warning.completedTime}
                </p>
                {warning.effectEvaluation && (
                  <div className="mt-2 pt-2 border-t border-green-200">
                    <p className="text-xs text-green-900 mb-1">效果评估</p>
                    <p className="text-sm text-green-800 line-clamp-1">{warning.effectEvaluation}</p>
                  </div>
                )}
              </div>
            )}

            <div className="flex gap-2">
              <Button
                size="sm"
                variant="outline"
                onClick={() => onViewWarning(warning)}
              >
                <Eye className="w-4 h-4 mr-2" />
                查看工作流
              </Button>
              {warning.timeline && warning.timeline.length > 0 && (
                <Badge variant="outline" className="text-xs flex items-center gap-1">
                  <Clock className="w-3 h-3" />
                  {warning.timeline.length} 条记录
                </Badge>
              )}
            </div>
          </Card>
        ))}
      </div>
    </Card>
  );
}