import { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '../../ui/dialog';
import { Button } from '../../ui/button';
import { Textarea } from '../../ui/textarea';
import { Label } from '../../ui/label';
import { Task } from '../../../types/task';
import { AlertCircle, XCircle } from 'lucide-react';

interface TaskCancelDialogProps {
  open: boolean;
  task: Task | null;
  onClose: () => void;
  onConfirm: (taskId: string, reason: string) => void;
}

export function TaskCancelDialog({ open, task, onClose, onConfirm }: TaskCancelDialogProps) {
  const [cancelReason, setCancelReason] = useState('');

  const handleConfirm = () => {
    if (!task) return;
    onConfirm(task.id, cancelReason);
    setCancelReason('');
    onClose();
  };

  const handleClose = () => {
    setCancelReason('');
    onClose();
  };

  if (!task) return null;

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent aria-describedby="cancel-task-description">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <XCircle className="w-5 h-5 text-error" />
            <span>取消任务</span>
          </DialogTitle>
          <DialogDescription id="cancel-task-description">
            确认要取消任务 "{task.name}" 吗？
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          {/* 任务信息 */}
          <div className="p-4 bg-gray-50 rounded-lg space-y-2 text-sm">
            <div className="flex justify-between">
              <span className="text-muted-foreground">任务类型:</span>
              <span>{task.taskType}</span>
            </div>
            <div className="flex justify-between">
              <span className="text-muted-foreground">当前状态:</span>
              <span className="font-medium">{task.status}</span>
            </div>
            {task.machineryName && (
              <div className="flex justify-between">
                <span className="text-muted-foreground">农机:</span>
                <span>{task.machineryName}</span>
              </div>
            )}
            {task.driverName && (
              <div className="flex justify-between">
                <span className="text-muted-foreground">驾驶员:</span>
                <span>{task.driverName}</span>
              </div>
            )}
          </div>

          {/* 取消原因 */}
          <div>
            <Label htmlFor="cancelReason">取消原因 *</Label>
            <Textarea
              id="cancelReason"
              value={cancelReason}
              onChange={(e) => setCancelReason(e.target.value)}
              placeholder="请说明取消任务的原因，如：天气原因、设备故障、计划变更等..."
              rows={4}
              className="mt-2"
              required
            />
            {cancelReason.trim() === '' && (
              <p className="text-xs text-error mt-1">请填写取消原因</p>
            )}
          </div>

          {/* 警告提示 */}
          <div className="p-4 bg-error-muted border border-error rounded-lg">
            <div className="flex items-start gap-2">
              <AlertCircle className="w-5 h-5 text-error mt-0.5 flex-shrink-0" />
              <div className="text-sm text-error space-y-2">
                <p className="font-medium">取消任务后将：</p>
                <ul className="list-disc list-inside space-y-1 ml-2">
                  <li>立即停止任务执行</li>
                  <li>释放已分配的农机和驾驶员</li>
                  <li>任务状态变为"已取消"</li>
                  <li>此操作不可撤销</li>
                </ul>
                {task.status === '进行中' && (
                  <p className="mt-2 text-error font-medium">
                    ⚠️ 任务正在执行中，取消将中止当前作业！
                  </p>
                )}
              </div>
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={handleClose}>
            保留任务
          </Button>
          <Button 
            variant="destructive" 
            onClick={handleConfirm}
            disabled={cancelReason.trim() === ''}
          >
            <XCircle className="w-4 h-4 mr-2" />
            确认取消
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
