import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, AlertTriangle, Edit2, Trash2 } from 'lucide-react';
import { useResponsive } from '../../hooks/useResponsive';
import { supabase } from '../../supabase/client';
import type { PlanWithSteps } from '../../types';

interface PlanEditModalProps {
  plan: PlanWithSteps;
  isOpen: boolean;
  onClose: () => void;
  onPlanUpdated?: () => void;
}

export function PlanEditModal({ plan, isOpen, onClose, onPlanUpdated }: PlanEditModalProps) {
  const { isMobile } = useResponsive();
  const [activeTab, setActiveTab] = useState<'edit' | 'delete'>('edit');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState('');
  
  const [editForm, setEditForm] = useState({
    product_name: plan.product_name,
    color: plan.color,
    target_quantity: plan.target_quantity,
    remark: plan.remark || ''
  });

  // 判断是否可以编辑/删除：只有当"确认计划"步骤状态为 pending 时才允许
  const confirmStep = plan.processSteps.find(s => s.step_type === 'confirm');
  const canModify = confirmStep?.status === 'pending';

  const handleUpdate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!canModify) {
      setError('计划已被工厂确认，无法修改');
      return;
    }

    setIsSubmitting(true);
    setError('');

    const { error: updateError } = await supabase
      .from('production_plans')
      .update({
        product_name: editForm.product_name,
        color: editForm.color,
        target_quantity: editForm.target_quantity,
        remark: editForm.remark || null,
        updated_at: new Date().toISOString()
      })
      .eq('id', plan.id);

    setIsSubmitting(false);

    if (updateError) {
      setError('更新失败: ' + updateError.message);
    } else {
      onPlanUpdated?.();
      onClose();
    }
  };

  const handleDelete = async () => {
    if (!canModify) {
      setError('计划已被工厂确认，无法删除');
      return;
    }

    setIsSubmitting(true);
    setError('');

    // 先删除关联的 process_steps
    await supabase.from('plan_process_steps').delete().eq('plan_id', plan.id);
    
    // 再删除 plan_factories 关联
    await supabase.from('plan_factories').delete().eq('plan_id', plan.id);
    
    // 最后删除计划
    const { error: deleteError } = await supabase
      .from('production_plans')
      .delete()
      .eq('id', plan.id);

    setIsSubmitting(false);

    if (deleteError) {
      setError('删除失败: ' + deleteError.message);
    } else {
      onPlanUpdated?.();
      onClose();
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        exit={{ opacity: 0, scale: 0.95 }}
        className="bg-white rounded-2xl w-full max-w-md shadow-2xl overflow-hidden"
      >
        {/* 头部 */}
        <div className="flex items-center justify-between p-4 border-b border-gray-100">
          <div className="flex items-center gap-2">
            {activeTab === 'edit' ? (
              <Edit2 className="w-5 h-5 text-blue-600" />
            ) : (
              <Trash2 className="w-5 h-5 text-red-600" />
            )}
            <h3 className="text-lg font-semibold text-gray-900">
              {activeTab === 'edit' ? '编辑计划' : '删除计划'}
            </h3>
          </div>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <X className="w-5 h-5 text-gray-500" />
          </button>
        </div>

        {/* Tab 切换 */}
        {canModify && (
          <div className="flex border-b border-gray-100">
            <button
              onClick={() => setActiveTab('edit')}
              className={`flex-1 py-3 text-sm font-medium transition-colors ${
                activeTab === 'edit'
                  ? 'text-blue-600 border-b-2 border-blue-600'
                  : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              编辑
            </button>
            <button
              onClick={() => setActiveTab('delete')}
              className={`flex-1 py-3 text-sm font-medium transition-colors ${
                activeTab === 'delete'
                  ? 'text-red-600 border-b-2 border-red-600'
                  : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              删除
            </button>
          </div>
        )}

        {/* 内容区域 */}
        <div className="p-4">
          {!canModify ? (
            <div className="text-center py-8">
              <AlertTriangle className="w-12 h-12 text-amber-500 mx-auto mb-3" />
              <p className="text-gray-600 mb-2">计划已被工厂确认</p>
              <p className="text-sm text-gray-400">已确认的计划无法修改或删除</p>
            </div>
          ) : activeTab === 'edit' ? (
            <form onSubmit={handleUpdate} className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  产品名称
                </label>
                <input
                  type="text"
                  value={editForm.product_name}
                  onChange={(e) => setEditForm({ ...editForm, product_name: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  颜色
                </label>
                <input
                  type="text"
                  value={editForm.color}
                  onChange={(e) => setEditForm({ ...editForm, color: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  计划产量（米）
                </label>
                <input
                  type="number"
                  value={editForm.target_quantity}
                  onChange={(e) => setEditForm({ ...editForm, target_quantity: parseInt(e.target.value) || 0 })}
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                  min="1"
                  required
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">
                  备注
                </label>
                <textarea
                  value={editForm.remark}
                  onChange={(e) => setEditForm({ ...editForm, remark: e.target.value })}
                  className="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all resize-none"
                  rows={3}
                />
              </div>

              {error && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
                  {error}
                </div>
              )}

              <div className="flex gap-3 pt-2">
                <button
                  type="button"
                  onClick={onClose}
                  className="flex-1 py-2.5 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium"
                >
                  取消
                </button>
                <button
                  type="submit"
                  disabled={isSubmitting}
                  className="flex-1 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-50"
                >
                  {isSubmitting ? '保存中...' : '保存修改'}
                </button>
              </div>
            </form>
          ) : (
            <div className="space-y-4">
              <div className="p-4 bg-red-50 border border-red-200 rounded-xl">
                <div className="flex items-start gap-3">
                  <AlertTriangle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
                  <div>
                    <p className="font-medium text-red-900">确认删除此计划？</p>
                    <p className="text-sm text-red-700 mt-1">
                      计划编号: {plan.plan_code}
                    </p>
                    <p className="text-sm text-red-700">
                      产品: {plan.product_name}-{plan.color}
                    </p>
                    <p className="text-xs text-red-600 mt-2">
                      此操作不可恢复，请谨慎操作
                    </p>
                  </div>
                </div>
              </div>

              {error && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
                  {error}
                </div>
              )}

              <div className="flex gap-3">
                <button
                  onClick={onClose}
                  className="flex-1 py-2.5 border border-gray-200 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors font-medium"
                >
                  取消
                </button>
                <button
                  onClick={handleDelete}
                  disabled={isSubmitting}
                  className="flex-1 py-2.5 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium disabled:opacity-50"
                >
                  {isSubmitting ? '删除中...' : '确认删除'}
                </button>
              </div>
            </div>
          )}
        </div>
      </motion.div>
    </div>
  );
}